1,首先我们先画画一个正方形,再利用伪元素::before 和::after 画两个圆。代码如下:
<body>
<article>
<div class="heart">
</div>
</article>
</body>
body{ background-color: pink;}
.heart { width:50px;
height:50px;
position: absolute;
margin: auto;
top: 0;
right:0;
bottom:0;
left: 0;
background-color: red;
transform: rotate(45deg) ;
}
.heart::after{ content: "";
width: 50px;
height: 50px;
position: absolute;
border-radius: 50%;
background-color: red;
top: 0px;
left: -25px;
}
.heart::before {content: "";
width: 50px;
height: 50px;
position: absolute;
background-color: red;
border-radius: 50%;
top: -25px;
left: 0;
}
注意: 设置绝对定位,并且top,right,bottom,left都为0代表生成了一个和父元素同等大小的边框。 因此,在上下左右这四个方向,都存在了可以被分配的空间,所以margin:auto在这个时候就起了作用。 (一定要记得给子元素设置宽高,不然在top,right,bottom,left等于0的影响下,子元素会铺满整个父div)。
2,接下来就是让爱心动起来!
运用css的动画(animation):
(1) 自定义名称:aixin
(2)在.heart选择器中添加 animation:aixin linear 2.5s infinite ;
(3) 设动画平速运动 `
@keyframes aixin{
0%{ transform:rotate(45deg) scale(1) ; }
10%{ transform: rotate(45deg) scale(2) ; }
35%{ transform: rotate(45deg) scale(4) ; }
55%{ transform: rotate(45deg) scale(6) ; }
75%{ transform: rotate(45deg) scale(4);}
90%{ transform: rotate(45deg) scale(2); }
100%{ transform: rotate(45deg) scale(1); }
}
效果图截图: