m0_46602893 2021-03-17 23:23 采纳率: 91.5%
浏览 32
已采纳

这段代码怎样改才能实现鼠标移出效果？

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
            .da{width: 400px;height: 400px;margin: 800px auto;background: url(./src=http___pic1.win4000.com_wallpaper_a_53b4ca6e3b504.jpg_down&refer=http___pic1.win4000.jfif);position: relative;overflow: hidden;}
            .zuo{width: 800px;height: 800px;background: purple;opacity: 0.5;transition: 1s;
            transform: translate(-700px,-700px)rotate(45deg);position: absolute;
            }
            .you{width: 800px;height: 800px;background: purple;opacity: 0.5;transition: 1s;
            transform: translate(300px,300px)rotate(45deg);position: absolute;
            }
            .zhong{width: 400px;height: 290px;background: grey;opacity: 0.9;position: absolute;top: 50%;margin-top: -145px;transform: rotate(45deg);transition: 1s;opacity: 0;}
            .heng{width: 400px;height: 3px;background: blue;margin-top: 60px;}
            p{color: white;text-align: center;}
            .da:hover .zuo {transform: translate(-400px,-400px)rotate(45deg);}
            .da:hover .you {transform: translate(-10px,-10px)rotate(45deg);} 
            .da:hover .zhong{transform: rotate(0);opacity: 0.9;animation: x 1s;}
            @keyframes x{
                  0%{height: 2px;}
                  100%{height: 290px;}
            }
      </style>
</head>
<body>
      <div class="da">
            <div class="zuo"></div>
            <div class="you"></div>
            <div class="zhong">
                  <p>测试文字</p>
                  <div class="heng"></div>
                  <p>测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字</p>
            </div>
      </div>
</body>
</html>

这段代码中间灰色区域在鼠标划入的时候由一条线慢慢变成整个灰色区域，那么有2个问题：

1、怎样编写代码才能实现鼠标划出的时候从整个灰色区域变成一条线？

2、在鼠标刚开始划入的时候灰色区域是一条线，但是此时灰色区域div里面的“测试文字”和那条蓝色的横线怎样编写代码才能在刚开始的时候不要出现，而是随着灰色区域的逐渐增大而逐渐出现？

  • 写回答

1条回答 默认 最新

  • random1123 2021-03-18 14:29
    关注
    <!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
            .da{width: 400px;height: 400px;margin: 800px auto;background: url(./12.png);position: relative;overflow: hidden;}
            .zuo{width: 800px;height: 800px;background: purple;opacity: 0.5;transition: 1s;
            transform: translate(-700px,-700px)rotate(45deg);position: absolute;
            }
            .you{width: 800px;height: 800px;background: purple;opacity: 0.5;transition: 1s;
            transform: translate(300px,300px)rotate(45deg);position: absolute;
            }
            .zhong{
                width: 400px;height: 290px;background: grey;
                /* opacity: 0.9; */
                position: absolute;
                top: 50%;
                margin-top: -145px;
                transform: rotate(45deg);
                transition: 1s;
                opacity: 0;
                animation: x2 1s
            }
            .heng{width: 400px;height: 3px;background: blue;margin-top: 60px;opacity: 0;animation: op2 1s;}
            p{color: white;text-align: center;opacity: 0;animation: op2 1s;}
            .da:hover .zuo {transform: translate(-400px,-400px)rotate(45deg);}
            .da:hover .you {transform: translate(-10px,-10px)rotate(45deg);} 
            .da:hover .zhong{transform: rotate(0);opacity: 0.9;animation: x 1s ;}
            .da:hover .heng{transform: rotate(0);opacity:1;animation: op 1s;}
            .da:hover p{transform: rotate(0);opacity:1;animation: op 1s;}
            @keyframes x{
                  0%{height: 2px;}
                  100%{height: 290px;}
            }
            @keyframes x2{
                  0%{height: 290px;}
                  100%{height: 2px;}
            }
            @keyframes op {
                0%{opacity: 0;}
                30%{opacity: 0;}
                100%{opacity: 1;}
            }
            @keyframes op2 {
                0%{opacity: 1;}
                50%{opacity: 0;}
            }
      </style>
</head>
<body>
      <div class="da">
            <div class="zuo"></div>
            <div class="you"></div>
            <div class="zhong">
                  <p>测试文字</p>
                  <div class="heng"></div>
                  <p>测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字</p>
            </div>
      </div>
</body>
</html>

    返回的时候也加动画就可以恢复成原来的样子，至于字体和线条出现的时机，可以根据运动时的百分比设定

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥15 2020长安杯与连接网探
  • ¥15 关于#matlab#的问题：在模糊控制器中选出线路信息，在simulink中根据线路信息生成速度时间目标曲线（初速度为20m/s，15秒后减为0的速度时间图像）我想问线路信息是什么
  • ¥15 banner广告展示设置多少时间不怎么会消耗用户价值
  • ¥16 mybatis的代理对象无法通过@Autowired装填
  • ¥15 可见光定位matlab仿真
  • ¥15 arduino 四自由度机械臂
  • ¥15 wordpress 产品图片 GIF 没法显示
  • ¥15 求三国群英传pl国战时间的修改方法
  • ¥15 matlab代码代写，需写出详细代码，代价私
  • ¥15 ROS系统搭建请教（跨境电商用途）