loading動畫

.box{

width: 300px;

height: 135px;

border: 2px solid #000;

margin: 200px auto 0;

}

.box p{

text-align: center;

width: 100%;

}

.box div{

width: 30px;

height: 70px;

float: left;

background-color: gold;

margin: 15px;

border-radius: 10px;

}

.box div:nth-child(1){

background-color: red;

animation: loading 0.5s ease 0s infinite alternate;

}

.box div:nth-child(2){

background-color: green;

animation: loading 0.5s ease 0.1s infinite alternate;

}

.box div:nth-child(3){

background-color: pink;

animation: loading 0.5s ease 0.2s infinite alternate;

}

.box div:nth-child(4){

background-color: greenyellow;

animation: loading 0.5s ease 0.3s infinite alternate;

}

.box div:nth-child(5){

background-color: cyan;

animation: loading 0.5s ease 0.4s infinite alternate;

}

@keyframes loading{

from{

transform: scaleY(1);

}

to{

transform: scaleY(0.5);

}

}

loading...

總結

以上是生活随笔為你收集整理的css如何插入动态图,css动态图（作业）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。