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