最近打火机与公主裙中的爱心代码超级火，看着特别心动，让俺用css来写个简易版！！！
先看效果：
代码拆解：
主要是分为3大部分
分子颗粒
爱心
动画
代码实现：
分子颗粒
分子颗粒其实非常简单，主要是使用到的就是css的渐变：linear-gradient，然后再用css3新出的background-size来控制颗粒之间的距离。控制linear-gradient的角度，只展示出一个点。
这是background-size控制在10像素之间的效果。
background:linear-gradient(deg,#f00,transparent2px),linear-gradient(45deg,pink0px,transparent3px);background-size:10px10px;
爱心
爱心其实更加简单，使用伪元素::after和::before做出两个圆，然后用定位调整一下位置。
.loveMargin{width:px;height:px;background:linear-gradient(deg,#f00,transparent2px),linear-gradient(45deg,pink0px,transparent3px);background-size:10px10px;position:relative;}.loveMargin::after{content:;position:absolute;left:0px;top:-px;width:px;height:px;background:linear-gradient(deg,#f00,transparent2px),linear-gradient(45deg,pink0px,transparent3px);background-size:10px10px;border-radius:50%;}.loveMargin::before{content:;position:absolute;left:-px;width:px;height:px;background:linear-gradient(deg,#f00,transparent2px),linear-gradient(45deg,pink0px,transparent3px);background-size:10px10px;border-radius:50%;}
动画效果
心动的效果，其实主要就是放大和缩小，用到transform中的scale()。再用动画
keyframes控制关键帧来实现。不停的心动主要使用的是animation中的infinite属性。animation:scaleDraw3sinfinite;-webkit-animation:scaleDraw3sinfinite;
keyframesscaleDraw{/*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/0%{transform:scale(1);/*开始为原始大小*/}50%{transform:scale(1.1);/*放大1.1倍*/}%{transform:scale(1);/*开始为原始大小*/}}
将这些效果合并，并且调整，就能变成一个低配版的打火机与公主裙中的爱心代码效果啦～
获取地址链接: