<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;
/*width: 66px;*/
height: 22px;
/*margin: 26px auto auto auto;*/
li {
width: 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>