小編給大家分享一下怎么用CSS完成一個(gè)懸停過渡動畫的項(xiàng)目，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比天壇街道網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式天壇街道網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋天壇街道地區(qū)。費(fèi)用合理售后完善，10多年實(shí)體公司更值得信賴。
項(xiàng)目設(shè)置
在這個(gè)項(xiàng)目中，我們將把過渡效果應(yīng)用到一個(gè)class為box的元素上面。這個(gè)box元素內(nèi)部是垂直和水平居中的文字內(nèi)容。HTML結(jié)構(gòu)相當(dāng)簡單：
TEXT
CSS代碼也一樣簡單。我們想要使用無襯線字體，并確保div中的段落文本是白色的，可以通過如下代碼來實(shí)現(xiàn)：
body{
color:white;
font-family:Helvetica,Sans-Serif;
}
另外，給box元素添加如下CSS屬性：
.box{
width:200px;/*SettheWidthofbox*/
height:50px;/*SettheHeightofbox*/
background:#424242;/*DarkGreyBackgroundcolor*/
transition:all0.25sease;/*Transitionsettings*/
display:flex;/*UseFlexboxonP*/
align-items:center;/*CenterP*/
justify-content:center;/*CenterP*/
margin:10px;/*ApplyamarginaroundourBox*/
}
無論你對CSS的過渡屬性熟悉與否，我們在這里都來簡要介紹一下，一共分為三步。.第一步，我們需要將它應(yīng)用到all變化的屬性。接下來，設(shè)置過渡時(shí)長為0.25秒。最后，將動畫函數(shù)選為ease。ease的表現(xiàn)狀態(tài)就是起止過程比較緩慢，中間過渡迅速。
hollyhigh!目前準(zhǔn)備工作都已經(jīng)就緒，接下來就是添加過渡效果了。
1.褪色效果
首先，添加一個(gè)褪色的過渡。新建一個(gè)div元素，并為它添加一個(gè)名為fade的類：
FADEHERE
接下來我們所需要做的就是為這個(gè)fade類指定懸停規(guī)則。我們需要借助CSS偽類選擇器:hover來完成這件事情。這個(gè)偽類選擇器對所有的元素都有效，并且會在元素處于鼠標(biāo)指針懸停狀態(tài)下的時(shí)候激活CSS聲明。基于此，我們借助:hover選擇器將div的透明度改為0.5：
.fade:hover{
opacity:0.5;
}
簡單吧。上面這句CSS聲明就為div指定了一個(gè)懸停效果。如下就是目前它展現(xiàn)的樣子。而你之所以能夠看到過渡樣式，是因?yàn)槲覀円婚_始在名為box的類中使用了transition:all0.25sease;的聲明。
2.來點(diǎn)顏色看看
指定一個(gè)變色過渡其實(shí)和褪色過渡的過程異曲同工。首先，創(chuàng)建一個(gè)div元素，并為它添加一個(gè)名為color的類。
COLORHERE
同樣地，我們也要借助:hover選擇器來幫我們完成這件事，但是這一次我們不是改變透明度而是背景色：
.color:hover{
background:#FF5722;
}
以上是“怎么用CSS完成一個(gè)懸停過渡動畫的項(xiàng)目”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
重慶分公司
重慶分公司
