纯css爱心代码-最近超级火的打火机与公主裙中的爱心代码(简易版)
theme: cyanosis
最近打火机与公主裙中的爱心代码超级火,看着特别心动,让俺用css来写个简易版!!!
先看效果:
代码拆解:
主要是分为3大部分
- 分子颗粒
- 爱心
- 动画
代码实现:
分子颗粒
分子颗粒其实非常简单,主要是使用到的就是css的渐变:linear-gradient,然后再用css3新出的background-size来控制颗粒之间的距离。
控制linear-gradient的角度,只展示出一个点。
这是background-size控制在10像素之间的效果。
background: linear-gradient(148deg, #f00, transparent 2px),
linear-gradient(45deg, pink 0px, transparent 3px);background-size: 10px 10px;
爱心
爱心其实更加简单,使用伪元素::after和::before做出两个圆,然后用定位调整一下位置。
.loveMargin {width: 300px;height: 300px;background: linear-gradient(148deg, #f00, transparent 2px), linear-gradient(45deg, pink 0px, transparent 3px);background-size: 10px 10px;position: relative;
}.loveMargin::after {content: '';position: absolute;left: 0px;top: -142px;width: 300px;height: 300px;background: linear-gradient(148deg, #f00, transparent 2px), linear-gradient(45deg, pink 0px, transparent 3px);background-size: 10px 10px;border-radius: 50%;
}.loveMargin::before {content: '';position: absolute;left: -137px;width: 300px;height: 300px;background: linear-gradient(148deg, #f00, transparent 2px), linear-gradient(45deg, pink 0px, transparent 3px);background-size: 10px 10px;border-radius: 50%;}
动画效果
心动的效果,其实主要就是放大和缩小,用到transform中的scale()。再用动画@keyframes控制关键帧来实现。
不停的心动主要使用的是animation中的infinite属性。
animation: scaleDraw 3s infinite;
-webkit-animation: scaleDraw 3s infinite;
@keyframes scaleDraw {/*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/0% {transform: scale(1);
/*开始为原始大小*/}50% {transform: scale(1.1);/*放大1.1倍*/}100% {transform: scale(1);/*开始为原始大小*/}}
将这些效果合并,并且调整,就能变成一个低配版的打火机与公主裙中的爱心代码效果啦~
获取地址链接: https://pan.baidu.com/s/1su-DPYYjg_vW2nTpE2RnOA?pwd=uifz 提取码: uifz
纯css爱心代码-最近超级火的打火机与公主裙中的爱心代码(简易版)相关推荐
- html图片显示详情,纯CSS鼠标经过图片视差弹出层显示详情链接按钮特效代码.html...
纯CSS鼠标经过图片视差弹出层显示详情链接按钮特效代码 * { box-sizing: border-box; } html, body { height: 100%; background:#ddd ...
- 纯CSS实现左右拖拽改变布局大小 使用CSS3中resize属性 水平,垂直拖动元素,改变大小
利用浏览器非overflow:auto元素设置resize可以拉伸的特性实现无JavaScript的分栏宽度控制. webkit浏览器下滚动条可以自定义,其中resize区域大小就是scrollbar ...
- python中代码注释使用的符号是_Python语句中用于注释代码的符号是
Python语句中用于注释代码的符号是 答:#号 发电机-双绕组变压器单元接线,发电机出口不装设断路器的原因是(???) 答:断路器造价高. 会计报表各项目的数据必须建立在()的基础之上 答:真实可靠 ...
- wpf时间显示代码_如何在ASP.NET和WPF中显示QR代码
wpf时间显示代码 I've half-jokingly said that there's never a good reason to use a QR Code. However, I'm wo ...
- c语言中如何让诊断代码右移_如何检测和诊断生产中的慢代码
c语言中如何让诊断代码右移 开发人员面临的更困难的任务之一是查找和诊断生产中运行缓慢的代码. 首先,您如何监控生产代码而不放慢速度? 当然,您无法通过分析器运行生产代码. 即使您有计时代码的机制,那么 ...
- 打火机与公主裙剧中的爱心
效果 代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML>< ...
- wordpress运行php代码,怎么在wordpress的文章或页面中运行PHP代码
最近有个项目需要在wordpress里运行php代码,可是在编辑器里输入php代码后,前台只会以文本的方式输出,非常不方便,根本实现不了我的需求.下面我们来看一下该怎么才可以实现在wordpress里 ...
- 猿代码首届团课免单节火热进行中!|猿代码科技
哇噻:重磅好消息! 猿代码回馈新老学员,特别推出团购优惠活动. 零利疯抢,震撼全场.198元抢价值1980元:[计算机考研秘籍+java训练营] 3人团(前20个团长额外送小米Redmii蓝牙耳机或者 ...
- 纯CSS实现圆角矩形框
为什么80%的码农都做不了架构师?>>> 实现原理: 纯CSS方式实现圆角框的原理在网络上已经有很多人详细解说了,下面这个示意图是我将其中的一个圆角进行放大后的效果. 图一 从 ...
最新文章
- php+rsa生成签名sign,PHP 做 RSA 签名 生成订单(支付宝例子)
- JDK线程池的ThreadFactory
- Android5.0录屏方案
- 《Effective C#》某些地方实在是对不起Effective这个词(I)
- uvalive4744(数论)
- ACM训练计划建议(转)
- python bootstrap 视频_想用Django+ Bootstrap写一个网站, 有哪些比较系统完整的书或者视频可以参考?...
- java-不用辅助变量,两变量直接交换
- web项目下的web.xml listener监听总结
- 多图像合成为延时视频的方法
- MySQL IS NULL(IS NOT NULL)使用索引分析
- Quartus17.0 + ModelSim - IntelFpga安装及破解
- 吴昂雄回应Arm中国控制权争夺:Arm罢免我无效
- 通达信自编的选股公式如何使用?
- 图像分割之(五)活动轮廓模型之Snake模型简介
- java 实现word文档的在线签批圈阅(手写批注)
- Matlab模拟傅里叶变换
- 【原创】PID控制算法模拟器
- 网页小图标和文字混排时如何对齐基准线
- imperva网关重新注册