css3点击旋转动画

CSS3点击旋转动画是指通过CSS3动画实现一个元素在被点击时出现旋转的效果。该效果可以为网站增添一些动态感，提高用户体验，下面是该效果实现的代码:

/* 定义旋转动画 */
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 定义元素样式 */
.Box {
  width: 100px;
  height: 100px;
  background-color: #f00;
  transition: all .5s ease;
}

/* 点击时应用旋转动画 */
.Box:active {
  animation: rotate .5s linear forwards;
}

代码中使用了CSS3动画的@keyframes规则来定义旋转动画，该动画在动画开始时被应用，并且只运行一次。通过元素的:active伪类选择器应用旋转动画，当用户点击元素时使其旋转。使用transition属性可以控制元素的加入、删除、过渡和动画效果，使动画表现更加丰富。

总之，CSS3点击旋转动画是一种简单而有效的动画效果，可以大大增强网站页面的交互性和视觉吸引力，对于网站设计师来说是必备的技术之一。