css 点击时执行动画

CSS中可以通过添加伪类来实现在特定条件下执行动画的效果。

其中，最常见的伪类就是:hover伪类，它可以在鼠标悬停在元素上时执行相应的动画。

button:hover {
      background-color: #cc0000;
      color: #ffffff;
      transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
}

在上述代码中，我们定义了一个button元素，当鼠标悬停在按钮上时，其背景色和文字颜色都会变化，并在0.5秒的时间内平滑过渡。

除了:hover伪类外，还有其他的伪类可以实现点击时执行动画的效果。

例如，:active伪类可以在元素被点击时执行相应的动画。

button:active {
      transform: scale(0.8);
      transition: transform 0.2s ease-in-out;
}
    

在上述代码中，我们定义了一个button元素，当按钮被点击时，其大小会减小，并在0.2秒的时间内平滑过渡。

总的来说，在CSS中，通过添加伪类来实现在特定条件下执行动画的效果，这为网页的交互性提供了更多的选择和创意。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！