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;

    }

}