前言:
使用伪元素来实现心效果,动画来实现跳动.
效果图:
实现代码:
1、template或者html定义一个容器
<div class="heart fr"></div>
2、css里面加样式
/*心跳动*/
.heart {
top: -4px;
right: 14px;
position:relative;
width: 10px;
height: 10px;
margin: 10px auto;
background-color: tomato;
/*transform: rotate(45deg);顺时针旋转45度(逆时针旋转是-45deg)*/
animation: move 1s infinite alternate;/*动画名称 运动时间 运动次数infinite表示无限次 alternate往返效果相同*/
}
.heart:before{
content: "";
position: absolute;
top: 0px;
right: 5px;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: tomato;
}
.heart:after {
content: ""; /*设置:before和:after时必须设置其content属性,否则伪元素就不起作用*/
position:absolute;/*相对于它的父元素来定位,它的父元素要加上position:relative;*/
top: -5px;
left: 0;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: tomato;
}
@keyframes move {
0%{
transform: scale(0.8) rotate(45deg);/*缩小到0.8倍*/
}
100%{
transform: scale(1.2) rotate(45deg);/*放大到1.2倍*/
}
}