[分享]css3动画鼠标进入移动

CSS3动画可以为网页增添生动活泼的效果，再通过鼠标移入移出动态交互，进一步提升用户体验。下面为大家展示一组简单的CSS3动画鼠标进入移动效果。/ 普通效果 / .box{ : relative; w...

CSS3动画可以为网页增添生动活泼的效果，再通过鼠标移入移出动态交互，进一步提升用户体验。下面为大家展示一组简单的CSS3动画鼠标进入移动效果。

/* 普通效果 */
.box{
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #ccc;
}
.box:hover{
  transform: translateX(50px);
} 

上面的代码实现了鼠标移入时盒子向右移动50px的效果。我们可以通过以下代码来实现更绚丽的动画效果：

/* 进阶效果 */
.box{
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #ccc;
}
.box:before{
  content: ';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s;
  background-color: rgba(255,255,255,.5);
}
.box:hover:before{
  transform: scaleX(1);
  transform-origin: left;
} 

上面的代码实现了鼠标移入时盒子左侧出现白色背景并向右展开的效果，鼠标移出时背景缩小消失。这样一个简单的CSS3动画鼠标进入移动效果就完成了，你可以通过修改前缀以及调整关键字实现更多有趣的动画效果。