css按钮循环放大缩小动画动效

最新推荐文章于 2025-12-19 19:49:56 发布

原创最新推荐文章于 2025-12-19 19:49:56 发布 · 1.5k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #前端

收录于

文章讲述了如何通过CSS3的keyframes和transform属性创建一个名为fireworks的动画效果，该效果使元素呈现出周期性的缩放变化，从而模拟烟火绽放的动态景象。

.fireworks {
    animation: pulse 2s infinite;
}

@keyframes fireworks {
    0% {
        transform: scale(1);
        /*开始为原始大小*/
    }

    25% {
        transform: scale(1.2);
        /*放大1.1倍*/
    }

    50% {
        transform: scale(1);
    }

    75% {
        transform: scale(1.2);
    }

}

首先给需要加动效的盒子，加上类名fireworks，然后针对这个类名，写一个样式循环，使用transform来缩放对应的盒子，里面的内容会跟着一起适配