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

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

写回答
好问题 0 提建议
关注问题
分享
邀请回答
编辑收藏删除
收藏举报

2条回答默认最新

AReTrnA 2022-03-17 07: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条)

编辑

预览

报告相同问题？

关注问题

王者荣耀开局黑屏，请问是什么原因造成的? c语言
2022-11-02 15:40

回答 2 已采纳回答：推测是手机加载的问题，有可能加载资源的时候出现了波动，或者手机配置较低，导致的情况，场景没加载出来，大概率是资源没有加载完成
怎么用代码做出导航栏 css
2021-11-20 08:16

回答 4 已采纳 <style> *{ padding: 0; margin: 0; } ul{
王者荣耀模拟战排位时图标上的数字是什么意思？多彩生活
2021-09-09 06:34

回答 2 已采纳原来上面的图标代表的是排名啊，我也上榜了哈哈哈
jQuery实现王者荣耀手风琴效果
2020-10-15 10:41

在本示例中，我们将探讨如何使用jQuery来实现一个类似王者荣耀风格的手风琴效果。手风琴效果是一种常见的用户界面元素，它允许用户通过展开或折叠内容区域来节省空间并保持页面整洁。在这个实例中，我们将看到如何...
前端移动端JS怎么实现摇杆控制？就是类似玩着荣耀那个圆圈滑动可以控制方向的 html5 javascript vue.js
2021-03-30 02:28

回答 3 已采纳松手可回弹 <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8">
勾选复选框后点击选择按钮实现弹出框出现你“选中了‘复选框后的文字’”。 javascript jquery
2022-02-27 06:14

回答 1 已采纳 <body> <label for="lq">篮球</label><input type="checkbox" value="篮球" id="lq
如何在C语言做打印出平行四边形 c语言
2021-04-13 08:43

回答 3 已采纳 #include <stdio.h> int main() { printf(" *****\n"); printf(" ****\n"); printf("****\n
自动获取王者荣耀全皮肤图片
2020-04-16 09:21

【标题】：“自动获取王者荣耀全皮肤图片”是一个利用编程技术，特别是爬虫技术来实现的项目，旨在通过自动化的方式下载王者荣耀游戏中所有英雄的皮肤图片。这个项目的核心是使用C#编程语言，结合VS（Visual Studio...
vue部署到服务器后，火狐浏览器访问报错，谷歌正常不知道怎么解决 css vue.js
2021-12-23 01:45

回答 2 已采纳确保头部是<!DOCTYPE html>
jdk 配置环境后javac 能运行，javac HelloWorld.java，找不到文件 java 有问必答
2021-07-19 03:49

回答 6 已采纳分析一下就出来了：jdk 配置环境后javac，java，Java -version 都能运行这说明你的jdk环境配置没有问题，所以错误不是jdk的错误javac HelloWorld.java，找不
改成选择法对数组中10个整数按由小到大排序。 c++ c语言
2021-05-25 08:28

回答 1 已采纳供参考： #include <stdio.h> void sort(int a[],int n) { int i,j,k,t; for(i=0;i<n-1;i++
王者荣耀人物装备PNG153个，透明背景图片，可用于视频贴图。（免积分下载）
2021-07-30 15:37

同样，"王者荣耀-昭君 @宇飞视觉.png"、"王者荣耀-花木兰 @宇飞视觉.png"以及"公孙离–花间舞 @宇飞视觉.png"等多样化的角色选择，能够满足不同主题和风格的视频需求。总的来说，这个资源包提供了丰富的《王者荣耀...
Python爬取王者荣耀英雄图片
2020-12-22 02:25

Python爬取王者荣耀英雄图片爬虫，下图片，很简单，直接上代码 import requests import os import json def get_hero_id(): idlist = [] namelist = [] try: response = json.loads(requests.get('...
目标检测数据集(YOLOV5目录格式)：王者荣耀目标检测数据集（12类别）
2024-03-29 06:46

项目包含：王者荣耀目标检测数据集（12类别），数据保存按照YOLOV5文件夹保存，可直接用作目标检测数据集，无需额外处理。图像分辨率为1920*1032的RGB图片，包含王者荣耀游戏的目标【数据集介绍】王者荣耀图像...
jQuery王者荣耀风琴栏效果
2021-05-28 15:42

本教程将深入探讨如何使用jQuery实现“王者荣耀风琴栏”效果，这是一个常见的交互设计，常用于展示多级分类信息，用户可以展开或折叠各个部分以查看详细内容。首先，我们需要理解HTML基础结构。在“王者荣耀风琴栏...
没有解决我的问题, 去提问

问题事件

关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
系统已结题 3月28日
关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
已采纳回答 3月21日
关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
创建了问题 3月16日

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

2条回答 默认 最新

问题事件

2条回答默认最新