CSS实现当鼠标移入或者移出时实现动画过渡效果

阿奇__

已于 2022-03-13 23:34:28 修改

阅读量1.1w

点赞数 3

文章标签：动画 css3 前端

于 2022-03-12 16:49:49 首次发布

本文链接：https://blog.csdn.net/a666666000/article/details/123281329

版权

现在需要完成这样一个需求

在鼠标移入一个按钮时,需要有一个从下到上慢慢改变背景颜色以及字体颜色的动画效果,再鼠标移出的时候,也要有一个从上到下慢慢变回原来动画的过渡效果

因为不会截动态图,因此用每个步骤来代表每一帧的样子!!

上图为一开始的样式

上图为移入鼠标后的一个中途动画效果

上图为鼠标移入后的最后一帧动画

鼠标移出时回到第一张图的过程中也会有同样的一个返回的动画效果

源码在下面,可以自取看看是不是自己正好需要的那种动画效果的实现

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        position: absolute;
        top: 0;
        transition: top 0.5s;
        /* z-index: 99; */
      }

      .box1 {
        position: absolute;
        width: 300px;
        text-align: center;
        line-height: 100px;
        height: 100px;
        font-size: 20px;
        z-index: 99;
      }
      .box1:hover + .box {
        top: -100px;
      }
      .box1:hover {
        color: aqua;
      }
    </style>
  </head>
  <body>
    <div>
      <!-- 可视区域 -->
      <div
        style="
          width: 300px;
          height: 100px;
          overflow: hidden;
          position: relative;
        "
      >
        <!-- 滑块区域 -->
        <div class="box1">内容</div>
        <div class="box">
          <div
            style="
              width: 300px;
              height: 100px;
              background-color: rgb(58, 148, 228);
            "
          ></div>
          <div
            style="
              width: 300px;
              height: 100px;
              background-color: rgb(214, 42, 42);
            "
          ></div>
        </div>
      </div>
    </div>
  </body>
</html>