[分享]css3动画鼠标移入

CSS3动画可以使网站更加生动有趣，同时也可以提高用户体验。其中之一就是鼠标移入动画。以下是一个示例：/ 定义一个动画效果 / keyframes fadeIn { 0 { opacity: 0; t...

CSS3动画可以使网站更加生动有趣，同时也可以提高用户体验。其中之一就是鼠标移入动画。以下是一个示例：

/* 定义一个动画效果 */
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 定义一个按钮样式 */
.btn {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  color: #fff;
  background-color: #0078d7;
  border-radius: 5px;
  animation: fadeIn 0.5s ease-in-out;
}

/* 鼠标移入动画效果 */
.btn:hover {
  animation: fadeIn 0.5s ease-in-out reverse;
} 

在上述代码中，我们使用了 @keyframes 关键字来定义一个名为 fadeIn 的动画效果，包含了两个状态，分别为 0% 和 100%。在 0% 状态中，元素的不透明度为 0，垂直方向上向下平移了 20px。在 100% 状态中，元素的不透明度为 1，垂直方向上回到了原始位置。

接着，我们定义了一个名为 btn 的按钮样式，其中包含了背景颜色、文本颜色、圆角等属性，并且添加了动画效果。

最后，在按钮的 :hover 伪类中，我们覆盖了初始动画效果，设置了反向播放的动画效果，实现了当鼠标移入按钮上方时，按钮会逐渐淡出并向上平移的效果。

以上是一个简单的 CSS3 鼠标移入动画的示例，你可以根据自己的需求和美感加以改写和探索，实现更加生动有趣的网站动画效果。