1，使用偽類實現樣式切換
偽類是CSS2.1時出現的新特性，讓許多原本需要JavaScript才能做出來的效果使用CSS就能實現。
比如實現下面的鼠標懸停效果，只要為:hover偽類應用一組新樣式即可。當訪客鼠標移動到按鈕上面時，瀏覽器會自動為按鈕應用這新樣式。
1
2
<style>
.slickButton {
color: white;
font-weight: bold;
padding: 10px;
border: solid 1px black;
background: lightgreen;
cursor: pointer;
}
.slickButton:hover {
color: black;
background: yellow;
}
<button class="slickButton">hangge.com</button>
2，使用CSS3的過渡功能實現顏色過渡
直接使用偽類雖然實現了樣式的改變，但由於沒有過渡效果會顯得很生硬。以前如果要實現過渡，就需要借助第三方的js框架來實現。現在只需要使用CSS3的過渡（transition）功能，就可以從一組樣式平滑的切換到另一組樣式。
（1）背景色過渡變化
下面鼠標移入后，按鈕背景色會慢慢地變成黃色。鼠標離開，過渡效果又會發生，顏色恢復到初始狀態。
1
2
<style>
.slickButton {
color: white;
font-weight: bold;
padding: 10px;
border: solid 1px black;
background: lightgreen;
cursor: pointer;
transition: background 0.5s;
-webkit-transition: background 0.5s;
}
.slickButton:hover {
color: black;
background: yellow;
}
</style>
<button class="slickButton">hangge.com</button>
（2）背景色，文字都需要過渡效果
上面樣例看到雖然背景色實現了過渡，文字顏色還是直接改變的。要實現多個樣式的過渡，只需使用逗號作為分隔符，同時制定多個樣式屬性即可。
<style>
.slickButton {
color: white;
font-weight: bold;
padding: 10px;
border: solid 1px black;
background: lightgreen;
cursor: pointer;
transition: background 0.5s, color 0.5s;
-webkit-transition: background 0.5s, color 0.5s;
}
.slickButton:hover {
color: black;
background: yellow;
}
</style>
<button class="slickButton">hangge.com</button>
（3）過渡所有樣式
如果想要過渡所有的樣式，並且希望所有過渡都同步完成，可以在指定屬性名的地方填 all。
1
2
transition: all 0.5s;
-webkit-transition: all 0.5s;
3，更多的過渡效果
（1）淡入淡出
通過修改 opacity 屬性改變透明度，從而實現圖像的淡入淡出。
1
<style>
.slickButton2 {
color: white;
font-weight: bold;
padding: 10px;
border: solid 1px black;
background: lightgreen;
cursor: pointer;
opacity: 0.5;
transition: opacity 0.5s;
-webkit-transition: opacity 0.5s;
}
.slickButton2:hover {
opacity: 1;
}
<button class="slickButton2">hangge.com</button>
（2）陰影（投影）效果
使用 box-shadow 屬性可以為任何盒子元素添加陰影，從而制作出漂亮的懸停效果。
<style>
.slickButton3 {
color: white;
font-weight: bold;
padding: 10px;
border: solid 1px black;
background: lightgreen;
cursor: pointer;
transition: box-shadow 0.5s;
-webkit-transition: box-shadow 0.5s;
}
.slickButton3:hover {
box-shadow:5px 5px 10px gray;
}
</style>
<button class="slickButton3">hangge.com</button>
（3）發光效果
同樣利用 box-shadow 屬性可以實現發光效果，只不過把陰影偏移量設為0。
8
<style>
.slickButton4 {
color: white;
font-weight: bold;
padding: 10px;
border: solid 1px black;
background: lightgreen;
cursor: pointer;
transition: box-shadow 0.5s;
-webkit-transition: box-shadow 0.5s;
}
.slickButton4:hover {
box-shadow:0px 0px 20px orange;
}
</style>
<button class="slickButton4">hangge.com</button>
4，下面樣式不值得使用過渡效果
對於內邊距（padding）、外邊距（margin）和字體大小（font-size）。如果應用由於瀏覽器要重新計算布局大小或文本提示，這樣過渡會消耗更多電量，同時可能導致響應遲鈍和卡殼。
如果想要移動、放大、縮小元素，那么最好使用變形技術。