CSS3 动画实现放大缩小、涟漪扩散效果、叠加图片循环来回显示

最新推荐文章于 2025-03-11 12:09:31 发布

yujin0213

最新推荐文章于 2025-03-11 12:09:31 发布

阅读量7.8w

点赞数 49

分类专栏： CSS

本文链接：https://blog.csdn.net/yujin0213/article/details/79262825

版权

本文介绍了如何使用CSS3动画实现三种效果：无限循环的放大缩小效果，适合用于模拟跳动的气球；涟漪扩散效果，利用动画延迟属性创造出视觉冲击；以及叠加图片的循环来回显示，通过调整透明度控制图片的交替展示。这些技巧为网页增添动态美感。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、无限放大缩小，可以应用于跳动的气球等场景，效果如下
这里写图片描述

html部分
<div class="ballon"></div>

css部分
   @keyframes scaleDraw {  /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
            0%{
                transform: scale(1);  /*开始为原始大小*/
            }
            25%{
                transform: scale(1.1); /*放大1.1倍*/
            }
            50%{
                transform: scale(1);
            }
            75%{
                transform: scale(1.1);
            }
        }
    .ballon{
            width: 150px;
            height: 200px;
            background: url("images/balloon.png");
            background-size: 150px

最低0.47元/天解锁文章