![图片[1]-B2主题首页搜索框背景自动换图美化代码-IDC之家](https://9ee-net.oss-cn-guangzhou.aliyuncs.com/2025/09/20250927043303198760.webp?x-oss-process=image/auto-orient,1/quality,q_90/format,webp)
html代码
代码放到模块管理-自定义-铺满窗口或者同宽
<div class="" style="width:100%"><div class="home-row-left content-area "><div id="html-box-shou-suo" class="html-box"><style type="text/css">
.mg-b {
margin-bottom: -0px;
}
</style>
<div id="home-row-shyetop" class=" home_row home_row_0 module-html " style="background-color:;">
<div class="" style="width:100%">
<div class="home-row-left content-area ">
<div id="html-box-shyetop" class="html-box">
<div id="banner_wave_1"></div>
<div id="banner_wave_2"></div>
<div class="user-banner mian-bgcolor wow bounceInUp animated"
style="visibility: visible; animation-name: bounceInUp;">
<div class="container xs-1">
<div class="ubanner-ctn col80">
<h2></h2>
<div id="main-wrap-box">
<div id="main-wrap">
<div id="content-wrap">
<form action="" method="GET" target="_blank" id="searchForm">
<input id="search" type="text" placeholder="请输入关键词搜索" autocomplete="off"
autofocus="">
<div id="search-type"> <span id="search-type-name">站内搜索</span>
<div id="search-type-icon" style="transform: rotate(0deg);"></div>
<ul id="search-type-menu" style="display: none;">
<li data-engine-start="https://www.xiaohulizyw.com/?s="
data-engine-end=""><img
src="/img/fe99049cf99d5.png"><span>站内搜索</span>
</li>
</ul>
</div>
<input type="submit" id="search-btn" value="">
</form>
<div class="searchTag"> <span><i class="b2font b2-hot"></i>热门推荐：</span> <a
class="s-video" title="小狐狸资源屋-分享互联网资源"
href="https://www.xiaohulizyw.com/?s=美化" target="_blank">美化</a> <a
class="s-video" title="小狐狸资源屋-分享互联网资源"
href="https://www.xiaohulizyw.com/?s=Xposed" target="_blank">Xposed</a> <a
class="s-video" title="小狐狸资源屋-分享互联网资源"
href="https://www.xiaohulizyw.com/?s=青龙" target="_blank">青龙</a> <a
class="s-video" title="小狐狸资源屋-分享互联网资源"
href="https://www.xiaohulizyw.com?s=教程" target="_blank">教程</a>
<a class="s-video" title="小狐狸资源屋-分享互联网资源"
href="www.xiaohulizyw.com/post-category/webcode/wzym" target="_blank">建站源码</a> <a
class="s-video" title="小狐狸资源屋-分享互联网资源"
href="https://www.xiaohulizyw.com/?s=wordpress"
target="_blank">wordpress</a>
</div>
<div id="movie-wrap">
<a id="movie-img-a" href="" target="_blank"></a>
<a id="movie-information" href="" target="_blank"></a>
<a id="movie-name" href="" target="_blank"></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div></div>
</div>
</div>
<link rel="stylesheet" href="/css/sousou.css">
<script type="text/javascript" src="/css/sousou.js"></script>
css代码:
[content_hide]
.user-banner {
background: #1d1f20;
background: url(https://www.dmoe.cc/random.php) no-repeat;
position: relative;
overflow: hidden;
width: 100%;
height: 600px;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
padding-top: 20px
}
.user-banner:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: inline-block;
background: #221f1f;
background: -moz-linear-gradient(left, rgba(34, 31, 31, 1) 0%, rgba(34, 31, 31, .4) 100%);
background: -webkit-linear-gradient(left, rgba(34, 31, 31, 1) 0%, rgba(34, 31, 31, .4) 100%);
background: linear-gradient(to right, rgba(34, 31, 31, 1) 0%, rgba(34, 31, 31, .4) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#221f1f', endColorstr='#66221f1f', GradientType=1)
}
.container {
padding: 0;
margin: 0 auto;
max-width: 1250px;
}
.ubanner-ctn {
margin: 110px auto 30px auto;
position: relative;
z-index: 1
}
.col80 {
width: 80%
}
.ubanner-ctn h2 {
text-align: center;
color: #fff;
font-size: 46px;
font-weight: 600;
margin-bottom: 65px;
letter-spacing: 1px;
text-shadow: 0 3px 6px rgba(0, 0, 0, .2)
}
.user-banner:after {
animation: myfirst 250s;
-webkit-animation: myfirst 250s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite
}
.user-banner:after {
content: "";
width: 100%;
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: url(../img/50136295d36c3.png) repeat-y top center;
background-size: auto;
height: 8888px;
opacity: .3
}
@keyframes myfirst {
from {
left: 0;
top: 10px
}
to {
top: -8000px
}
}
@-webkit-keyframes myfirst {
from {
left: 0;
top: 10px
}
to {
top: -8000px
}
}
@media (max-width:768px) {
.xs-1 {
overflow: unset !important
}
.ubanner-ctn h2 {
margin-bottom: 30px !important
}
.container {
padding: 0;
margin: 0 auto;
max-width: 1200px
}
.container {
width: 1200px
}
.ubanner-ctn h2 {
text-align: center;
color: #fff;
font-size: 22px;
font-weight: 600;
margin-bottom: 30px;
text-shadow: 0 3px 6px rgba(0, 0, 0, .2)
}
.user-banner {
height: 230px;
padding-top: 30px;
position: relative;
overflow: inherit
}
.ubanner-ctn {
margin: 10px auto 30px auto;
position: relative;
z-index: 1;
width: 90%
}
.user-banner:after {
content: "";
width: 100%;
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: url(../img/50136295d36c3.png) repeat-y top center;
background-size: 99%;
height: 100%;
opacity: .3
}
}
#main-wrap-box {
display: flex;
justify-content: center;
align-items: center;
color: #f4e5b3
}
#main-wrap {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: flex-start
}
#content-wrap {
display: flex;
flex-flow: column nowrap;
align-items: flex-end;
justify-content: space-between
}
#searchForm {
margin: 0;
padding: 0;
width: 80%;
height: 50px;
min-width: 700px;
border-bottom: 1px solid #666;
display: flex;
justify-content: space-between;
align-items: center
}
#search {
flex: 1;
border: 0 none;
background: 0 0;
outline: none;
margin-right: 20px;
color: #f4e5b3;
font-size: 16px;
text-indent: 2em
}
:-moz-placeholder {
color: #f4e5b3;
opacity: .3
}
::-moz-placeholder {
color: #f4e5b3;
opacity: .3
}
#search:-ms-input-placeholder {
color: #f4e5b3;
opacity: .3
}
#search::-webkit-input-placeholder {
color: #f4e5b3;
opacity: .3
}
#search-type {
display: flex;
cursor: pointer;
align-items: center;
position: relative;
height: 100%;
user-select: none;
-ms-user-select: none
}
#search-type:hover #search-type-name {
opacity: 1
}
#search-type-name {
margin: 0 5px 0 0;
opacity: .5;
transition: all .3s
}
#search-type-icon {
width: 10px;
height: 10px;
background: url(../img/1324cb407ca35.png) no-repeat;
background-size: cover;
background-position: center;
transition: all .3s;
opacity: .5
}
#search-type-menu {
list-style: none;
position: absolute;
left: 50%;
top: 60px;
transform: translateX(-50%);
border-radius: 4px;
border: 1px solid #f4e5b3;
background-color: rgba(0, 0, 0, .8);
padding: 0;
margin: 0;
overflow: hidden;
display: none;
z-index: 4
}
#search-type-menu li {
list-style: none;
padding: 0;
margin: 0;
display: flex;
align-items: center;
flex-flow: row nowrap;
transition: all .5
}
#search-type-menu li:hover {
background-color: rgba(244, 229, 179, .1) !important
}
#search-type-menu li:nth-of-type(2n) {
background-color: rgba(0, 0, 0, .1)
}
#search-type-menu img {
width: 20px;
height: 20px;
margin: 5px 10px
}
#search-type-menu span {
white-space: nowrap;
margin: 0 30px 0 0
}
#search-btn {
padding: 10px 0 10px 10px;
width: 30px;
height: 30px;
margin: 0 0 0 20px;
background: url(../img/fe99049cf99d5.png) no-repeat;
background-size: cover;
background-position: center;
border: none;
cursor: pointer;
user-select: none;
-ms-user-select: none;
transition: all .2s;
outline: none
}
.searchTag {
letter-spacing: .5px;
text-align: center;
margin-top: 30px;
font-size: 14px;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 700px
}
.searchTag span {
display: inline-block;
transform: translateY(-1px)
}
.searchTag a {
margin-right: 15px;
color: #909399
}
.searchTag a:hover {
color: #fff
}
.searchTag i {
color: #ffbc32;
margin-right: 2px;
display: inline-block;
transform: translateY(1px)
}
@media screen and (max-width:768px) {
#main-wrap {
width: 100%
}
#content-wrap {
width: 100%
}
#searchForm {
min-width: 350px;
border-bottom: 0px solid #fff;
}
.searchTag {
min-width: 100px !important
}
.container {
width: 100%;
margin: 0 auto;
position: relative;
overflow: hidden;
*zoom: 1
}
}
/*#banner_wave_1 {*/ /* width: auto;*/ /* height: 65px;*/ /* background: url(../img/bb2dac96f12dc.png) repeat-x;*/ /* _filter: alpha(opacity=80);*/ /* position: absolute;*/ /* bottom: 0;*/ /* width: 100%;*/ /* left: -236px;*/ /* z-index: 1;*/ /* opacity: 1;*/ /* transiton-property: opacity, bottom;*/ /* transition-duration: .4s, .4s;*/ /* animation-name: move2;*/ /* animation-duration: 240s;*/ /* animation-fill-mode: backwards;*/ /* animation-timing-function: linear;*/ /* animation-iteration-count: infinite;*/ /* top: 537px;*/ /*}*/ #banner_wave_1 {
/*width: auto;*/ height: 65px;
background: url(../img/bb2dac96f12dc.png) repeat-x;
/*_filter: alpha(opacity=80);*/ position: absolute;
bottom: 0;
width: 400%;
left: -236px;
z-index: 1;
opacity: 1;
/*transiton-property: opacity, bottom;*/ transition-duration: .4s, .4s;
animation-name: move2;
animation-duration: 240s;
animation-fill-mode: backwards;
animation-timing-function: linear;
animation-iteration-count: infinite;
top: 537px;
}
#banner_wave_2 {
/*width: auto;*/ height: 80px;
background: url(../img/8151cbbe7392d.png) repeat-x;
/*_filter: alpha(opacity=80);*/ position: absolute;
bottom: 0;
width: 400%;
left: 0;
z-index: 1;
opacity: 1;
/*transiton-property: opacity, bottom;*/ transition-duration: .4s, .4s;
animation-name: move2;
animation-duration: 160s;
animation-fill-mode: backwards;
animation-timing-function: linear;
animation-iteration-count: infinite;
top: 537px;
}
/* move1锟斤拷move2锟脚拷锟斤拷鍔拷锟界瓭锟斤拷锟介悮锟斤拷鍙凤拷锟斤拷锟界祬鍑︼拷锟斤拷锟斤拷鍠濓拷锟斤拷 *//* 缇冣墻锟斤拷缇岄牭锟斤拷锟斤拷锟斤拷锟介悮锟斤拷闅欙拷锟斤拷锟界緦闋碉拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷銉拷锟斤拷缃╋拷Chrome缇冿紴锟界畽锟斤拷锟斤拷锟斤拷*/ @keyframes move1 {
100% {
background-position: 100% 0;
}
}
@keyframes move2 {
100% {
background-position: -100% 0;
}
}
div #html-box-sydhls {
z-index: 2;
}
.ubanner-ctn h2 {
text-align: center;
color: #fff;
font-size: 46px;
font-weight: 600;
margin-bottom: 65px;
letter-spacing: 1px;
text-shadow: 0 3px 6px rgba(0, 0, 0, .2);
background: url(../img/ff913110e3132.png) repeat #011F42;
background-size: 300px auto;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
-webkit-background-clip: text;
background-clip: text;
-webkit-animation: background 12s infinite linear;
animation: background 12s infinite linear;
}
@-webkit-keyframes background {
from {
background-position: 0 0%;
}
to {
background-position: 0 -300px;
}
}
@keyframes background {
from {
background-position: 0 0%;
}
to {
background-position: 0 -300px;
}
}
[/content_hide]
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
暂无评论内容