1、前言

  用久了变想换一种样式,遂记录一下,以便以后再看。

2、效果展示

点击查看最终效果图

3、代码记录

1
2
3
4
5
<a class="logo"; href="folder://">
< img class="logoL" src="file:///storage/emulated/0/Android/data/mark.via/files/content/L.png" width="65px" height="100px"/>
< img class="logoC" src="file:///storage/emulated/0/Android/data/mark.via/files/content/logo.png" width="100px" height="100px"/>
< img class="logoR" src="file:///storage/emulated/0/Android/data/mark.via/files/content/R.png" width="60px" height="100px"/>
<script>document.title = '从前有个人爱你很久'</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
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