css波浪音阶，过渡动画案例

最新推荐文章于 2025-05-28 16:40:21 发布

大可&不必

最新推荐文章于 2025-05-28 16:40:21 发布

阅读量1.1k

点赞数 2

CC 4.0 BY-SA版权

文章标签： css波浪音阶，过渡动画案例

本文链接：https://blog.youkuaiyun.com/style201904/article/details/90726321

本文详细介绍了如何使用CSS3创建过渡动画效果，通过scale变换实现元素的高度伸展动画，同时结合关键帧动画实现颜色变化，展示了动画的延迟和无限循环播放特性。

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

css3过渡动画

<style>
        .box{
            width: 225px;
            height: 200px;
            margin: 50px auto;/*元素在父元素里面水平居中*/
        }
        .item{
            float: left;/*让元素从左到右在一行排列*/
            width: 10px;
            height: 100px;
            background-color: #999;
            border-radius: 5px;
            margin:0 2.5px;
            transform: scale(1,0.2);
            /*
            外边距
                margin:5px 10px;   上下   左右
                margin-top
                margin-bottom
                margin-left
                margin-right

            */
        }
        .first{
            animation: scale 2s linear infinite alternate;
        }
        .second{
            animation: scale 2s 0.3s linear infinite alternate;
        }
        .third{
            animation: scale 2s 0.6s linear infinite alternate;
        }
        .fourth{
            animation: scale 2s 0.9s linear infinite alternate;
        }
        .fifth{
            animation: scale 2s 1.2s linear infinite alternate;
        }
        .sixth{
            animation: scale 2s 1.5s linear infinite alternate;
        }
        .seventh{
            animation: scale 2s 1.8s linear infinite alternate;
        }
        .eighth{
            animation: scale 2s 2.1s linear infinite alternate;
        }

        @keyframes scale {
            0%{
                transform: scale(1,0.2);
                background-color: #999;
            }
            100%{
                transform: scale(1,1);
                background-color: #333;
            }
        }
    </style>

<body>
    <div class="box">
        <div class="item eighth"></div>
        <div class="item seventh"></div>
        <div class="item sixth"></div>
        <div class="item fifth"></div>
        <div class="item fourth"></div>
        <div class="item third"></div>
        <div class="item second"></div>
        <div class="item first"></div>
        <div class="item second"></div>
        <div class="item third"></div>
        <div class="item fourth"></div>
        <div class="item fifth"></div>
        <div class="item sixth"></div>
        <div class="item seventh"></div>
        <div class="item eighth"></div>
    </div>
</body>

效果图
在这里插入图片描述