你的最佳女友 2022-03-16 21:47 采纳率: 88.9%
浏览 57
已结题

王者荣耀鼠标移到导航栏自动弹出效果以及banner图下面云雾效果

请问王者荣耀官网里面鼠标划上去就能弹出下面这些的 然后bannar图下面云雾的效果咋做的哇 求解答

  • 写回答

2条回答 默认 最新

  • AReTrnA 2022-03-17 15:24
    关注

    这应该是你要的效果：

    <!DOCTYPE html>
<html>

<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>
        nav {
            list-style: none;
            width: 100vw;
            height: 84px;
            position: absolute;
            top: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.3);
        }
        
        .outer {
            color: white;
        }
        
        .inner {
            width: 100vw;
            height: 0px;
            overflow: hidden;
            transition: height 0.3s;
            background-color: rgba(0, 0, 0, 0.2);
            position: absolute;
            top: 84px;
            left: 0;
        }
        
        nav:hover .inner {
            height: 200px;
        }
    </style>
</head>

<body>
    <nav>
        <div class="outer">
            <div class="inner"></div>
        </div>
    </nav>
</body>

</html>

    而banner图下面的云雾你指的可能是那个渐变？
    那个是本身在图片上的 （扒了它图片出来）
    http://ossweb-img.qq.com/upload/webplat/info/yxzj/20220310/595261080931510.jpg

    当然css也可以做

    有用采纳

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 3月29日
  • 已采纳回答 3月21日
  • 创建了问题 3月16日

悬赏问题

  • ¥20 wireshark抓不到vlan
  • ¥20 关于#stm32#的问题：需要指导自动酸碱滴定仪的原理图程序代码及仿真
  • ¥20 设计一款异域新娘的视频相亲软件需要哪些技术支持
  • ¥15 stata安慰剂检验作图但是真实值不出现在图上
  • ¥15 c程序不知道为什么得不到结果
  • ¥40 复杂的限制性的商函数处理
  • ¥15 程序不包含适用于入口点的静态Main方法
  • ¥15 素材场景中光线烘焙后灯光失效
  • ¥15 请教一下各位，为什么我这个没有实现模拟点击
  • ¥15 执行 virtuoso 命令后，界面没有，cadence 启动不起来