图片展示

教程开始

/* 搜索框小人 */
form.navbar-form.navbar-left.hover-show {
flex: 1 auto;
position: relative;
margin: 5px auto;
min-width: 180px;
max-width: 225px;
left: 0;
right: 0
}
.form-group.relative.dropdown::before {
content: '';
background: url(https://blog.zbiwl.com/image/5.gif);
width: 41px;
height: 37px;
background-size: cover;
transition: .5s;
margin-left: -40px
}
form.navbar-form.navbar-left.hover-show:hover .form-group.relative.dropdown::before {
margin-left: -3px;
transition: 300ms
}
.form-group.relative.dropdown {
opacity: .8;
display: flex;
width: 100%;
border-radius: 17px;
background: var(--main-bg-color);
border: .1px solid #bebebe;
height: 40px;
overflow: hidden
}
.form-group.relative.dropdown:hover {
opacity: 1
}
.form-control:focus {
box-shadow: 0 0 0px 0px var(--focus-shadow-color);
border: 1px solid #fff00000
}
.form-control:hover {
border: 1px solid #fff00000
}
input.form-control.search-input.focus-show {
background: var(--main-bg-color);
flex: 1;
border-radius: 8px;
transition: 0s;
height: inherit;
width: 100%
}
.header button.null svg.icon {
color: var(--key-color);
}