css動畫之 360首頁四字移動效果

童鞋們可以點這兒看效果哦~

無意中開啟了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;}複製程式碼

效果：

哈哈，終於實現了呢，看來有些東西，真的是看起來簡單，寫起來才知道坑點呢。