怎么用CSS完成一個懸停過渡動畫的項目

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

　　項目設置

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

　　<divclass='box'>

　　<p>TEXT</p>

　　</div>

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

　　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的過渡屬性熟悉與否，我們在這里都來簡要介紹一下，一共分為三步。.第一步，我們需要將它應用到all變化的屬性。接下來，設置過渡時長為0.25秒。最后，將動畫函數選為ease。ease的表現狀態就是起止過程比較緩慢，中間過渡迅速。

　　hollyhigh!目前準備工作都已經就緒，接下來就是添加過渡效果了。

　　1.褪色效果

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

　　<divclass='boxfade'>

　　<p>FADEHERE</p>

　　</div>

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

　　.fade:hover{

　　opacity:0.5;

　　}

　　簡單吧。上面這句CSS聲明就為div指定了一個懸停效果。如下就是目前它展現的樣子。而你之所以能夠看到過渡樣式，是因為我們一開始在名為box的類中使用了transition:all0.25sease;的聲明。

　　2.來點顏色看看

　　指定一個變色過渡其實和褪色過渡的過程異曲同工。首先，創建一個div元素，并為它添加一個名為color的類。

　　<divclass='boxcolor'>

　　<p>COLORHERE</p>

　　</div>

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

　　.color:hover{

　　background:#FF5722;

　　}

以上是“怎么用CSS完成一個懸停過渡動畫的項目”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！