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>