[分享]css中点击按钮会有动画

在Css中，我们经常可以看到一些按钮点击后会出现动画效果。例如，当我们将鼠标放到某个按钮上时，按钮会变色或者变形。下面，我们就来学习一下如何使用Css来实现点击按钮动画效果。.btn{ width: ...

在Css中，我们经常可以看到一些按钮点击后会出现动画效果。例如，当我们将鼠标放到某个按钮上时，按钮会变色或者变形。下面，我们就来学习一下如何使用Css来实现点击按钮动画效果。

.btn{
    width: 100px;
    height: 50px;
    border-radius: 5px;
    background-color: #ffca28;
    color: white;
    font-size: 18px;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.btn:hover{
    background-color: #ffb300;
    transform: scale(1.1);
}
.btn:active{
    background-color: #e65100;
    transform: scale(0.9);
} 

上面的代码中，我们创建了一个.btn类，该类代表一个按钮。我们在btn类中定义了按钮的宽度、高度、圆角、背景颜色、字体颜色、字体大小、居中等属性。同时，我们还定义了鼠标悬停和按钮点击后的动画效果。

在:hover伪类中，我们定义当鼠标悬停时，按钮背景颜色变化，并使用transform：scale属性对按钮进行放大；在:active伪类中，我们定义当按钮被点击时，背景颜色再次变化，并使用transform：scale属性对按钮进行缩小。这样，我们就完成了点击按钮动画效果的实现。

总而言之，Css的好处在于它可以让我们实现各种各样的动画效果，包括鼠标悬停、按钮点击等等。希望大家在实践中能够更好地掌握Css的使用方法。