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



  • 相关阅读:
    【计算机视觉】欧拉角Pitch/Yaw/Roll
    【leetcode】101-Symmetric Tree
    【leetcode】100-Same Tree
    【leetcode】88-Merge Sorted Array
    【leetcode】83-Remove Duplicates from Sorted List
    【leetcode】70-ClimbingStairs
    【计算机视觉】KCF算法
    第1章 Linux系统简介
    第1课 进阶高手的大门
    第3章 在对象之间搬移特性(2):提炼类、类的内联化
  • 原文地址:https://www.cnblogs.com/lihong-123/p/11103890.html
Copyright © 2020-2023  润新知