css3波,CSS3 声波
CSS
語言：
CSSSCSS
確定
#sample {} body {
background: #000;
top: 0;
left: 0;
padding: 0;
margin: 0;
}
.loader-container {
position: relative;
height: 40px;
width: 160px;
margin: 200px auto 0;
}
.loader-container > div {
position: relative;
display: inline-block;
background: #03A9F4;
height: 100%;
width: 10px;
margin: 0;
-webkit-animation: load 3s ease-in-out infinite;
animation: load 3s ease-in-out infinite;
}
.loader-container .rectangle-2 {
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
.loader-container .rectangle-3 {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.loader-container .rectangle-4 {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.loader-container .rectangle-5 {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.loader-container .rectangle-6 {
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
@-moz-keyframes load {
0%, 100% {
-moz-transform: scaleY(1);
background: #03A9F4;
}
16.67% {
-moz-transform: scaleY(3);
background: #FF5722;
}
33.33% {
-moz-transform: scaleY(1);
background: #FF5252;
}
50% {
-moz-transform: scaleY(3);
background: #E91E63;
}
66.67% {
-moz-transform: scaleY(1);
background: #9C27B0;
}
83.34% {
-moz-transform: scaleY(3);
background: #673AB7;
}
}
@-webkit-keyframes load {
0%, 100% {
-webkit-transform: scaleY(1);
background: #03A9F4;
}
16.67% {
-webkit-transform: scaleY(3);
background: #FF5722;
}
33.33% {
-webkit-transform: scaleY(1);
background: #FF5252;
}
50% {
-webkit-transform: scaleY(3);
background: #E91E63;
}
66.67% {
-webkit-transform: scaleY(1);
background: #9C27B0;
}
83.34% {
-webkit-transform: scaleY(3);
background: #673AB7;
}
}
@keyframes load {
0%, 100% {
transform: scaleY(1);
background: #03A9F4;
}
16.67% {
transform: scaleY(3);
background: #FF5722;
}
33.33% {
transform: scaleY(1);
background: #FF5252;
}
50% {
transform: scaleY(3);
background: #E91E63;
}
66.67% {
transform: scaleY(1);
background: #9C27B0;
}
83.34% {
transform: scaleY(3);
background: #673AB7;
}
}
總結
以上是生活随笔為你收集整理的css3波,CSS3 声波的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Vue.js前后端分离2
- 下一篇： CSS中的盒子