純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);
/*開始為原始大小*/
}
}
將這些效果合併，並且調整，就能變成一個低配版的打火機與公主裙中的愛心代碼效果啦～
獲取地址鏈接: //pan.baidu.com/s/1su-DPYYjg_vW2nTpE2RnOA?pwd=uifz 提取碼: uifz
