無意中開啟了360首頁，想找找有什麼優秀的網站（比如7k7k、4399小遊戲之類的）。咳咳~~~ 突然看到一個好看的玩意：
從事前端之後會有兩個毛病，一個是編輯完一句話之後習慣ctrl+s 。
-------------------------------------------------------------
emmmmm 又來了。 另一個就是看到瀏覽器上有什麼奇怪的玩意，喜歡 右擊--檢查 ing......
┗|｀O′|┛ 嗷~~，看起來他是用 JS 寫的呀~（誰說的，jq天下第一）。
於是，我這毛病又出來了，這麼簡單的動畫不能用css 寫嘛？
---- 說幹就幹。
大渣好，我係渣渣輝！
<div id="box">
<div class="font">貪</div>
<div class="font">玩</div>
<div class="font">藍</div>
<div class="font">月</div>
</div>
#box {
position: relative;
font-size: 150px;
width: 400px;
height: 400px;
margin: 50px auto;
border: 5px solid #ffb787;
border-radius: 5%;
overflow: hidden;
}
#box .font {
line-height: 200px;
text-align: center;
width: 200px;
height: 200px;
color: red;
float: left;
}複製程式碼
咦~~就是這麼敢單，還沒怎麼寫就“感覺”快完成了！
來吧 背景不就是個紅色方塊嘛。
<div id="box">
<div class="bg"></div>
<!-- 加個紅背景 -->
<div class="font">貪</div>
<div class="font">玩</div>
<div class="font">藍</div>
<div class="font">月</div>
</div>複製程式碼
？？？？？
本來以為就這麼簡單實現了，突然發現和最終效果有偏差啊！
仔細看了一下
在紅色背景和文字的交界處，紅色背景內的文字是白色的！！
頭疼了一段時間想了想，白色背景紅字是一個頁面，而紅色背景白色字型是另一個頁面。
這個紅色背景的壓在白色背景的上面！！！
而動畫的實現，是依靠四個角的盒子的width，height的改變！
好吧是我想的太簡單 (+_+)? 好的 ，不慌、不慌 現在思路明確了，我們們開擼！
<div id="box">
<div class="font">貪</div>
<div class="font">玩</div>
<div class="font">藍</div>
<div class="font">月</div>
<div class="po1">
<div>貪</div>
</div>
<div class="po2">
<div>玩</div>
</div>
<div class="po3">
<div>藍</div>
</div>
<div class="po4">
<div>月</div>
</div>
</div>複製程式碼html部分 ，我加上了四個盒子 po1,po2,po3,po4。分別給這四個盒子設定overflow：hidden通過控制他們的寬高，來實現隱藏顯示內部的字，並且都給他們定位到中間，預設高寬為0。
.po1,
.po2,
.po3,
.po4 {
overflow: hidden;
position: absolute;
background: red;
width: 0;
height: 0;
}
.po1 {
right: 200px;
bottom: 200px;
}
.po2 {
left: 200px;
bottom: 200px;
}
.po3 {
right: 200px;
top: 200px;
}
.po4 {
left: 200px;
top: 200px;
}
.po1 div,
.po2 div,
.po3 div,
.po4 div {
position: absolute;
width: 200px;
text-align: center;
color: #fff;
}
.po1 div {
bottom: 0;
right: 0;
}
.po2 div {
bottom: 0;
left: 0;
}
.po3 div {
right: 0;
top: 0;
}
.po4 div {
top: 0;
left: 0;
}
複製程式碼好的 現在四個盒子都被定位在盒子最中間了。
先加一個動畫試試把！
@keyframes w-h {
0% { height: 0; width: 200px; }
50% { height: 200px; width: 200px; }
100% { height: 200px; width: 0; }
}
.po1 {
animation: w-h 2s infinite linear;
}
.po2 {
animation: w-h 2s infinite linear;
}
.po3 {
animation: w-h 2s infinite linear;
}
.po4 {
animation: w-h 2s infinite linear;
}複製程式碼
看起來有點意思啦~
現在我們們再調整一下動畫的幀 ，和四個盒子的動畫延遲時間和方現：
@keyframes w-h {
0% { height: 0; width: 200px; }
25% { height: 200px; width: 200px; }
50% { height: 200px; width: 0; }
}
.po1 { animation: w-h 2s 0.5s infinite linear;}
.po2 { animation: w-h 2s infinite linear reverse; /* reverse 反向動畫 */}
.po3 { animation: w-h 2s 1s infinite linear reverse;}
.po4 { animation: w-h 2s 1.5s infinite linear;}複製程式碼效果：
哈哈，終於實現了呢，看來有些東西，真的是看起來簡單，寫起來才知道坑點呢。