CSS3 - 使用关键帧动画实现pulse脉冲效果(心脏跳动效果)
作者:hangge | 2019-12-22 08:10
有时为了让页面上的某个元素更加醒目,会给它添加个脉冲效果(pulse 效果,像是心脏在跳动)。本文通过样例演示如何使用 @keyframes 关键帧动画来实现这个效果。
1,效果图
页面上的星星会不断地放大缩小。同时不同星星还分别设置了不同的动画开始前的延时(delay),这样确保所有星星不会同时放大、同时缩小,从而显得更加有层次感。
2,样例代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> @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; } </style> </head> <body> <img src="star.png" class="sparkle-1" style="position:fixed;top:0px;left:0px"> <img src="star.png" class="sparkle-1" style="position:fixed;top:100px;left:130px"> <img src="star.png" class="sparkle-2" style="position:fixed;top:20px;left:80px"> <img src="star.png" class="sparkle-2" style="position:fixed;top:70px;left:90px"> <img src="star.png" class="sparkle-3" style="position:fixed;top:90px;left:20px"> <img src="star.png" class="sparkle-3" style="position:fixed;top:50px;left:140px"> </body> </html>
全部评论(0)