via 美化 css

[css]代码库

自定义css
body {
background-position:top center;
background-size: 100% auto;
}
/* 展示内容整体 */
#content {
position: fixed;
/* top可以调节显示内容距离手机顶部的距离 */
top: 自适应px;
}
/* 搜索框 */
.search_bar {
/* 阴影效果 */
box-shadow: 0 0 5px rgba(70,70,40,0.255);
/* 模糊效果 */
backdrop-filter: blur(5px);
/* 背景色 */
background-color: rgba(255,255,255,.100);
/* 圆角 */
border-radius: 15px;
display: table;
/* 宽度 */
width: 85%;
/* 高度 */
height: 30px;
max-width: 400px;
margin: 20px auto;
text-align:center;
font-size:30px;
border:1;
outline:none;
font-weight:560;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
animation:search-bar 1s;
}
/* 搜索框的动画 */
@keyframes search-bar {
0% {max-width: 100px;}
100% {max-width: 400px;}
}

/* 用于设置搜索时的词条联想框 */
.bdSug_wpr {
border-radius:15px 15px 15px 15px;
border:0 none #FFFFFF !important;
border-top:10px solid transparent !important;
background: rgba(22,203,204,.2) !important;
backdrop-filter: blur(25px);
transform: translate(-22%,-310px);
width:88% !important;
min-height:246px !important;
height:230px !important;
}

#content {
position: fixed;
top: 150px;
}

.search_bar{
width:85%;
transition: all .4s ease-out;
}

.search_bar:focus-within{
width:90%;
transition: all .4s ease-out;
}
.search_bar{
backdrop-filter: blur(25px);width: 80%;}

#content:focus-within {
/*调节输入框向下移动的距离*/
transform: translateY(128px) !important;
}

#content {
transform: translateY(0);
transition: transform .4s;
}

.search_part:focus-within > .logo, .search_part:focus-within~#bookmark_part{
opacity:0;
visibility:hidden;
transition: all .4s ease-out;
}

.logo,#bookmark_part {
opacity:1;
visibility:visible;
transition: all .4s ease-out;
}

.bdSug_wpr td {
transform: translate(1%,-15%);
font-size:14.5px !important;}

/*搜索按钮*/
.search.icon {
color:grey;
}

:root{
--submitmove:74vw;/*搜索按钮出现位置*/
}

#search_submit{
position:absolute !important;
display:block !important;
left:80vw;
opacity:0;
transition: all .4s ease-out;
}

.search_bar:focus-within > #search_submit{
left:var(--submitmove);
opacity:1;
transition: all .4s ease-out;