CSS3的过渡效果，使用transition实现鼠标移入/移出效果

在css中使用伪类虽然实现了样式的改变，但由于没有过渡效果会显得很生硬。以前如果要实现过渡，就需要借助第三方的js框架来实现。现在只需要使用CSS3的过渡（transition）功能，就可以从一组样式平滑的切换到另一组样式。

（1）背景色过渡变化

下面鼠标移入后，按钮背景色会慢慢地变成黄色。鼠标离开，过渡效果又会发生，颜色恢复到初始状态。

hangge.com

 <style>
 .slickButton {
     color: white;
     font-weight: bold;
     padding: 10px;
     border: solid 1px black;
     background: lightgreen;
     cursor: pointer;
     transition: background .5s;
     -webkit-transition: background .5s;
 }

 .slickButton:hover {
     color: black;
     background: yellow;
 }
 </style>

51220网站目录 https://www.51220.cn

<button class="slickButton">hangge.com</button>

（2）背景色，文字都需要过渡效果

上面样例看到虽然背景色实现了过渡，文字颜色还是直接改变的。要实现多个样式的过渡，只需使用逗号作为分隔符，同时制定多个样式属性即可。

hangge.com

 <style>
 .slickButton {
     color: white;
     font-weight: bold;
     padding: 10px;
     border: solid 1px black;
     background: lightgreen;
     cursor: pointer;
     transition: background .5s, color .5s;
     -webkit-transition: background .5s, color .5s;
 }

 .slickButton:hover {
     color: black;
     background: yellow;
 }
 </style>

 <button class="slickButton">hangge.com</button>

（3）过渡所有样式

如果想要过渡所有的样式，并且希望所有过渡都同步完成，可以在指定属性名的地方填 all。

 transition: all .5s;
 -webkit-transition: all .5s;

（4）淡入淡出

通过修改 opacity 属性改变透明度，从而实现图像的淡入淡出。

hangge.com

 <style>
 .slickButton2 {
     color: white;
     font-weight: bold;
     padding: 10px;
     border: solid 1px black;
     background: lightgreen;
     cursor: pointer;
     opacity: 0.5;
     transition: opacity .5s;
     -webkit-transition: opacity .5s;
 }
 .slickButton2:hover {
     opacity: ;
 }
 </style>
 <button class="slickButton2">hangge.com</button>

（5）阴影（投影）效果

使用 box-shadow 属性可以为任何盒子元素添加阴影，从而制作出漂亮的悬停效果。

hangge.com

 <style>
 .slickButton3 {
     color: white;
     font-weight: bold;
     padding: 10px;
     border: solid 1px black;
     background: lightgreen;
     cursor: pointer;
     transition: box-shadow .5s;
     -webkit-transition: box-shadow .5s;
 }
 .slickButton3:hover {
     box-shadow:5px 5px 10px gray;
 }
 </style>
 <button class="slickButton3">hangge.com</button>

（6）发光效果

同样利用 box-shadow 属性可以实现发光效果，只不过把阴影偏移量设为0。

hangge.com

 <style>
 .slickButton4 {
     color: white;
     font-weight: bold;
     padding: 10px;
     border: solid 1px black;
     background: lightgreen;
     cursor: pointer;
     transition: box-shadow .5s;
     -webkit-transition: box-shadow .5s;
 }

 .slickButton4:hover {
     box-shadow:0px 0px 20px orange;
 }
 </style>
 <button class="slickButton4">hangge.com</button>

下面样式不值得使用过渡效果

对于内边距（padding）、外边距（margin）和字体大小（font-size）。如果应用由于浏览器要重新计算布局大小或文本提示，这样过渡会消耗更多电量，同时可能导致响应迟钝和卡壳。

如果想要移动、放大、缩小元素，那么最好使用变形技术。