[分享]css3实现鼠标放上去移动

CSS3实现鼠标放上去移动效果可以通过众多属性来实现，如transition、transform、animation等。
下面我们来逐一讲解。

/* transition实现 */
.box{
  width: 100px;
  height: 100px;
  background-color: red;
  transition: all 0.5s;
}
.box:hover{
  transform: translateX(50px);
}

/* transform实现 */
.box{
  width: 100px;
  height: 100px;
  background-color: red;
}
.box:hover{
  transform: translateX(50px);
  transition: all 0.5s;
}

/* animation实现 */
.box{
  width: 100px;
  height: 100px;
  background-color: red;
}
.box:hover{
  animation: move 2s;
}
@keyframes move{
  50%{
    transform: translateX(50px);
  }
} 

在使用上述属性时，需要注意以下几点：

• transition和animation需要在:hover伪类中使用。

• transform的属性有很多种，可以实现旋转、缩放、位移等效果。

• animation需要使用@keyframes声明动画过程。

• 属性使用时需要注意浏览器的兼容性。

以上就是CSS3实现鼠标放上去移动的方式，可以根据具体需求选择使用哪种属性。