超級簡單CSS項目，懸停過渡動畫三部曲
如下是我們將在本教程中構建的代碼
這裏推薦一下我的前端學習交流扣qun：731771211 ，裏面都是學習前端的，如果你想制作酷炫的網頁，想學習編程。自己整理了一份2019最全面前端學習資料，從最基礎的HTML+CSS+JS【炫酷特效，遊戲，插件封裝，設計模式】到移動端HTML5的項目實戰的學習資料都有整理，送給每一位前端小夥伴，每天分享技術
點擊：加入
項目設置
在這個項目中，我們將把過渡效果應用到一個class為box的元素上面。這個box元素內部是垂直和水平居中的文字內容。HTML結構相當簡單：
<div class=‘box‘>
<p>TEXT</p>
</div>
CSS代碼也一樣簡單。我們想要使用無襯線字體，並確保div中的段落文本是白色的，可以通過如下代碼來實現：
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秒。最後，將動畫函數選為ease。ease的表現狀態就是起止過程比較緩慢，中間過渡迅速。
holly high! 目前準備工作都已經就緒，接下來就是添加過渡效果了。到目前為止，div看起來應該像下面這樣。
- 褪色效果
首先，添加一個褪色的過渡。新建一個div元素，並為它添加一個名為fade的類：
<div class=‘box fade‘> <p>FADE HERE</p> </div>
接下來我們所需要做的就是為這個fade類指定懸停規則。我們需要借助CSS偽類選擇器:hover來完成這件事情。這個偽類選擇器對所有的元素都有效，並且會在元素處於鼠標指針懸停狀態下的時候激活CSS聲明。基於此，我們借助:hover選擇器將div的透明度改為0.5：
.fade:hover {
opacity: 0.5;
}
簡單吧。上面這句CSS聲明就為div指定了一個懸停效果。如下就是目前它展現的樣子。而你之所以能夠看到過渡樣式，是因為我們一開始在名為box的類中使用了transition:all 0.25s ease;的聲明。看下面，是不是一個還不錯的褪色效果：
2.來點顏色看看
指定一個變色過渡其實和褪色過渡的過程異曲同工。首先，創建一個div元素，並為它添加一個名為color的類。
<div class=‘box color‘>
<p>COLOR HERE</p>
</div>
同樣地，我們也要借助:hover選擇器來幫我們完成這件事，但是這一次我們不是改變透明度而是背景色：
.color:hover {
background: #FF5722;
}
如下就是實際效果了：
? 3.一起搖擺
接下來，來實現一個擺動的效果。這個效果實現起來比前面的兩個例子稍顯復雜。在這個例子中，我會采用@keyframes來完成。
@keyframes——賦予你在一個CSS動畫序列中控制中間步驟的魔力。
首先還是一樣，你肯定已經聽煩了，創建一個div元素，並未它添加一個名為wiggle的類：
<div class=‘box wiggle‘>
<p>WIGGLE WIGGLE</p>
</div>
接下來，我們要做的就是借助@keyframes來創建動畫。我們先給動畫起個名字，就叫wiggle吧。並在如下的代碼中添加抖動效果的實現：
@keyframes wiggle {
20% { transform: translateX(4px); }
40% { transform: translateX(-4px); }
60% { transform: translateX(2px); }
80% { transform: translateX(-1px); }
100% { transform: translateX(0); }
}
從上面的代碼已經可以看出，@keyframes賦予我們將動畫分解成單步，並且精確定義每一步發生了什麽的能力。通過百分比的方式指定動畫的進度：
- 20%——div相對於初始位置右移4px。
- 40%——div相對於初始位置左移4px。
- 60%——div相對於初始位置右移2px。
- 80%——div相對於初始位置左移1px。
- 100%——div恢復到初始位置。
現在我們就能借助:hover選擇器來展示wiggle的動畫了：
.wiggle:hover {
animation: wiggle 1s ease;
animation-iteration-count: 1;
}
我們將animation設置成wiggle。同時希望動畫持續1秒的時長，采用ease的動畫效果。
最後，就是指定動畫在每次鼠標指針懸停的時候觸發一次。
下圖就是最終的動畫效果：
超級簡單CSS項目，懸停過渡動畫三部曲