简易版纯css爱心代码-最近超级火的打火机与公主裙中的爱心代码 _生活百科

theme: cyanosis最近打火机与公主裙中的爱心代码超级火，看着特别心动，让俺用css来写个简易版?。。?
先看效果：

文章插图
代码拆解：主要是分为3大部分

分子颗粒
爱心
动画

代码实现：分子颗粒分子颗粒其实非常简单，主要是使用到的就是css的渐变：linear-gradient ，然后再用css3新出的background-size来控制颗粒之间的距离。控制linear-gradient的角度，只展示出一个点。

文章插图
这是background-size控制在10像素之间的效果。
【简易版纯css爱心代码-最近超级火的打火机与公主裙中的爱心代码】

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