纯css爱心代码-最近超级火的打火机与公主裙中的爱心代码（简易版）

本文正在参与「金石计划 . 分割6万现金大奖」

最近打火机与公主裙中的爱心代码超级火，看着特别心动，让俺用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);
/*开始为原始巨细*/
}
}

将这些作用兼并，而且调整，就能变成一个低配版的打火机与公主裙中的爱心代码作用啦～

作用展示：