Via浏览器美化代码记录
02/18
本文最后更新于
2023年03月05日，已超过
200天没有更新。如果文章内容或图片资源失效，请留言反馈，我会及时处理，谢谢！
1、前言
用久了变想换一种样式，遂记录一下，以便以后再看。
2、效果展示
点击查看最终效果图
3、代码记录
天地浩瀚无尽头，等待回复如此久，望眼欲穿心如悬，期待佳音回复至。
body {
background-position:top center;
background-size: 100% auto;
}
/* 展示内容整体 */
#content {
position: fixed;
/* top可以调节显示内容距离手机顶部的距离 */
top: 150px;
}
/* 搜索框 */
.search_bar {
box-shadow: 0 0 18px rgba(70,70,40,0.25);
backdrop-filter: blur(5px);
background-color: rgba(255,255,255,.1);
border-radius: 20px;
display: table;
width: 74%;
height: 30px;
max-width: 400px;
margin: 10px auto;
text-align:center;
font-size:30px;
border:0;
outline:none;
font-weight:560;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
animation:search-bar 1s;
}
/* 搜索框的动画 */
@keyframes search-bar {
0% {max-width: 100px;}
100% {max-width: 400px;}
}
/* 收藏区的动画 */
@keyframes box-container{
0% {max-width: 100px;}
100% {max-width: 400px;}
}
/* 用于设置搜索时的词条联想框 */
.bdSug_wpr {
border:0px none #FFFFFF !important;
border-top:11px solid transparent !important;
background: rgba(255,255,255,0.2) !important;
backdrop-filter: blur(11px);
width: 71.5% !important;
left: 52px!important;
}
.bdSug_wpr td {
background: transparent !important;
color:#FFF;
}
.logoL {
position: absolute;
left: 0;
top: 110px;
opacity: 0.85;
}
.logoC {
position: relative;
opacity: 0.7;
}
.logoR {
position: absolute;
right: 0;
top: 110px;
opacity: 0.85;
}4、图片存档
PS：图标包地址栏输入v://skins
