在css中使用伪类虽然实现了样式的改变，但由于没有过渡效果会显得很生硬。以前如果要实现过渡，就需要借助第三方的js框架来实现。现在只需要使用CSS3的过渡（transition）功能，就可以从一组样式平滑的切换到另一组样式。
（1）背景色过渡变化
下面鼠标移入后，按钮背景色会慢慢地变成黄色。鼠标离开，过渡效果又会发生，颜色恢复到初始状态。
1 <style> 2 .slickButton { 3 color: white; 4 font-weight: bold; 5 padding: 10px; 6 border: solid 1px black; 7 background: lightgreen; 8 cursor: pointer; 9 transition: background 0.5s; 10 -webkit-transition: background 0.5s; 11 } 12 13 .slickButton:hover { 14 color: black; 15 background: yellow; 16 } 17 </style>
51220网站目录 https://www.51220.cn
<button class="slickButton">hangge.com</button>
（2）背景色，文字都需要过渡效果
上面样例看到虽然背景色实现了过渡，文字颜色还是直接改变的。要实现多个样式的过渡，只需使用逗号作为分隔符，同时制定多个样式属性即可。
1 <style> 2 .slickButton { 3 color: white; 4 font-weight: bold; 5 padding: 10px; 6 border: solid 1px black; 7 background: lightgreen; 8 cursor: pointer; 9 transition: background 0.5s, color 0.5s; 10 -webkit-transition: background 0.5s, color 0.5s; 11 } 12 13 .slickButton:hover { 14 color: black; 15 background: yellow; 16 } 17 </style> 18 19 <button class="slickButton">hangge.com</button>
（3）过渡所有样式
如果想要过渡所有的样式，并且希望所有过渡都同步完成，可以在指定属性名的地方填 all。
1 transition: all 0.5s; 2 -webkit-transition: all 0.5s;
（4）淡入淡出
通过修改 opacity 属性改变透明度，从而实现图像的淡入淡出。
1 <style> 2 .slickButton2 { 3 color: white; 4 font-weight: bold; 5 padding: 10px; 6 border: solid 1px black; 7 background: lightgreen; 8 cursor: pointer; 9 opacity: 0.5; 10 transition: opacity 0.5s; 11 -webkit-transition: opacity 0.5s; 12 } 13 .slickButton2:hover { 14 opacity: 1; 15 } 16 </style> 17 <button class="slickButton2">hangge.com</button>
（5）阴影（投影）效果
使用 box-shadow 属性可以为任何盒子元素添加阴影，从而制作出漂亮的悬停效果。
1 <style> 2 .slickButton3 { 3 color: white; 4 font-weight: bold; 5 padding: 10px; 6 border: solid 1px black; 7 background: lightgreen; 8 cursor: pointer; 9 transition: box-shadow 0.5s; 10 -webkit-transition: box-shadow 0.5s; 11 } 12 .slickButton3:hover { 13 box-shadow:5px 5px 10px gray; 14 } 15 </style> 16 <button class="slickButton3">hangge.com</button>
（6）发光效果
同样利用 box-shadow 属性可以实现发光效果，只不过把阴影偏移量设为0。
1 <style> 2 .slickButton4 { 3 color: white; 4 font-weight: bold; 5 padding: 10px; 6 border: solid 1px black; 7 background: lightgreen; 8 cursor: pointer; 9 transition: box-shadow 0.5s; 10 -webkit-transition: box-shadow 0.5s; 11 } 12 13 .slickButton4:hover { 14 box-shadow:0px 0px 20px orange; 15 } 16 </style> 17 <button class="slickButton4">hangge.com</button>
下面样式不值得使用过渡效果
对于内边距（padding）、外边距（margin）和字体大小（font-size）。如果应用由于浏览器要重新计算布局大小或文本提示，这样过渡会消耗更多电量，同时可能导致响应迟钝和卡壳。
如果想要移动、放大、缩小元素，那么最好使用变形技术。