小編給大家分享一下如何利用CSS完成一個(gè)懸停過(guò)渡動(dòng)畫(huà)的項(xiàng)目，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)公司專注于企業(yè)成都全網(wǎng)營(yíng)銷推廣、網(wǎng)站重做改版、安龍網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、成都h5網(wǎng)站建設(shè)、商城網(wǎng)站開(kāi)發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為安龍等各大城市提供網(wǎng)站開(kāi)發(fā)制作服務(wù)。

                                                           CSS不一定要寫(xiě)得多么復(fù)雜才能實(shí)現(xiàn)特殊效果。如下就是三個(gè)超級(jí)簡(jiǎn)單的過(guò)渡的例子，可能只是幾行代碼，但是添加到Web應(yīng)用程序中，卻會(huì)讓它增色不少。

如下是我們將在本教程中構(gòu)建的代碼

項(xiàng)目設(shè)置

在這個(gè)項(xiàng)目中，我們將把過(guò)渡效果應(yīng)用到一個(gè)class為box的元素上面。這個(gè)box元素內(nèi)部是垂直和水平居中的文字內(nèi)容。HTML結(jié)構(gòu)相當(dāng)簡(jiǎn)單：

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

CSS代碼也一樣簡(jiǎn)單。我們想要使用無(wú)襯線字體，并確保div中的段落文本是白色的，可以通過(guò)如下代碼來(lái)實(shí)現(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 */
}

無(wú)論你對(duì)CSS的過(guò)渡屬性熟悉與否，我們?cè)谶@里都來(lái)簡(jiǎn)要介紹一下，一共分為三步。.第一步，我們需要將它應(yīng)用到all變化的屬性。接下來(lái)，設(shè)置過(guò)渡時(shí)長(zhǎng)為0.25秒。最后，將動(dòng)畫(huà)函數(shù)選為ease。ease的表現(xiàn)狀態(tài)就是起止過(guò)程比較緩慢，中間過(guò)渡迅速。

holly high! 目前準(zhǔn)備工作都已經(jīng)就緒，接下來(lái)就是添加過(guò)渡效果了。到目前為止，div看起來(lái)應(yīng)該像下面這樣。

1.褪色效果

首先，添加一個(gè)褪色的過(guò)渡。新建一個(gè)div元素，并為它添加一個(gè)名為fade的類：

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

接下來(lái)我們所需要做的就是為這個(gè)fade類指定懸停規(guī)則。我們需要借助CSS偽類選擇器:hover來(lái)完成這件事情。這個(gè)偽類選擇器對(duì)所有的元素都有效，并且會(huì)在元素處于鼠標(biāo)指針懸停狀態(tài)下的時(shí)候激活CSS聲明。基于此，我們借助:hover選擇器將div的透明度改為0.5：

.fade:hover {
  opacity: 0.5;
}

簡(jiǎn)單吧。上面這句CSS聲明就為div指定了一個(gè)懸停效果。如下就是目前它展現(xiàn)的樣子。而你之所以能夠看到過(guò)渡樣式，是因?yàn)槲覀円婚_(kāi)始在名為box的類中使用了transition:all 0.25s ease;的聲明?？聪旅?，是不是一個(gè)還不錯(cuò)的褪色效果：

2.來(lái)點(diǎn)顏色看看

指定一個(gè)變色過(guò)渡其實(shí)和褪色過(guò)渡的過(guò)程異曲同工。首先，創(chuàng)建一個(gè)div元素，并為它添加一個(gè)名為color的類。

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

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

.color:hover {
  background: #FF5722;
}

如下就是實(shí)際效果了：

3.一起搖擺

接下來(lái)，來(lái)實(shí)現(xiàn)一個(gè)擺動(dòng)的效果。這個(gè)效果實(shí)現(xiàn)起來(lái)比前面的兩個(gè)例子稍顯復(fù)雜。在這個(gè)例子中，我會(huì)采用@keyframes來(lái)完成。

@keyframes——賦予你在一個(gè)CSS動(dòng)畫(huà)序列中控制中間步驟的魔力。

首先還是一樣，你肯定已經(jīng)聽(tīng)煩了，創(chuàng)建一個(gè)div元素，并未它添加一個(gè)名為wiggle的類：

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

接下來(lái)，我們要做的就是借助@keyframes來(lái)創(chuàng)建動(dòng)畫(huà)。我們先給動(dòng)畫(huà)起個(gè)名字，就叫wiggle吧。并在如下的代碼中添加抖動(dòng)效果的實(shí)現(xiàn)：

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

從上面的代碼已經(jīng)可以看出，@keyframes賦予我們將動(dòng)畫(huà)分解成單步，并且精確定義每一步發(fā)生了什么的能力。通過(guò)百分比的方式指定動(dòng)畫(huà)的進(jìn)度：

20%——div相對(duì)于初始位置右移4px。

40%——div相對(duì)于初始位置左移4px。

60%——div相對(duì)于初始位置右移2px。

80%——div相對(duì)于初始位置左移1px。

100%——div恢復(fù)到初始位置。

現(xiàn)在我們就能借助:hover選擇器來(lái)展示wiggle的動(dòng)畫(huà)了：

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

我們將animation設(shè)置成wiggle。同時(shí)希望動(dòng)畫(huà)持續(xù)1秒的時(shí)長(zhǎng)，采用ease的動(dòng)畫(huà)效果。

最后，就是指定動(dòng)畫(huà)在每次鼠標(biāo)指針懸停的時(shí)候觸發(fā)一次。

下圖就是最終的動(dòng)畫(huà)效果：

以上是“如何利用CSS完成一個(gè)懸停過(guò)渡動(dòng)畫(huà)的項(xiàng)目”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享文章：如何利用CSS完成一個(gè)懸停過(guò)渡動(dòng)畫(huà)的項(xiàng)目
文章網(wǎng)址：http://www.rwnh.cn/article42/jdjiec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、自適應(yīng)網(wǎng)站、微信公眾號(hào)、定制網(wǎng)站、網(wǎng)站策劃、App開(kāi)發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)