偶然看到一個(gè)CSS載入動(dòng)畫阁最，看到挺不錯(cuò)的拱层，于是肥荔。绿渣。。
下面是靜圖：
![]()
不是動(dòng)圖.png
不是動(dòng)圖.png
整個(gè)頁面代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" bigboxtent="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" bigboxtent="ie=edge">
<title>Document</title>
<style>
body {
background-color: #333;
}
.bigbox {
width: 380px;
height: 270px;
margin: 150px auto 0;
}
.bigbox div {
height: 200px;
width: 24px;
margin: 15px;
float: left;
background: #ddd;
border-radius: 12px;
}
.bigbox p {
text-align: center;
font-size: 18px;
color: #fff;
}
.bigbox .box:nth-child(1) {
background-color: #20c070;
animation: mymove 500ms ease 0ms infinite alternate;
}
.bigbox .box:nth-child(2) {
background-color: #3090d0;
animation: mymove 500ms ease 100ms infinite alternate;
}
.bigbox .box:nth-child(3) {
background-color: #9050b0;
animation: mymove 500ms ease 200ms infinite alternate;
}
.bigbox .box:nth-child(4) {
background-color: #e07020;
animation: mymove 500ms ease 300ms infinite alternate;
}
.bigbox .box:nth-child(5) {
background-color: #c03020;
animation: mymove 500ms ease 400ms infinite alternate;
}
.bigbox .box:nth-child(6) {
background-color: #e04030;
animation: mymove 500ms ease 500ms infinite alternate;
}
.bigbox .box:nth-child(7) {
background-color: #e04080;
animation: mymove 500ms ease 600ms infinite alternate;
}
@keyframes mymove {
/* 2d縮放 */
from {
transform: scale(1, 0.3);
}
to {
transform: scale(1, 1);
}
}
</style>
</head>
</style>
<body>
<div class="bigbox">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<p>LOADING...</p>
</div>
</body>
</html>
使用@keyframes可以創(chuàng)建動(dòng)畫燕耿。創(chuàng)建動(dòng)畫是通過逐步改變從一個(gè)CSS樣式設(shè)定到另一個(gè)中符。在動(dòng)畫過程中可以更改CSS樣式的設(shè)定多次。
指定的變化時(shí)發(fā)生時(shí)使用％誉帅，或關(guān)鍵字from和to淀散，這是和0％到100％相同。0％是開頭蚜锨，100％是完成档插，并且始終定義為0％和100％的選擇器。
這里要注意的是: 使用animation屬性來控制動(dòng)畫的外觀亚再，還是使用選擇器綁定動(dòng)畫郭膛。
干一行，愛一行氛悬，學(xué)到老则剃，活到老~
