css3鼠标划过事件

CSS3鼠标划过事件可以增加网页的交互性，让用户更加愉悦地浏览网站。下面介绍几种常用的CSS3鼠标划过效果。

/* 第一种效果：变色 */
.box{
  background-color: #ccc;
  transition: background-color 0.5s;
}
.box:hover{
  background-color: #f00;
}

/* 第二种效果：渐变 */
.box{
  background: linear-gradient(#ccc, #333);
  transition: background 0.5s;
}
.box:hover{
  background: linear-gradient(#f00, #000);
}

/* 第三种效果：缩放 */
.box{
  transform: scale(1);
  transition: transform 0.5s;
}
.box:hover{
  transform: scale(1.5);
}

/* 第四种效果：旋转 */
.box{
  transform: rotate(0deg);
  transition: transform 0.5s;
}
.box:hover{
  transform: rotate(360deg);
} 

上述代码分别实现了四种效果：鼠标划过时背景色变化、背景色渐变、缩放、旋转。通过CSS3过渡效果，实现了流畅的动画效果。