[分享]css3按钮动画图

CSS3作为前端开发的重要技术之一，不仅能够实现网页的美化，还可以添加各种动态效果来提高用户的体验感。本文将介绍一种利用CSS3实现的按钮动画图。.button{ :relative; backgro...

CSS3作为前端开发的重要技术之一，不仅能够实现网页的美化，还可以添加各种动态效果来提高用户的体验感。本文将介绍一种利用CSS3实现的按钮动画图。

.button{
    position:relative;
    background-color: #4CAF50;
    border: none;
    color: #FFFFFF;
    text-align: center;
    font-size: 14px;
    padding: 10px;
    width: 120px;
    transition: all 0.3s ease;
    overflow: hidden;
}

.button:hover{
    background-color: #fff;
    color: #4CAF50;
    border: 2px solid #4CAF50;
    cursor: pointer;
}

.button::before{
    position:absolute;
    content:';
    left: -100%;
    height: 100%;
    width: 100%;
    background-color:#4CAF50;
    transition: all 0.3s ease;
}

.button:hover::before{
    left: 0;
}

.button::after{
    position:absolute;
    content:';
    right: -100%;
    height: 100%;
    width: 100%;
    background-color:#4CAF50;
    transition: all 0.3s ease;
}

.button:hover::after{
    right: 0;
}

上述代码实现了在鼠标悬浮在按钮上时，按钮的背景颜色、字体颜色以及边框的样式都会改变，而且还会出现一个从左到右、再从右到左的背景色渐变效果，这就是按钮的动画。

在这段代码中，我们首先定义了一个.button的样式，在鼠标悬浮在上面时改变其背景颜色、字体颜色以及边框样式。然后使用伪类选择器:before和:after来实现按钮动画的效果。在:before伪类中，我们设置其background-color为#4CAF50，即鼠标悬浮在按钮上时按钮的颜色，然后将其left属性设置为-100%，这样在按钮未被悬浮时，动画的背景色就不会在按钮内显示出来。当鼠标悬浮在按钮上时，我们将其left属性设为0，这样就实现了左侧背景色的渐变效果。同样的，在:after伪类中我们将background-color和right属性设置为相应的值，以实现右侧的背景色渐变。

最后，我们使用transition属性来表示变化的过渡动画，这里我们设置为0.3s，也就是按钮变化时的持续时间。使用ease过渡函数来实现变化的渐变效果。

总之，使用CSS3可以轻松地实现各种动态效果，进而提高网站的用户体验。