css 点击按钮旋转

要使用CSS实现点击按钮后旋转的效果，你可以使用:active伪类来定义按钮在被激活（即点击）时的样式。以下是一个简单的例子：

HTML:




<button class="rotate-button">Click Me</button>

CSS:




.rotate-button {
  transition: transform 0.3s ease-in-out; /* 添加过渡动画 */
  transform: rotate(0deg); /* 初始旋转角度 */
}
 
.rotate-button:active {
  transform: rotate(360deg); /* 点击时旋转360度 */
}

这段代码中，按钮初始时不旋转。当按钮被点击时，:active伪类被激活，transform属性将按钮旋转360度。transition属性确保旋转有一个动画过渡效果。

css 点击按钮旋转

评论已关闭

推荐阅读