html5 心跳效果,CSS3 - 使用关键帧动画实现pulse脉冲效果（心脏跳动效果）

有时为了让页面上的某个元素更加醒目，会给它添加个脉冲效果(pulse效果，像是心脏在跳动)。本文通过样例演示如何使用@keyframes关键帧动画来实现这个效果。

1，效果图

页面上的星星会不断地放大缩小。同时不同星星还分别设置了不同的动画开始前的延时(delay)，这样确保所有星星不会同时放大、同时缩小，从而显得更加有层次感。

       

2，样例代码

@keyframes pulse {

0% {

transform: scale(1);

}

90% {

transform: scale(0.3);

}

100% {

transform: scale(1);

}

}

.sparkle-1 {

animation: pulse 1s linear infinite;

}

.sparkle-2 {

animation: pulse 1s 300ms linear infinite;

}

.sparkle-3 {

animation: pulse 1s 600ms linear infinite;

}