返回 导航

HTML5 / CSS3

hangge.com

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）

回到顶部