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

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

（1）背景色过渡变化

<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）背景色，文字都需要过渡效果

<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）淡入淡出

<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）阴影（投影）效果

<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）发光效果

<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>

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