[分享]css3手风

CSS3的一个非常酷的特性就是手风，利用它我们可以为网页内容增加更丰富的交互性和动态性。手风所指的就是鼠标指针（或手指）悬停在一个特定的元素上时，会触发一个动画效果，使得该元素产生一种视觉上的位移或变...

CSS3的一个非常酷的特性就是手风，利用它我们可以为网页内容增加更丰富的交互性和动态性。

手风所指的就是鼠标指针（或手指）悬停在一个特定的元素上时，会触发一个动画效果，使得该元素产生一种视觉上的位移或变形。

.box{
  width: 200px;
  height: 200px;
  background-color: #f6f6f6;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  transition: transform .5s ease;
}

.box:hover{
  transform: rotate(360deg);
} 

上述代码就是一个简单的手风实现。在初始状态下，一个名为.box的元素被定义为一个200x200像素的矩形，在鼠标悬停在它上面时，给它加上了transform属性，这样就会想象成一个时针在短时间内顺时针旋转了360度。

通过CSS3手风，我们可以实现更加生动、丰富的网站内容效果，从而吸引更多的用户对网站进行访问。