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

Phoebe的学习天地

2020-06-07

在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 0.5s;
    -webkit-transition: background 0.5s;
}
 
.slickButton:hover {
    color: black;
    background: yellow;
}
</style>
 
<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 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 transition: all 0.5s;
2 -webkit-transition: all 0.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 0.5s;
    -webkit-transition: opacity 0.5s;
}
.slickButton2:hover {
    opacity: 1;
}
</style>
<button class="slickButton2">hangge.com</button>

熊猫办公https://www.wode007.com/sites/73654.html

（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 0.5s;
    -webkit-transition: box-shadow 0.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 0.5s;
    -webkit-transition: box-shadow 0.5s;
}
 
.slickButton4:hover {
    box-shadow:0px 0px 20px orange;
}
</style>
<button class="slickButton4">hangge.com</button>