css画爱心并实现“爱心跳动”
第一次写博客，来记录自己在前端上的成长，并且希望能够借鉴到其他大神的经验来提高自己的水平。这次打算用css来画一个爱心并实现“爱心跳动”的功能，下面如果有表述不正确的叙述，欢迎各位大神前来指导~
css画爱心并实现“爱心跳动”用到了以下相关知识点：背景图片、定位、CSS3的animation、CSS3的border-radius、伪元素::before和::after
这个爱心可以由一个正方形和两个圆形构成，先简单用div画出一个正方形，以蓝色背景为例，在此，为了方便展示，我给正方形加上了一个margin，方便后面的展示。正方形如下图所示：
然后我们需要给正方形左侧和上侧添加伪元素，就是给左侧和上侧添加两个正方形，然后通过border-radius=50%将两个正方形变成两个圆形，然后定位移动两个圆形的位置来调成爱心形状。未调节两圆形的图形如下图所示：
可能会疑惑为什么只有一个圆形？这是因为这两个圆形重叠在一起了，所以我们需要靠定位来实现爱心的形状，通过调试，我们调节后的爱心如下图所示：
现在看是不是有点像爱心的形状了，只要把蓝色部分变成红色就行，如下图所示：
这样一个爱心就出来啦！我们可以通过使用transform：rorate()来旋转爱心，下面为旋转后的爱心，如下图所示：
通过这个方法，我们就可以随意旋转爱心的方向了，然后现在就是让爱心跳动起来，就是让爱心放大缩小这样持续，我们可以用animation来操作，这个就不做图片展示了，小伙伴们一会可以参考下面代码自己操作一下。最后就是添加一张你喜欢的背景图片，用background来添加，通过background-size：cover；来使背景图片铺满整个页面。这样一颗红色爱心跳动的效果就成功啦！所有的代码如下所示，可供小伙伴们参考。
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>css画爱心</title> 9 <style> 10 body { 11 background: url("images/1.jpg") no-repeat; 12 background-size: cover; 13 14 } 15 16 .heart { 17 width: 200px; 18 height: 200px; 19 background-color: red; 20 position: relative; 21 margin: 100px auto; 22 animation: size 1s infinite; 23 animation-direction: alternate; 24 } 25 26 .heart::before, 27 .heart::after { 28 content: ""; 29 width: 200px; 30 height: 200px; 31 background-color: red; 32 position: absolute; 33 border-radius: 50%; 34 } 35 36 .heart::before { 37 left: -90px; 38 } 39 40 .heart::after { 41 top: -90px; 42 } 43 44 @keyframes size { 45 0% { 46 transform: scale(0.6) rotate(45deg); 47 } 48 49 100% { 50 transform: scale(1) rotate(45deg); 51 } 52 } 53 </style> 54 </head> 55 56 <body> 57 <div class="heart"></div> 58 59 </body> 60 61 </html>
以上就是css画爱心及“爱心跳动”的源代码了，有发现问题的小伙伴们可以留言~希望和大家一起在这里成长！