素材网站 头部视频模板含源码
我也是扒来的。。。适合b2主题站，shipin.css使用b2自带的公共样式即可，没有其它的。
[content_hide]
<!doctype html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"> <meta http-equiv="Cache-Control" content="no-transform"> <meta http-equiv="Cache-Control" content="no-siteapp"> <meta name="renderer" content="webkit"> <meta name="force-rendering" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <meta name="baidu-site-verification" content="code-4qWFVAROB2"> <link rel="stylesheet" href="css/shipin.css" type="text/css" > <script type="text/javascript" src="js/jquery.min.js"></script></head><style>/*网站自适应CSS开始*/@media screen and (min-width: 1441px){.wrapper { width: 1400px; max-width: 100%; margin: 0 auto;}/*首页动态大图开始*/.search_360{ color:#fff; background-color:#28bc5b;}.search_baidu{ color:#fff; background-color:#4E6EF2;}.search_bing{ color:#fff; background-color:#ffc20e;}.search_toutiao{ color:#fff; background-color:#f04142;}.search_zhihu{ color:#fff; background-color:#06f;}#page-wrapper { padding-bottom:16px; margin-top:-74px}.home-banner { height:600px; position:relative; z-index:1; background-position:0 100%; animation:gradient 12s ease-in-out infinite}.home-banner .section { position:relative; width:100%; overflow:hidden; max-height:600px; height:100vh}.home-banner .section .video-wrapper { display:flex; justify-content:center; align-items:center; width:100%; height:100%; position:absolute; overflow:hidden; z-index:0}.home-banner .section .video-wrapper video { visibility:visible; pointer-events:none; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); height:100%; width:100%; object-fit:cover}.home-banner .section .video-overlay { height:100%; width:100%; top:0; left:0; position:absolute; background:rgba(45,47,54,.15)}.home-banner .corner { width: 28px; height: 21px; border-radius: 4px; left: 340px; top: 10px;}.home-banner .home-menus { margin-left:70px}.home-banner .home-menus .cus-dropbox-trigger a,.home-banner .home-menus>a { color:#fff; font-size:14px; margin-right:20px; line-height:60px}.home-banner .home-menus .cus-dropbox-trigger a:hover,.home-banner .home-menus>a:hover { color:var(--b2color);}.home-banner>.layout-center { height:100%}.home-banner-content { padding-top:150px; margin-left:182px; margin-bottom:22px}.home-banner-content .slogan-text p { font-size:18px; line-height:24px; letter-spacing:2px; color:#fff}.home-banner-content .slogan-text p:nth-of-type(1) { font-weight:600; font-size:28px; line-height:46px; letter-spacing:6px; text-shadow:0 2px 4px rgba(0,0,0,.25); margin-bottom:10px}.home-banner-search { width:800px; margin-left:209px; height:auto}.home-banner-search form { margin-bottom:10px;}.home-banner-search form>input { width:100%; height:48px; background:#fff; border:none; padding:18px 22px; font-size:14px; color:#333}.home-banner-search form>input::placeholder { color:#979797}.home-banner-search .hot-top { position:absolute; top:13px; right:115px; font-size:13px}.home-banner-search .hot-top i { margin-right:4px}.home-banner-search .hot-words-container,.home-banner-search .rec-words-container { width:100%; top:56px}.home-banner-links { width: 80%; font-size: 14px; height: 40px; line-height: 40px; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,.27);}.home-banner-links a { margin-right:19px; color:inherit}.home-banner-links a:hover { color:var(--b2color);}.home-banner .search-types-cycles { width:106px; height:290px; background:linear-gradient(180deg,rgba(0,0,0,0) 0,rgb(255 96 0 / 17%) 51.04%,rgba(0,0,0,0) 100%); left:630px; top:-121px; text-align:center; z-index:-1}.home-banner .search-types-cycles .search-types-btn { width:100%; height:20px; line-height:20px; cursor:pointer; user-select:none; left:0; bottom:-20px; z-index:1}.home-banner .search-types-cycles .search-types-btn i { color:#fff; font-size:12px}.home-banner .search-types-cycles .search-types-btn:nth-of-type(1) { bottom:auto; top:-20px}.home-banner .search-types-cycles .search-types-btn:nth-of-type(1) i { transform:rotate(180deg)}.home-banner .search-types-cycles .search-types-btn:hover i { color:var(--b2color);}.home-banner .search-types-cycles ul { width:100%; height:100%; padding-top:5px}.home-banner .search-types-cycles ul:after,.home-banner .search-types-cycles ul:before { content:''; width:1px; height:100%; display:block; position:absolute; left:0; top:0; background:linear-gradient(0,transparent 0,var(--b2color) 50%,transparent 100%)}.home-banner .search-types-cycles ul:after { left:auto; right:0}.home-banner .search-types-cycles ul li { height:40px !important; line-height:40px !important; font-size:16px; color:rgba(255,255,255,.6); text-align:center; cursor:pointer; user-select:none}.home-banner .search-types-cycles ul li:hover { color:var(--b2color);}.home-banner .search-types-cycles ul li:nth-of-type(4) { height:80px; line-height:80px}.home-banner .search-types-cycles ul li a { color:rgba(255,255,255,.6); transition:none}.home-banner .search-types-cycles ul li a:hover { color:var(--b2color);}.home-banner .search-types-cycles button:hover { background:#46dacf !important; opacity:1; transition:opacity .2s}.home-banner .search-types-cycles button i { font-size:18px; color:#fff; margin-right:6px}.home-banner .search-types-cycles button span { font-size:16px; color:#fff}.home-banner:after { content:''; width:100%; height:120px; position:absolute; bottom:0; left:0; background:linear-gradient(180deg,#282a30ab 0,rgba(0,0,0,0) 100%); transform:rotate(-180deg); z-index:0}.top-navs { width:100%; /* height:70px; */ bottom: 0px; padding-top: 16px; left:0; /* padding:12px 0; */ z-index:1; backdrop-filter: blur(10px);}.top-navs .top-navs-l { width: calc(100% - 180px); display:flex; justify-content:center; align-items:center; margin:0 auto; border-right:1px solid rgb(255 255 255 / 10%)}.top-navs .top-navs-l-item { width:20%; margin:0 18px; display:flex; flex-direction:column; justify-content:center; align-items:center}.top-navs .top-navs-l-item .top-navs-l-title a { font-weight:600; font-size:18px; line-height:25px; height:25px; margin-bottom:12px; color:#fff; text-shadow:1px 1px 1px #000}.top-navs .top-navs-l-item .top-navs-l-title .wz { font-weight:600; font-size:18px; line-height:25px; height:25px; margin-bottom:12px; color:#fff; text-shadow:1px 1px 1px #000}.top-navs .top-navs-l-item .top-navs-l-title a i { font-size:34px; margin-right:8px; vertical-align:-4px}.top-navs .top-navs-l-item .top-navs-l-title a img { float:left; width:34px; height:34px; margin-right:8px; vertical-align:-4px; margin-top: -5px;}.top-navs .top-navs-l-item .top-navs-l-title a:hover { color:var(--b2color);}.top-navs .top-navs-l-item .top-navs-l-links { font-size:14px; line-height:20px; display:flex; justify-content:space-around; margin:0 -10px}.top-navs .top-navs-l-item .top-navs-l-links a { color:#fff; margin:0 10px; text-shadow:1px 1px 1px #000}.top-navs .top-navs-l-item .top-navs-l-links a:hover { color:var(--b2color);}.top-navs .top-navs-m { width:176px; height:61px; border-right:1px solid rgba(255,255,255,.25); padding:0 24px; display:none; flex-wrap:wrap; justify-content:space-around; align-items:center}.top-navs .top-navs-m a,.top-navs .top-navs-m p,.top-navs .top-navs-m>div { width:50%; text-align:center; color:#fff; font-size:14px; line-height:20px; cursor:pointer; user-select:none; text-shadow:1px 1px 1px #000}.top-navs .top-navs-m a:hover,.top-navs .top-navs-m p:hover,.top-navs .top-navs-m>div:hover { color:var(--b2color);}.top-navs .top-navs-m div p,.top-navs .top-navs-m>a { margin-bottom: 25px;}.top-navs .top-navs-m div p { width:100%; margin-bottom:0; margin-top:-20px}.top-navs .top-navs-m .top-navs-m-box { top:-16px; left:-72px; width:157px; height:66px; background:#444; border-radius:8px; padding:8px 14px 0; display:none; margin-top:-70px}.top-navs .top-navs-m .top-navs-m-box a { margin-bottom:9px}.top-navs .top-navs-m .top-navs-m-box a:hover { color:var(--b2color);}.top-navs .top-navs-r { width:176px}.top-navs .top-navs-r a { width:50%; padding-left:30px; text-align:center;}.top-navs .top-navs-r a i { font-size:36px; margin-bottom:10px}.top-navs .top-navs-r img { height: 40px; width: 40px; margin-top: -3px;}.top-navs .top-navs-r a p { font-size:14px; line-height:40px; color:#fff; text-shadow:1px 1px 1px #000}.top-navs .top-navs-r a p:hover { color:var(--b2color);}.por { position:relative}.poa { position:absolute}.pof { position:fixed}.Onecad_clearfix:after { content:''; clear:both; display:block; height:0; visibility:hidden; font-size:0; line-height:0}.fl { float:left}.fr { float:right}.ovh { overflow:hidden}.block { display:block}.icon-rank { width:auto; display:inline-block; border:none; overflow:hidden; vertical-align:-3px}img.icon-rank { width:20px; height:20px; margin-right:0px}a.hot-top.text-notify:hover { color:var(--b2color);}p.top-navs-l-title { margin-bottom:8px}.top-navs-l-title i{ width:1em; height:1em; float: left;}.home-banner-search>form>button { box-sizing:border-box; min-width:100px; transform:translateY(0px); font-size:15px; border-top-right-radius:3px; border-bottom-right-radius:3px; position:absolute; right:1px; top:0; z-index:1; border:1px solid #23d1c3; padding:0 15px; width:147px; height:56px; background:linear-gradient(90deg,#35eee3 0,#21cec0 100%); border-radius:0 8px 8px px 0; right:0; text-align:center; padding-left:25px; margin-right:-7px; border-bottom-left-radius:1px; border-top-left-radius:1px}.home-banner-search .search.hidden { display:none}.primary-menus .left-cont button { height:48px; box-sizing:border-box; min-width:100px; margin-left:-5px; cursor:pointer; color:#fff; font-size:15px; line-height:40px; position:absolute; right:0; top:0; border-radius:1px; padding:0 15px; width:106px; transform:translateY(0px)}.slogan-text.por.fl { margin-left: 200px; text-align: center;}@media screen and (max-width:768px) { #page-wrapper { display:none}}/*首页动态大图结束*/</style><body><!--视频区域--><div id="page-wrapper"> <div> <section> <div> <video poster="img/2f518848202a4.jpg" autoplay="" playsinline="" loop="" muted="" src="v/20220302_homevideo.mp4"> </video> </div> <div> </div> </section> <div style="top: 0;left: 50%;margin-left: -600px;"> <div> <div> <p>图图网-记录生活点滴</p> <a href="" target="_blank"> <i style="background:url(img/hot.svg) no-repeat;"></i> </a> <p> www.jxip.net </p> </div> </div> <div> <div style=" width: 92%; position: unset;transform: translate(1px, 1px);"> <div> <ul> <li 百度 </li> <li Bing </li> <li 站内 </li> <li 站内搜索 </li> <li 头条 </li> <li 知乎 </li> <li 360 </li> </ul> </div> <div> <div> <form id="search_1" action="https://www.baidu.com/s?wd=" method="get" target="_blank"> <input type="text" name="wd" placeholder="不只是你可以调整,我也能 网站累计下载676次"> <button type="submit" name=""> 百度搜索 </button> </form> <form id="search_2" action="https://cn.bing.com/search?q=" method="get" target="_blank"> <input type="text" name="q" placeholder="不只是你可以调整,我也能 网站累计下载676次"> <button type="submit" name=""> Bing搜索 </button> </form> <form id="search_3" action="https://www.jxip.net/?s=" method="get" target="_blank"> <input type="text" name="s"" placeholder="不只是你可以调整,我也能 网站累计下载676次"> <button type="submit" name=""> 站内搜索 </button> </form> <form id="search_4" action="https://www.jxip.net/?s=" method="get" target="_blank"> <input type="text" name="s" placeholder="不只是你可以调整,我也能 网站累计下载676次"> <button type="submit" name=""> 站内搜索 </button> </form> <form id="search_5" action="https://so.toutiao.com/search?dvpf=pc&source=input&keyword=" method="get" target="_blank"> <input type="text" name="query" placeholder="不只是你可以调整,我也能 网站累计下载676次"> <button type="submit" name=""> 头条搜索 </button> </form> <form id="search_6" action="https://www.zhihu.com/search?q=" method="get" target="_blank"> <input type="text" name="q" placeholder="不只是你可以调整,我也能 网站累计下载676次"> <button type="submit" name=""> 知乎搜索 </button> </form> <form id="search_7" action="https://www.so.com/s?q=" method="get" target="_blank"> <input type="text" name="q" placeholder="不只是你可以调整,我也能 网站累计下载676次"> <button type="submit" name=""> 360搜索 </button> </form> <a href="https://www.jxip.net" target="_blank" tips="教程分享" direction="bottom"> <img src="img/rank.svg" height="15"> 热门教程 </a> </div> </div> </div> <p>热搜词：<a href="http://www.jxip.net/?s=关键字 " target="_blank">关键字</a><a href="http://www.jxip.net/?s=苹果 " target="_blank">苹果</a><a href="http://www.jxip.net/?s=图图 " target="_blank">图图</a><a href="http://www.jxip.net/?s=取消 " target="_blank">取消</a></p> <style> p.home-banner-linkss.line-one1 { width: 80%; font-size: 14px; height: 20px; line-height: 20px; color: #fff; text-shadow: 0 2px 4px rgb(0 0 0 / 27%); margin-top: 40px; text-align: center; } </style> <p> 海内存知己，天涯若比邻！ </p> </div> </div> <!-- 头部快速链接导航 --> <div> <div> <div> <!-- 首页搜索左长条重点展示5组 --> <div> <p> <a href="AI资源下载" target="_blank"> <img src="img/2022052806023861.svg" alt="AI模板"> <span>AI资源下载</span> </a> </p> <p> <a href="链接" target="_blank">适量图</a><a href="链接" target="_blank">SVG</a><a href="链接" target="_blank">代码</a> </p> </div><div> <p> <a href="模板源码" target="_blank"> <img src="img/2022052806023997.svg" alt="AE模板"> <span>模板源码</span> </a> </p> <p> <a href="链接" target="_blank">前端</a><a href="链接" target="_blank">框架</a><a href="链接" target="_blank">后台</a> </p> </div><div> <p> <a href="PSD打包下载" target="_blank"> <img src="img/2022052806023928.svg" alt="AE模板"> <span>PSD下载</span> </a> </p> <p> <a href="链接" target="_blank">节日图</a><a href="链接" target="_blank">PSD</a><a href="链接" target="_blank">笔刷</a> </p> </div><div> <p> <a href="素材资源" target="_blank"> <img src="img/2022052806024067.svg" alt="AE模板"> <span>素材资源</span> </a> </p> <p> <a href="链接" target="_blank">超级素材</a><a href="链接" target="_blank">插画</a> </p> </div><div> <p> <a href="视频模板" target="_blank"> <img src="img/2022052806024118.svg" alt="AE模板"> <span>视频模板</span> </a> </p> <p> <a href="链接" target="_blank">会声会影</a><a href="链接" target="_blank">AE视频</a> </p> </div><div> <p> <a href="an下载" target="_blank"> <img src="img/2022052806081780.svg" alt="AE模板"> <span>AN下载</span> </a> </p> <p> <a href="链接" target="_blank">后台</a><a href="链接" target="_blank">自定义</a> </p> </div></div> <div><a rel="nofollow" target="_blank" href="https://www.jxip.net/vips"> <img src="img/2022052806005474.svg" alt="会员下载"> <p> 会员下载 </p> </a><a rel="nofollow" target="_blank" href="https://www.jxip.net/vips"> <img src="img/2022052806005337.svg" alt="开通VIP"> <p> 开通VIP </p> </a> </div> </div> </div> </div></div></div></div></div><script>/*首页动态大图搜索开始*/(function($){ var m=$(".primary-menus"); if(m.length<1) return; var ul=m.find(".selects"); if(ul.length<1) return; var lis=ul.children("li"); if(lis.length<1) return; var s=m.find(".search"); var sVal=s.find(".s").val(); lis.on("click",function () { var d=$(this).attr("data-target"); if (d) { lis.removeClass("current"); $(this).addClass("current"); s.addClass("hidden"); s.filter("#"+d).removeClass("hidden"); //s.filter("#"+d).find(".s").val(""); s.filter("#"+d).find(".s").trigger("focusin"); } }); s.find(".s").on("focusin",function () { if ($(this).val()==sVal) { $(this).val(""); } }) s.find(".s").on("focusout",function () { var v=$(this).val(); if (orz.isEmpty(v)) { v=sVal; } s.find(".s").val(v); })})(jQuery);</script><!--首页动态大图搜索结束--></body></html>[/content_hide]