[分享]css3按钮光影流动

CSS3的深度应用让网页设计有了更加丰富的样式和效果。光影流动是CSS3中非常常用的一种效果，非常适用于按钮设计。使用CSS3的boxshadow属性和transition属性可以实现光影流动的效果。...

CSS3的深度应用让网页设计有了更加丰富的样式和效果。光影流动是CSS3中非常常用的一种效果，非常适用于按钮设计。

使用CSS3的box-shadow属性和transition属性可以实现光影流动的效果。

.button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 30px;
    box-shadow: 0px 5px 15px rgba(0, 123, 255, 0.5);
    transition: box-shadow 0.3s ease-in-out;
}
.button:hover {
    box-shadow: 0px 10px 20px rgba(0, 123, 255, 0.7);
} 

在上述代码中，我们首先定义了一个.button类，设置了按钮的各种样式。其中，box-shadow属性用来添加按钮的投影效果，这里我们加入了x轴偏移0px、y轴偏移5px、模糊半径15px和透明度0.5的投影效果。transition属性用来指定光影流动的时长和行为类型。

在鼠标悬停于按钮上时，我们通过:hover伪类改变了box-shadow属性的值，让投影效果更加强烈，实现了光影流动的效果。

这种效果非常适用于网站中的按钮设计，增加用户的点击体验，使得网站看起来更加现代和时尚。