33.《html+css3实现波浪音阶》

最新推荐文章于 2024-07-30 08:59:30 发布

@逆风微笑代码狗

最新推荐文章于 2024-07-30 08:59:30 发布

阅读量448

点赞数

分类专栏：笔记文章标签： html css3 css

本文链接：https://blog.csdn.net/qq_44864082/article/details/107193167

版权

笔记专栏收录该内容

45 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div{
        float: left;
        margin: 0px 5px;
        width: 10px;
        height: 100px;
        background-color: #9999;
        transform: scaley(.2);
        border-radius: 5px;
        animation: chang 2s linear infinite alternate;
    }
    /* 颜色和高度动态变化 */
    @keyframes chang {
        0%{
            background-color: #9999;
            transform: scaley(.2);
        }
        100%{
            background-color: #333;
            transform: scaley(1);
        } 
    }
    /* 延迟 */
    .two{
        animation: chang 2s  0.5s linear infinite alternate;
    }
    .third{
        animation: chang 2s  0.8s linear infinite alternate;
    }
    .four{
        animation: chang 2s  1.2s linear infinite alternate;
    }
    .five{
        animation: chang 2s  1.5s linear infinite alternate;
    }
    .six{
        animation: chang 2s  1.8s linear infinite alternate;
    }
    .seven{
        animation: chang 2s  2.1s linear infinite alternate;
    }
    .engit{
        animation: chang 2s  2.1s linear infinite alternate;
    }
</style>
<body>
    <div class="seven"></div>
    <div class="six"></div>
    <div class="five"></div>
    <div class="third"></div>
    <div class="third"></div>
    <div class="two"></div>
    <div class="one"></div>
    <div class="two"></div>
    <div class="third"></div>
    <div class="four"></div>
    <div class="five"></div>
    <div class="six"></div>
    <div class="seven"></div>
    <div class="engit"></div>

</body>
</html>