欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS實現(xiàn)懸停過渡動畫三部曲

  發(fā)布時間:2019-04-28 14:46:43   作者:佚名   我要評論
CSS不一定要寫得多么復雜才能實現(xiàn)特殊效果。下面通過實例代碼給大家分享CSS實現(xiàn)懸停過渡動畫三部曲,感興趣的朋友跟隨小編一起看看吧

CSS不一定要寫得多么復雜才能實現(xiàn)特殊效果。如下就是三個超級簡單的過渡的例子,可能只是幾行代碼,但是添加到Web應用程序中,卻會讓它增色不少。

如下是我們將在本教程中構建的代碼項目設置在這個項目中,我們將把過渡效果應用到一個class為box的元素上面。這個box元素內部是垂直和水平居中的文字內容。

HTML結構相當簡單:

<div class='box'>
  <p>TEXT</p>
</div>

CSS代碼也一樣簡單。我們想要使用無襯線字體,并確保div中的段落文本是白色的,可以通過如下代碼來實現(xiàn):
 

 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秒。最后,將動畫函數(shù)選為ease。ease的表現(xiàn)狀態(tài)就是起止過程比較緩慢,中間過渡迅速。holly high! 目前準備工作都已經就緒,接下來就是添加過渡效果了。到目前為止,div看起來應該像下面這樣。

褪色效果首先,添加一個褪色的過渡。新建一個div元素,并為它添加一個名為fade的類:

<div class='box fade'>
  <p>FADE HERE</p>
</div>

接下來我們所需要做的就是為這個fade類指定懸停規(guī)則。我們需要借助CSS偽類選擇器:hover來完成這件事情。這個偽類選擇器對所有的元素都有效,并且會在元素處于鼠標指針懸停狀態(tài)下的時候激活CSS聲明?;诖?,我們借助:hover選擇器將div的透明度改為0.5:

.fade:hover {
  opacity: 0.5;
}

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

 2.來點顏色看看指定一個變色過渡其實和褪色過渡的過程異曲同工。

首先,創(chuàng)建一個div元素,并為它添加一個名為color的類。

 

<div class='box color'>
  <p>COLOR HERE</p>
</div>

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

 

.color:hover {
  background: #FF5722;
}

如下就是實際效果了:

  3.一起搖擺接下來,來實現(xiàn)一個擺動的效果。

這個效果實現(xiàn)起來比前面的兩個例子稍顯復雜。在這個例子中,我會采用@keyframes來完成。@keyframes——賦予你在一個CSS動畫序列中控制中間步驟的魔力。首先還是一樣,你肯定已經聽煩了,創(chuàng)建一個div元素,并未它添加一個名為wiggle的類:

 

<div class='box wiggle'>
  <p>WIGGLE WIGGLE</p>
</div>

接下來,我們要做的就是借助@keyframes來創(chuàng)建動畫。我們先給動畫起個名字,就叫wiggle吧。并在如下的代碼中添加抖動效果的實現(xiàn):

 

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

從上面的代碼已經可以看出,@keyframes賦予我們將動畫分解成單步,并且精確定義每一步發(fā)生了什么的能力。通過百分比的方式指定動畫的進度:20%——div相對于初始位置右移4px。40%——div相對于初始位置左移4px。60%——div相對于初始位置右移2px。80%——div相對于初始位置左移1px。100%——div恢復到初始位置?,F(xiàn)在我們就能借助:hover選擇器來展示wiggle的動畫了:

 

.wiggle:hover {
  animation: wiggle 1s ease;
  animation-iteration-count: 1;
}

我們將animation設置成wiggle。同時希望動畫持續(xù)1秒的時長,采用ease的動畫效果。最后,就是指定動畫在每次鼠標指針懸停的時候觸發(fā)一次。下圖就是最終的動畫效果:

總結

以上所述是小編給大家介紹的CSS實現(xiàn)懸停過渡動畫三部曲,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時回復大家的!

相關文章

  • css3實現(xiàn)帶動畫過度效果的社會化圖標代碼

    這是一款帶動畫過度效果的社會化圖標,默認的情況下,圖標會有一個水波蕩漾開的效果,鼠標移上去會有一個膠囊閃動的效果,喜歡的朋友快來下載源碼吧
    2020-11-09
  • css實現(xiàn)鼠標放上去時圖片過渡轉換動畫效果

    這篇文章主要介紹了css實現(xiàn)鼠標放上去時圖片過渡轉換動畫,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-10-09
  • css3動畫過渡實現(xiàn)鼠標跟隨導航效果

    這篇文章主要介紹了css3動畫過渡實現(xiàn)鼠標跟隨導航效果的相關資料,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-02-08
  • CSS 動態(tài)高度過渡動畫效果的實現(xiàn)

    這篇文章主要介紹了CSS 動態(tài)高度過渡動畫效果的實現(xiàn),本文通過實例代碼給大家介紹的非常想詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2021-01-15

最新評論