介绍
先来看看哔哩哔哩的头部导航部分效果，B站的头部导航背景图片使用的是动态叠加（变形和动画的效果），我们可以采用静态的图片的方式来实现背景图的部分
效果
来看看我的实现效果，是不是可以非常棒？
代码
关于代码部分不解释，在此处我会将该代码上传，链接并附在此处，有需要的小伙伴可以下载下来自行学习和体验！下载链接在下面哈
bilibili
<!--* @Author: OriginalCoder* @Date: -10-21 17:46:04* @version: * @LastEditTime: -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(/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"><imgclass="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><imgclass="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"><inputclass="search-input"type="text"placeholder="哈？海底捞出火锅奶茶了？"/><div class="nav-search-btn"><button><imgclass="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><imgclass="user-img"src="/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"><imgsrc="/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="/"><imgclass="logo-img"src="/bfs/archive/62dd4b0140432962d3ce0c6db99d77d2e937.png"alt=""/></a></div></div></div></div></div></body></html>
