fab41d5c7ccf17ed1d2f0014274e0280.gif
利用CSS3中的animation，可以實(shí)現(xiàn)很多很炫的效果。今天就來利用animation屬性完成如上圖所示的加載效果。
1 基本構(gòu)圖
首先來完成基本的構(gòu)圖：
2bee0c74efd3ce5a43977b569a7fac77.png
可以將上述圖形解析為四部分：
- 外部矩形
- 左側(cè)紅色矩形
- 右下部黃色矩形
- 右上角白色矩形
劃清圖形結(jié)構(gòu)后，可以完成基本頁面繪制：
<style>
div {
box-sizing: border-box;
}
.logo {
width: 250px;
height: 250px;
margin: 10px auto;
position: relative;
padding: 4px;
}
.red {
position: absolute;
left: 0;
top: 0;
width: 25%;
height: 100%;
background: red;
border-right: 4px solid black;
}
.yellow {
position: absolute;
left: 25%;
right:0;
bottom: 0;
height: 50%;
background: yellow;
border-top: 4px solid black;
}
.white {
position: absolute;
right:0;
top: 0;
height: 50%;
width: 25%;
background: white;
border-left: 4px solid black;
}
</style>
<body>
<div class="logo">
<div class="red"></div>
<div class="yellow"></div>
<div class="white"></div>
</div>
</body>
loading1.png
可以看出，外部矩形的邊框并沒有繪制。具體原因暫且按下不表，后面會(huì)詳細(xì)介紹。
2 動(dòng)畫分析
首先來看下，這里的動(dòng)畫總共分為7部分：
- 四邊邊框出現(xiàn)
- 紅色矩形出現(xiàn)
- 黃色矩形出現(xiàn)
- 白色矩形出現(xiàn)
后面三個(gè)矩形出現(xiàn)相對比較容易，難的是四個(gè)四邊邊框的動(dòng)畫效果。由于同側(cè)邊框(左右邊框/上線邊框)并不是同步出現(xiàn)，單純靠一個(gè)矩形的伸縮無法實(shí)現(xiàn)，所以至少要依賴兩個(gè)矩形，這時(shí)::after ::before兩個(gè)元素正好可以派上用場：
.logo::before, .logo::after {
position: absolute;
width: 100%;
height: 100%;
content: '';
border: 4px solid transparent;
box-sizing: border-box;
}
.logo::before {
z-index: 1; /*before在所有元素最前面，所以會(huì)被覆蓋，加上z-index*/
top: 0px;
left: 0px;
animation: border-before 9s infinite;
animation-direction: alternate;
animation-timing-function: linear;
}
.logo::after {
right: 0px;
bottom: 0px;
animation: border-after 9s infinite;
animation-direction: alternate;
animation-timing-function: linear;
}
3 邊框動(dòng)畫
接下來就可以利用關(guān)鍵幀來實(shí)現(xiàn)邊框動(dòng)畫了：
@keyframes border-before {
0% {
width: 0;
height: 0;
border-left-color: black;
}
11% {
height: 100%;
width: 0;
border-bottom-color: transparent; /*在25% - 50% 的過程中，boder-bottom-color變成黑色，默認(rèn)是在25%-50%過程開始是執(zhí)行，可以通過step設(shè)置*/
}
22%, 100% {
height: 100%;
width: 100%;
border-left-color: black;
border-bottom-color: black;
}
}
@keyframes border-after {
0%, 22% {
width: 0;
height: 0;
border-top-color: transparent;
border-right-color: transparent;
}
33% {
width: 0;
height: 100%;
border-right-color: black;
border-top-color: transparent;
}
44%, 100% {
height: 100%;
width: 100%;
border-top-color: black;
border-right-color: black;
}
}
4 內(nèi)部矩形動(dòng)畫
接下來內(nèi)部矩形的動(dòng)畫，相對就更簡單了：
.red {
position: absolute;
left: 0;
top: 0;
width: 25%;
height: 100%;
background: red;
border-right: 4px solid black;
animation: redmove 9s infinite;
animation-timing-function: linear;
animation-direction: alternate;
}
@keyframes redmove {
0%,
44% {
width: 0;
opacity: 0;
}
44.01% {
opacity: 1;
}
55%,
100% {
width: 25%;
opacity: 1;
}
}
.yellow {
position: absolute;
left: 25%;
right:0;
bottom: 0;
height: 50%;
background: yellow;
border-top: 4px solid black;
animation: moveyellow 9s infinite;
animation-timing-function: linear;
animation-direction: alternate;
}
@keyframes moveyellow {
0%, 55% {
height: 0;
opacity: 0;
}
55.01% {
opacity: 1;
}
66%, 100% {
height: 50%;
}
}
.white {
position: absolute;
right:0;
top: 0;
height: 50%;
width: 25%;
background: white;
border-left: 4px solid black;
animation: movewhite 9s infinite;
animation-direction: alternate;
animation-timing-function: linear;
}
@keyframes movewhite {
0%, 66% {
width: 0%;
opacity: 0;
}
66.01% {
opacity: 1;
}
77%, 100% {
width: 25%;
}
}
