CSS制作音乐频率动画

最新推荐文章于 2024-11-07 15:30:46 发布

「已注销」

最新推荐文章于 2024-11-07 15:30:46 发布

阅读量1.6k

点赞数 1

文章标签： css class 动画音乐

本文链接：https://blog.youkuaiyun.com/wall1999/article/details/55094890

版权

本文展示了如何使用CSS制作一个音乐频率动画。通过定义关键帧动画`shake`，并应用到不同位置的元素上，创建了一组随时间变化高度和位置的波动效果。每个元素的动画延迟时间不同，从而形成音乐波动的视觉表现。

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

 <style>

    @-webkit-keyframes shake {
        0% {
            height: 5px;
            margin-top: 0;
        }
        50% {
            height: 100px;
            margin-top: -50px;
        }
        100% {
            height: 5px;
            margin-top: 0;
        }
    }
    
    @keyframes shake {
        0% {
            height: 5px;
            margin-top: 0;
        }
        50% {
            height: 100px;
            margin-top: -50px;
        }
        100% {
            height: 5px;
            margin-top: 0;
        }
    }
    
    .waves {
        position: relative;
        width: 260px;
        margin: 0 auto;
        padding: 60px 0;
    }
    
    .waves i {
        display: inline-block;
        position: absolute;
        height: 5px;
        width: 5px;
        background: skyblue;
    }
    
    .waves i:nth-last-child(1) {
        left: 10px;