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
原文地址:http://www.cnblogs.com/naitang/p/16864096.html
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请务用于商业用途!
3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员!
8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载
声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性