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

喜欢ヅ旅行 2022-01-22 23:25 622阅读 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 条评论，622人围观）

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

相关阅读

相关 CSS_过渡&动画

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

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

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

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

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

相关 vue的过渡css动画

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

妖狐艹你老母/ 2023年07月12日 03:45/ 0 赞/ 27 阅读

相关 CSS3-过渡动画

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

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

相关 CSS3 转换、过渡和动画

一、转换 1、属性：transform 取值：none/transform-function(转换函数) 注意：如果要实现多个转换函数的话，可以用空格分开若干tran

╰+攻爆jí腚メ/ 2023年06月05日 05:45/ 0 赞/ 10 阅读

相关 CSS--过渡与动画

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

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

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

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

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

相关 CSS3过渡和动画

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

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

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

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

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

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

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

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