• vue css3音乐跳动


     
    <template>
    <ul class="miusicFa">
    <li class="m1"></li>
    <li class="m2"></li>
    <li class="m3"></li>
    <li class="m4"></li>
    <li class="m5"></li>
    <li class="m6"></li>
    <li class="m7"></li>
    <li class="m8"></li>
    <li class="m1"></li>
    <li class="m2"></li>
    <li class="m3"></li>
    <li class="m4"></li>
    <li class="m5"></li>
    <li class="m6"></li>
    <li class="m7"></li>
    <li class="m8"></li>
    </ul>
    </template>
    <script>
    export default {
    name:"music_comp",
    data(){
    return{
    }
    }
    }
    </script>
    <style lang="scss" scoped>
    .miusicFa {
    padding: 0;
    list-style: none;
    /* 66px;*/
    height: 22px;
    /*margin: 26px auto auto auto;*/
    li {
    20px;
    height: 22px;
    float: left;
    margin-left: 3px;
    background:#11feff
    /* 标准的语法 *
    }
    }
    .m1{
    -webkit-animation: .8s .1s living linear infinite backwards normal;
    animation: .8s .1s living linear infinite backwards normal;
    -webkit-animation-delay: -1.1s;
    /*规定动画开始时间*/
    }
    .m1 {
    -webkit-animation: .8s .1s living linear infinite backwards normal;
    animation: .8s .1s living linear infinite backwards normal;
    -webkit-animation-delay: -1.1s;
    }
    .m2 {
    -webkit-animation: .8s .3s living linear infinite backwards normal;
    animation: .8s .3s living linear infinite backwards normal;
    -webkit-animation-delay: -1.3s;
    }

    .m3 {
    -webkit-animation: .8s .6s living linear infinite backwards normal;
    animation: .8s .6s living linear infinite backwards normal;
    -webkit-animation-delay: -1.6s;
    }

    .m4 {
    -webkit-animation: .8s 1s living linear infinite backwards normal;
    animation: .8s 1s living linear infinite backwards normal;
    -webkit-animation-delay: -2s;
    }

    .m5 {
    -webkit-animation: .8s 1.5s living linear infinite backwards normal;
    animation: .8s 1.5s living linear infinite backwards normal;
    -webkit-animation-delay: -2.5s;
    }
    .m6 {
    -webkit-animation: .8s 2.1s living linear infinite backwards normal;
    animation: .8s 2.1s living linear infinite backwards normal;
    -webkit-animation-delay: -3.1s;
    }
    .m7 {
    -webkit-animation: .8s 2.8s living linear infinite backwards normal;
    animation: .8s 2.8s living linear infinite backwards normal;
    -webkit-animation-delay: -3.8s;
    }
    .m8 {
    -webkit-animation: .8s 3.7s living linear infinite backwards normal;
    animation: .8s 3.7s living linear infinite backwards normal;
    -webkit-animation-delay: -4.5s;
    }
    @-webkit-keyframes living {
    0% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    -webkit-transform-origin: 0 21px;
    transform-origin: 0 21px
    }
    50% {
    -webkit-transform: scaleY(.3);
    transform: scaleY(.3);
    -webkit-transform-origin: 0 21px;
    transform-origin: 0 21px
    }
    100% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    -webkit-transform-origin: 0 21px;
    transform-origin: 0 21px
    }
    }
    @keyframes living {
    0% {
    -webkit-transform: scaleY(1);
    -ms-transform: scaleY(1);
    transform: scaleY(1);
    -webkit-transform-origin: 0 21px;
    -ms-transform-origin: 0 21px;
    transform-origin: 0 21px
    }

    50% {
    -webkit-transform: scaleY(.3);
    -ms-transform: scaleY(.3);
    transform: scaleY(.3);
    -webkit-transform-origin: 0 21px;
    -ms-transform-origin: 0 21px;
    transform-origin: 0 21px
    }
    100% {
    -webkit-transform: scaleY(1);
    -ms-transform: scaleY(1);
    transform: scaleY(1);
    -webkit-transform-origin: 0 21px;
    -ms-transform-origin: 0 21px;
    transform-origin: 0 21px
    }
    }
    }
    </style>



  • 相关阅读:
    2js中的变量的数据类型
    hdu 1022火车进出站问题
    hdu 2412树形dp
    hdu2955 Robberies(java)
    IDEA导入HttpServlet包
    IDEA导入jar包
    Java工程打包成jar可执行文件
    Java基础笔记(一)——JDK、JRE、JVM
    正整数构成的线性表存放在单链表中,编写算法将表中的所有的奇数删除。(C语言)
    已知单链表的数据元素为整型数且递增有序,L为单链表的哨兵指针。编写算法将表中值大于X小于Y的所有结点的顺序逆置。(C语言)
  • 原文地址:https://www.cnblogs.com/lihong-123/p/11103890.html
Copyright © 2020-2023  润新知