[分享]css3按钮旋转动画效果

CSS3的各种动画效果让我们在网页设计中有了更多的选择和创意。今天我们来介绍一下CSS3按钮旋转动画效果的实现。

.btn {
  width: 100px;
  height: 40px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: transform .3s ease-in-out;
}
.btn:hover {
  transform: rotate(360deg);
} 

首先，我们先定义了一个样式类.btn，该类用于定义我们需要显示的按钮的样式。在按钮的正常状态下，我们定义了该按钮的宽度为100像素，高度为40像素，背景颜色为#007bff，字体颜色为白色，边框为无，边框半径为5像素，并使用鼠标指针作为光标。

然后，在.btn:hover伪类下，我们使用了CSS3的transform属性，并设置旋转角度为360度，同时设置动画过渡时间为0.3秒以及缓动函数为动画效果添加了更多的美感。当用户鼠标悬停在该按钮上时，通过该伪类定义的样式规则，按钮将沿Y轴旋转360度。

这样，我们就完成了CSS3按钮旋转动画效果的实现，让按钮在用户操作时增加一些趣味和活泼感。