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

2022-10-11 11:43:34

在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）。如果应用由于浏览器要重新计算布局大小或文本提示，这样过渡会消耗更多电量，同时可能导致响应迟钝和卡壳。

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