CSS實(shí)現(xiàn)懸停過渡動(dòng)畫三部曲

CSS不一定要寫得多么復(fù)雜才能實(shí)現(xiàn)特殊效果。如下就是三個(gè)超級(jí)簡(jiǎn)單的過渡的例子,可能只是幾行代碼,但是添加到Web應(yīng)用程序中,卻會(huì)讓它增色不少。
如下是我們將在本教程中構(gòu)建的代碼項(xiàng)目設(shè)置在這個(gè)項(xiàng)目中,我們將把過渡效果應(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)單。我們想要使用無襯線字體,并確保div中的段落文本是白色的,可以通過如下代碼來實(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 */ }
無論你對(duì)CSS的過渡屬性熟悉與否,我們?cè)谶@里都來簡(jiǎn)要介紹一下,一共分為三步。
.第一步,我們需要將它應(yīng)用到all變化的屬性。接下來,設(shè)置過渡時(shí)長(zhǎng)為0.25秒。最后,將動(dòng)畫函數(shù)選為ease。ease的表現(xiàn)狀態(tài)就是起止過程比較緩慢,中間過渡迅速。holly high! 目前準(zhǔn)備工作都已經(jīng)就緒,接下來就是添加過渡效果了。到目前為止,div看起來應(yīng)該像下面這樣。
褪色效果首先,添加一個(gè)褪色的過渡。新建一個(gè)div元素,并為它添加一個(gè)名為fade的類:
<div class='box fade'> <p>FADE HERE</p> </div>
接下來我們所需要做的就是為這個(gè)fade類指定懸停規(guī)則。我們需要借助CSS偽類選擇器:hover來完成這件事情。這個(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)的樣子。而你之所以能夠看到過渡樣式,是因?yàn)槲覀円婚_始在名為box的類中使用了transition:all 0.25s ease;的聲明??聪旅?,是不是一個(gè)還不錯(cuò)的褪色效果:
2.來點(diǎn)顏色看看指定一個(gè)變色過渡其實(shí)和褪色過渡的過程異曲同工。
首先,創(chuàng)建一個(gè)div元素,并為它添加一個(gè)名為color的類。
<div class='box color'> <p>COLOR HERE</p> </div>
同樣地,我們也要借助:hover選擇器來幫我們完成這件事,但是這一次我們不是改變透明度而是背景色:
.color:hover { background: #FF5722; }
如下就是實(shí)際效果了:
3.一起搖擺接下來,來實(shí)現(xiàn)一個(gè)擺動(dòng)的效果。
這個(gè)效果實(shí)現(xiàn)起來比前面的兩個(gè)例子稍顯復(fù)雜。在這個(gè)例子中,我會(huì)采用@keyframes來完成。@keyframes——賦予你在一個(gè)CSS動(dòng)畫序列中控制中間步驟的魔力。首先還是一樣,你肯定已經(jīng)聽煩了,創(chuàng)建一個(gè)div元素,并未它添加一個(gè)名為wiggle的類:
<div class='box wiggle'> <p>WIGGLE WIGGLE</p> </div>
接下來,我們要做的就是借助@keyframes來創(chuàng)建動(dòng)畫。我們先給動(dòng)畫起個(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)畫分解成單步,并且精確定義每一步發(fā)生了什么的能力。通過百分比的方式指定動(dòng)畫的進(jìn)度:20%——div相對(duì)于初始位置右移4px。40%——div相對(duì)于初始位置左移4px。60%——div相對(duì)于初始位置右移2px。80%——div相對(duì)于初始位置左移1px。100%——div恢復(fù)到初始位置?,F(xiàn)在我們就能借助:hover選擇器來展示wiggle的動(dòng)畫了:
.wiggle:hover { animation: wiggle 1s ease; animation-iteration-count: 1; }
我們將animation設(shè)置成wiggle。同時(shí)希望動(dòng)畫持續(xù)1秒的時(shí)長(zhǎng),采用ease的動(dòng)畫效果。最后,就是指定動(dòng)畫在每次鼠標(biāo)指針懸停的時(shí)候觸發(fā)一次。下圖就是最終的動(dòng)畫效果:
總結(jié)
以上所述是小編給大家介紹的CSS實(shí)現(xiàn)懸停過渡動(dòng)畫三部曲,希望對(duì)大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會(huì)及時(shí)回復(fù)大家的!
相關(guān)文章
css3實(shí)現(xiàn)帶動(dòng)畫過度效果的社會(huì)化圖標(biāo)代碼
這是一款帶動(dòng)畫過度效果的社會(huì)化圖標(biāo),默認(rèn)的情況下,圖標(biāo)會(huì)有一個(gè)水波蕩漾開的效果,鼠標(biāo)移上去會(huì)有一個(gè)膠囊閃動(dòng)的效果,喜歡的朋友快來下載源碼吧2020-11-09css實(shí)現(xiàn)鼠標(biāo)放上去時(shí)圖片過渡轉(zhuǎn)換動(dòng)畫效果
這篇文章主要介紹了css實(shí)現(xiàn)鼠標(biāo)放上去時(shí)圖片過渡轉(zhuǎn)換動(dòng)畫,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-10-09css3動(dòng)畫過渡實(shí)現(xiàn)鼠標(biāo)跟隨導(dǎo)航效果
這篇文章主要介紹了css3動(dòng)畫過渡實(shí)現(xiàn)鼠標(biāo)跟隨導(dǎo)航效果的相關(guān)資料,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-02-08CSS 動(dòng)態(tài)高度過渡動(dòng)畫效果的實(shí)現(xiàn)
這篇文章主要介紹了CSS 動(dòng)態(tài)高度過渡動(dòng)畫效果的實(shí)現(xiàn),本文通過實(shí)例代碼給大家介紹的非常想詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-01-15