css3单击变色 |css中class的用法

通过使用 CSS3，您可以设置这样的样式，当用户单击元素时，该元素的背景颜色将发生变化。

.button {
background-color: #007bff;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.button:active {
background-color: #0062cc;
}

在这里，大家定义了一个按钮样式，当用户单击该按钮时，按钮的背景颜色将从 #007bff 变为 #0062cc。

要实现这一效果，大家使用伪类 :active。当元素在活动状态下时，即用户正在与之交互时，该伪类会为元素添加样式。

大家还使用了 transition 属性，它定义了动画效果的持续时间、缓动函数以及动画何时开始。在这里，大家将使用 0.3 秒的时间来平滑地过渡按钮的背景颜色。

在总结中，CSS3 的单击变色是一个很酷的效果，它可以提高用户体验并使您的网站更加动态。