css点击按钮图片旋转

在网页设计中，常常需要使用按钮来达到一些交互效果。为了让按钮更加生动形象，我们可以运用CSS代码实现按钮点击后图片旋转的效果。下面就来看一下如何实现！

.button {
  
  width: 200px;
  
  height: 200px;
  
  background-image: url('img/button.jpg');
  
  background-size: cover;
  
  transition: transform 0.3s ease-in-out;
}
.button:hover {
  
  transform: rotate(360deg);
}
 

以上代码中，我们首先定义了一个名为“.button”的类名，并设置了其宽、高和背景图片。其中，background-size: cover; 可以保证图片在按钮中完整展示且不失真。

而在实现点击图片旋转的效果时，我们通过:hover选择器和transform属性来实现。通过:hover选择器，可以在鼠标悬停时触发动画效果，而transform属性则指定了从原始状态到最终状态（即旋转360度）所需的形变。

需要注意的是，transform属性必须与transition属性一起使用。transition属性规定了动画效果开始和结束的状态，以及时间函数（ease-in-out表示缓慢进入/缓慢退出）。这样，按钮在旋转时就会有更加流畅的效果。

通过以上代码和技巧，我们可以轻松实现点击按钮图片旋转效果，为网页增添更多的生动活泼氛围。