送給CSS初學者的懸停過渡動畫三部曲

果凍tfzwgd發表於2019-04-28

CSS不一定要寫得多麼複雜才能實現特殊效果。如下就是三個超級簡單的過渡的例子,可能只是幾行程式碼,但是新增到Web應用程式中,卻會讓它增色不少。送給CSS初學者的懸停過渡動畫三部曲

如下是我們將在本教程中構建的程式碼

專案設定

在這個專案中,我們將把過渡效果應用到一個class為box的元素上面。這個box元素內部是垂直和水平居中的文字內容。HTML結構相當簡單:

<div class='box'>
  <p>TEXT</p>
</div>複製程式碼

CSS程式碼也一樣簡單。我們想要使用無襯線字型,並確保div中的段落文字是白色的,可以通過如下程式碼來實現:

body {
  color: white;
  font-family: Helvetica, Sans-Serif;
}複製程式碼

另外,給box元素新增如下CSS屬性:

.box {
  width:200px;                 /* Set the Width of box          */
  height:50px;                 /* Set the Height of box         */
  background:#424242;          /* Dark Grey Background color    */
  transition:all 0.25s ease;   /* Transition settings           */

  display: flex;               /* Use Flexbox on P              */
  align-items: center;         /* Center P                      */
  justify-content: center;     /* Center P                      */
  margin: 10px;                /* Apply a margin around our Box */
}複製程式碼
  • 無論你對CSS的過渡屬性熟悉與否,我們在這裡都來簡要介紹一下,一共分為三步。.第一步,我們需要將它應用到all變化的屬性。接下來,設定過渡時長為0.25秒。最後,將動畫函式選為ease。ease的表現狀態就是起止過程比較緩慢,中間過渡迅速。

holly high! 目前準備工作都已經就緒,接下來就是新增過渡效果了。到目前為止,div看起來應該像下面這樣。

送給CSS初學者的懸停過渡動畫三部曲

  1. 褪色效果

首先,新增一個褪色的過渡。新建一個div元素,併為它新增一個名為fade的類:

<div class='box fade'>
  <p>FADE HERE</p>
</div>複製程式碼

接下來我們所需要做的就是為這個fade類指定懸停規則。我們需要藉助CSS偽類選擇器:hover來完成這件事情。這個偽類選擇器對所有的元素都有效,並且會在元素處於滑鼠指標懸停狀態下的時候啟用CSS宣告。基於此,我們藉助:hover選擇器將div的透明度改為0.5:

.fade:hover {
  opacity: 0.5;
}複製程式碼

簡單吧。上面這句CSS宣告就為div指定了一個懸停效果。如下就是目前它展現的樣子。而你之所以能夠看到過渡樣式,是因為我們一開始在名為box的類中使用了transition:all 0.25s ease;的宣告。看下面,是不是一個還不錯的褪色效果:

送給CSS初學者的懸停過渡動畫三部曲

   2.來點顏色看看

指定一個變色過渡其實和褪色過渡的過程異曲同工。首先,建立一個div元素,併為它新增一個名為color的類。

<div class='box color'>
  <p>COLOR HERE</p>
</div>複製程式碼

同樣地,我們也要藉助:hover選擇器來幫我們完成這件事,但是這一次我們不是改變透明度而是背景色:

.color:hover {
  background: #FF5722;
}複製程式碼

如下就是實際效果了:

送給CSS初學者的懸停過渡動畫三部曲

  3.一起搖擺

接下來,來實現一個擺動的效果。這個效果實現起來比前面的兩個例子稍顯複雜。在這個例子中,我會採用@keyframes來完成。

@keyframes——賦予你在一個CSS動畫序列中控制中間步驟的魔力。

首先還是一樣,你肯定已經聽煩了,建立一個div元素,並未它新增一個名為wiggle的類:

<div class='box wiggle'>
  <p>WIGGLE WIGGLE</p>
</div>複製程式碼

接下來,我們要做的就是藉助@keyframes來建立動畫。我們先給動畫起個名字,就叫wiggle吧。並在如下的程式碼中新增抖動效果的實現:

@keyframes wiggle {
  20%  { transform: translateX(4px);  }
  40%  { transform: translateX(-4px); }
  60%  { transform: translateX(2px);  }
  80%  { transform: translateX(-1px); }
  100% { transform: translateX(0);    }
}複製程式碼

從上面的程式碼已經可以看出,@keyframes賦予我們將動畫分解成單步,並且精確定義每一步發生了什麼的能力。通過百分比的方式指定動畫的進度:

  • 20%——div相對於初始位置右移4px。
  • 40%——div相對於初始位置左移4px。
  • 60%——div相對於初始位置右移2px。
  • 80%——div相對於初始位置左移1px。
  • 100%——div恢復到初始位置。

現在我們就能借助:hover選擇器來展示wiggle的動畫了:

.wiggle:hover {
  animation: wiggle 1s ease;
  animation-iteration-count: 1;
}複製程式碼

我們將animation設定成wiggle。同時希望動畫持續1秒的時長,採用ease的動畫效果。

最後,就是指定動畫在每次滑鼠指標懸停的時候觸發一次。

下圖就是最終的動畫效果:

送給CSS初學者的懸停過渡動畫三部曲

想學習更多的CSS技術可以關注我的部落格:CODECOLOR


送給CSS初學者的懸停過渡動畫三部曲


相關文章