[分享]css3按钮旋转特效

在网站设计中，按钮是不可或缺的元素，而按钮动效可以让网站更加生动活泼。其中，按钮旋转特效是一种非常炫酷的效果，可以吸引用户的注意力。下面我们就来学习一下如何实现css3按钮旋转特效。/ 定义按钮样式 ...

在网站设计中，按钮是不可或缺的元素，而按钮动效可以让网站更加生动活泼。其中，按钮旋转特效是一种非常炫酷的效果，可以吸引用户的注意力。下面我们就来学习一下如何实现css3按钮旋转特效。

/* 定义按钮样式 */
.button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #f98b64;
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
  transition: all 0.5s ease;
}

/* 定义按钮hover样式 */
.button:hover {
  background-color: #ff6b37;
}

/* 定义按钮旋转样式 */
.button.rotate {
  transform: rotate(-360deg);
  transition: all 0.5s ease;
}

/* 定义按钮旋转hover样式 */
.button.rotate:hover {
  transform: rotate(0deg);
} 

以上代码中，首先定义了按钮的基本样式，包括背景颜色、字体颜色、字体大小、边框样式等。然后为按钮添加了hover样式，当鼠标悬浮在按钮上时，背景颜色会有变化。

接下来，定义了按钮旋转的样式。使用了CSS3中的transform属性，将按钮旋转了360度。并指定了一个过渡效果，使变化更加流畅。再为旋转后的按钮添加hover样式，让它能够恢复到原来的状态。

最后，只需要在HTML中添加按钮的class为“rotate”，即可使按钮获得旋转特效。

<button class="button rotate">旋转按钮</button> 

这里只是一个简单的例子，你可以根据实际情况自由地调整按钮样式和旋转角度，实现不同的效果。