css3 hover 执行动画

CSS3的hover伪类可以方便地实现鼠标悬浮时执行动画效果。下面，我们来看一个例子：

html：div class="box">
    Hover Me!/div>
css：.box {
      width: 200px;
      height: 200px;
      background-color: #F8B195;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #FFF;
      font-size: 24px;
      font-weight: bold;
      transition: all 0.3s ease-in-out;
}
.box:hover {
      background-color: #2C3E50;
      transform: rotate(360deg);
}
    

上面的代码中，我们创建了一个宽高为200px的正方形div，背景色为粉色，中间显示“Hover Me!”文本。在样式中，我们使用了CSS3的过渡（transition）属性，指定了所有属性的动画过渡时间为0.3秒，并使用了“ease-in-out”的动画函数。

当鼠标悬浮在div上时，我们使用:hover伪类来修改其背景色和旋转。鼠标离开时，自动回到原来的状态。

因为hover伪类是CSS3中的一部分，所以在使用时要注意浏览器兼容性。使用前需要对代码进行相应的兼容性测试。

总之，CSS3的hover伪类可以为网页带来更华丽、生动的交互效果，提升用户感知度。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！