CSS不一定要寫得多麼複雜才能實現特殊效果。如下就是三個超級簡單的過渡的例子,可能只是幾行代碼,但是添加到Web應用程序中,卻會讓它增色不少。
如下是我們將在本教程中構建的代碼
在這個項目中,我們將把過渡效果應用到一個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 */ }
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;的聲明。看下面,是不是一個還不錯的褪色效果:
指定一個變色過渡其實和褪色過渡的過程異曲同工。首先,創建一個div元素,並為它添加一個名為color的類。
<div class=box color> <p>COLOR HERE</p> </div>
同樣地,我們也要藉助:hover選擇器來幫我們完成這件事,但是這一次我們不是改變透明度而是背景色:
.color:hover { background: #FF5722; }
如下就是實際效果了:
接下來,來實現一個擺動的效果。這個效果實現起來比前面的兩個例子稍顯複雜。在這個例子中,我會採用@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賦予我們將動畫分解成單步,並且精確定義每一步發生了什麼的能力。通過百分比的方式指定動畫的進度:
現在我們就能藉助:hover選擇器來展示wiggle的動畫了:
.wiggle:hover { animation: wiggle 1s ease; animation-iteration-count: 1; }
我們將animation設置成wiggle。同時希望動畫持續1秒的時長,採用ease的動畫效果。
最後,就是指定動畫在每次滑鼠指針懸停的時候觸發一次。
下圖就是最終的動畫效果:
想學習更多的CSS技術可以關注我的博客:CODECOLOR