css3跳动的心脏动画特效
css3跳动的心脏动画特效
html
<div class="heart"></div>
css
<style>
.heart{
width: 100px;
height: 100px;
background-color: crimson;
position: absolute;
top: 45%;
left:45%;
transform: rotate(-45deg);
/* infinite无限循环 */
animation: heartbeat 1.25s infinite;
}
.heart::before,.heart::after{
content: '';
width: 100px;
height: 100px;
background-color: crimson;
border-radius: 50%;
position: absolute;
animation: pulsecolor 1.25s infinite;
}
.heart::before{
top: -50px;
left: 0;
}
.heart::after{
top: 0;
left: 50px;
}
@keyframes heartbeat{
0%{
transform: scale(1) rotate(-45deg);
}
10%{
transform: scale(1.25) rotate(-45deg);
background-color: #ef395e;
}
100%{
transform: scale(1) rotate(-45deg);
}
}
@keyframes pulsecolor{
10%{
background-color: #ef395e;
}
}
</style>分析：
一、先绘制3个图形
1个正方形
.heart{
width: 100px;
height: 100px;
background-color: crimson;
position: absolute;
top: 45%;
left:45%;
}
2个圆形
.heart::before,.heart::after{
content: '';
width: 100px;
height: 100px;
background-color: crimson;
border-radius: 50%;
position: absolute;
}
.heart::before{
top: -50px;
left: 0;
}
.heart::after{
top: 0;
left: 50px;
}
二、然后在设置让正方形 旋转45度
transform: rotate(-45deg);
三、设置动画效果
1.给正方形添加animation动画
animation: heartbeat 1.25s infinite;
@keyframes heartbeat{
0%{
transform: scale(1) rotate(-45deg);
}
10%{
transform: scale(1.25) rotate(-45deg);
background-color: #ef395e;
}
100%{
transform: scale(1) rotate(-45deg);
}
}
2.给两个伪类绘制的图形，添加animation动画
animation: pulsecolor 1.25s infinite;
@keyframes pulsecolor{
10%{
background-color: #ef395e;
}
}
