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

喜欢ヅ旅行 2022-01-22 23:25 597阅读 0赞

## 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>

效果图  
![在这里插入图片描述][20190601101049465.png]

[20190601101049465.png]: /images/20220123/76c0aa918fcb4ae3b5141daa18ff9ca6.png

发表评论取消回复

表情：

评论列表（有 0 条评论，597人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS_过渡&动画

过渡transition > 过渡(transition) > \-通过过渡可以指定一个属性发生变化时的切换方式 > \-通过过渡可以创建些非常好的效果，提升用户

﹏ヽ暗。殇╰゛Y/ 2023年10月06日 16:59/ 0 赞/ 50 阅读

相关 CSS转换，过渡，动画的学习

一：转换 CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。 > translate(50px,100px) 移动 > rotate(30deg)

Love The Way You Lie/ 2023年10月05日 22:22/ 0 赞/ 10 阅读

相关 CSS3-过渡动画

CSS3 中的 `transition` 属性用于实现元素从一种样式变换为另一种样式时为元素添加过渡效果。 `transition` 属性是一个综合属性，可以简写也可以单独设

谁践踏了优雅/ 2023年07月02日 12:26/ 0 赞/ 158 阅读

相关 web前端学习7-css动画过渡

学习7-css动画过渡 <!DOCTYPE html> <html> <head> <meta charset="utf-8">

待我称王封你为后i/ 2023年02月17日 05:05/ 0 赞/ 29 阅读

相关 CSS--过渡与动画

原文网址：[CSS--过渡与动画\_IT利刃出鞘的博客-CSDN博客][CSS--_IT_-CSDN] 贝塞尔曲线其他网址 > [实用的 CSS — 贝塞尔曲线(c

心已赠人/ 2022年12月23日 11:25/ 0 赞/ 211 阅读

相关 157.纯CSS波浪段动画效果

效果 (源码网盘地址在最后) ![f3d695ff68925bc138926eb7029a8685.gif][] 最近开源了一个 Vue 组件，还不够完善，欢迎大家来

水深无声/ 2022年10月20日 13:58/ 0 赞/ 252 阅读

相关 CSS3过渡和动画

1.过渡 Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。 Safari 需要前缀 -web

怼烎@/ 2022年09月21日 05:37/ 0 赞/ 233 阅读

相关 CSS3之转换、过渡、动画

1、转换 1、转换的简介 1、什么是转换改变元素在页面中的形状，位置，大小，角度的一种效果在页面中允许实现 1、2D转换允许元素

小咪咪/ 2022年07月11日 01:41/ 0 赞/ 527 阅读

相关 CSS3 不执行 Transition 过渡动画

如果元素设置了transition，那么当 JavaScript 改变相应属性值的时候，就会触发该过渡动画。有时候，我们想直接设置该值，而不触发过渡动画，最直观的想法就是先

蔚落/ 2022年04月16日 02:14/ 0 赞/ 661 阅读

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

css3过渡动画 <style> .box{ width: 225px;

喜欢ヅ旅行/ 2022年01月22日 23:25/ 0 赞/ 598 阅读