先来看看哔哩哔哩的头部导航部分效果，B站的头部导航背景图片使用的是动态叠加（变形和动画的效果），我们可以采用静态的图片的方式来实现背景图的部分
来看看我的实现效果，是不是可以非常棒？
关于代码部分不解释，在此处我会将该代码上传，链接并附在此处，有需要的小伙伴可以下载下来自行学习和体验！下载链接在下面哈 bilibili
<!-- * @Author: OriginalCoder * @Date: 2020-10-21 17:46:04 * @version: * @LastEditTime: 2020-10-21 20:24:25 * @LastEditors: OriginalCoder * @Description: --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="shortcut icon" href="favicons/bilibili-fill.png" /> <title>哔哩哔哩 (゜-゜)つロ 干杯~-bilibili</title> <style> * { margin: 0; padding: 0; } a, ul, li { list-style: none; text-decoration: none; color: #ffffff; } button, input { text-decoration: none; border: none; } input:hover { text-decoration: none; } input, button:focus { text-decoration: none; outline: none; border: none; } .nav { position: relative; margin: 0; padding: 0; } .mini-header-content { color: #ffffff; box-sizing: border-box; padding: 10px 24px; line-height: 30px; position: relative; margin: 0 auto; display: flex; align-items: flex-start; justify-content: space-between; z-index: 100; } .nav-link .nav-link-ul { height: 36px; display: flex; align-items: center; font-size: 14px; } .nav-link .nav-link-ul .nav-link-item { margin-right: 12px; } .nav-link-item-img { width: 18px; height: 18px; vertical-align: middle; } /* 导航搜索 */ .nav-search-box { margin: 0 10px; width: 500px; transition: width 0.3s; } .nav-search { position: relative; } .nav-search #nav-searchform { display: block; padding: 0 38px 0 16px; border: 1px solid hsla(0, 0%, 100%, 0); border-radius: 2px; background-color: #fff; } .search-input { width: 431px; height: 32px; } .nav-search .nav-search-keyword { overflow: hidden; width: 100%; height: 34px; border: none; background-color: transparent; box-shadow: none; color: #999; font-size: 14px; line-height: 34px; transition: all 0.2s; } .nav-search .nav-search-btn { position: absolute; top: 0; right: 0; margin: 0; padding: 0; width: 48px; height: 35px; border: none; border-radius: 2px; background: #e7e7e7; line-height: 35px; } .nav-search-btn-img { width: 16px; height: 16px; padding: 8px 16px; } /* 用户中心页面 */ .nav-user-center { font-size: 14px; display: flex; flex-shrink: 0; } .nav-user-center .user-con { display: flex; align-items: center; } .nav-user-center .user-con .item { position: relative; display: flex; margin-left: 12px; cursor: pointer; } .user-img { width: 32px; height: 32px; border-radius: 20px; vertical-align: middle; } .user-login { line-height: 32px; vertical-align: middle; } .upload { position: relative; color: #fff; font-size: 14px; display: block; width: 100px; height: 36px; line-height: 36px; text-align: center; background: #fb7299; border-radius: 2px; margin-left: 14px; } /* 背景图 */ .layer { width: 100%; height: 178px; background-image: url(https://i0.hdslb.com/bfs/archive/0b7eef054547750e6bfeff6f36c83e83d2a058fb.png); } .bili-banner { position: relative; top: -56px; } /* logo */ .logo-img { position: relative; top: 60px; left: 110px; } </style> </head> <body> <div class="nav"> <div class="mini-header"> <div class="mini-header-content"> <div class="nav-link"> <ul class="nav-link-ul"> <li class="nav-link-item"> <img class="nav-link-item-img" src="./images/bilibili-fill.png" alt="" /> <a href="#">主站</a> </li> <li class="nav-link-item"> <a href="#">番剧</a> </li> <li class="nav-link-item"> <a href="#">游戏中心</a> </li> <li class="nav-link-item"> <a href="#">直播</a> </li> <li class="nav-link-item"> <a href="#">会员购</a> </li> <li class="nav-link-item"> <a href="#">漫画</a> </li> <li class="nav-link-item"> <a href="#">赛事</a> </li> <li class="nav-link-item"> <a href="#">S10</a> </li> <li class="nav-link-item"> <span> <div> <img class="nav-link-item-img" src="./images/iphone.png" alt="" /> 下载APP </div> </span> </li> </ul> </div> <div class="nav-search-box"> <div class="nav-search"> <form id="nav-searchform"> <input class="search-input" type="text" placeholder="哈？海底捞出火锅奶茶了？" /> <div class="nav-search-btn"> <button> <img class="nav-search-btn-img" src="./images/search.png" alt="" /> </button> </div> </form> </div> </div> <div class="nav-user-center"> <div class="user-con"> <div class="item"> <span> <img class="user-img" src="https://static.hdslb.com/images/akari.jpg" alt="" /> <a class="user-login" href="#">登录</a> </span> </div> <div class="item"> <span><a class="user-login" href="#">注册</a></span> </div> <div> <span class="upload">投稿</span> </div> </div> </div> </div> <div class="bili-banner"> <!-- <div class="layer"> <img src="https://i0.hdslb.com/bfs/archive/0b7eef054547750e6bfeff6f36c83e83d2a058fb.png" alt="" style=" transform: translate(0px, 0px) rotate(0deg); height: 165px; width: 100%; background-size: cover; " /> </div> --> <div class="layer"> <div class="b-logo"> <a href="https://www.bilibili.com/"> <img class="logo-img" src="https://i0.hdslb.com/bfs/archive/622017dd4b0140432962d3ce0c6db99d77d2e937.png" alt="" /> </a> </div> </div> </div> </div> </div> </body> </html>