Skip to content

Commit 82fac98

Browse files
Developer09264Developer09264
committed
updated
1 parent d8f3727 commit 82fac98

3 files changed

Lines changed: 82 additions & 37 deletions

File tree

‎assets/css/styles.css‎

Lines changed: 81 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,47 @@
1-
body {
1+
/* body {
22
margin: 0;
33
padding: 0;
44
overflow: auto;
5-
}
5+
} */
6+
/* 动态背景 */
7+
@keyframes pearl-shimmer {
8+
0% {
9+
background-position: 0% 50%;
10+
}
611

7-
html {
8-
scroll-behavior: smooth;
9-
}
12+
50% {
13+
background-position: 100% 50%;
14+
}
1015

11-
@font-face {
12-
font-family: 'Genshin Font';
13-
src: url('../fonts/hk4e_zh-cn.ttf') format('truetype');
16+
100% {
17+
background-position: 0% 50%;
18+
}
1419
}
1520

16-
/* @media (max-width: 768px) {
17-
.title {
18-
font-size: 32px;
19-
}
21+
body {
22+
margin: 0;
23+
padding: 0;
24+
min-height: 100vh;
25+
background: linear-gradient(135deg,
26+
rgb(255, 220, 220) 0%,
27+
rgba(220,220,255) 25%,
28+
rgba(220,225,220) 50%,
29+
rgba(255,220,220) 75%,
30+
rgba(220,220,225) 100%);
31+
background-size: 400% 400%;
32+
animation: pearl-shimmer 20s ease infinite;
33+
font-family: 'Segoe UI', sans-serif;
34+
}
2035

21-
.quote {
22-
font-size: 18px;
23-
}
24-
} */
36+
html {
37+
scroll-behavior: smooth;
38+
}
2539

2640
.welcome-page {
2741
position: relative;
2842
width: 100%;
2943
height: 100vh;
30-
background-color: #51174b;
31-
/* background-image: url('https://telegraph-image-b60.pages.dev/file/924c7fd134a587655d38e.jpg');
32-
background-size: 100% auto;
33-
background-position: top center; */
34-
color: #fff;
44+
color: #391d45;
3545
}
3646

3747
.content {
@@ -92,8 +102,6 @@ html {
92102
padding: 0;
93103
}
94104

95-
96-
97105
#back-to-top {
98106
position: fixed;
99107
bottom: -50px;
@@ -107,7 +115,7 @@ html {
107115
height: 50px;
108116
font-size: 24px;
109117
cursor: pointer;
110-
transition: opacity 0.5s ease, background-color 0.5s ease, bottom 0.5s ease;
118+
transition: box-shadow 0.5s ease, opacity 0.5s ease, background-color 0.5s ease, bottom 0.5s ease;
111119
text-align: center;
112120
line-height: 50px;
113121
opacity: 0;
@@ -119,6 +127,7 @@ html {
119127
#back-to-top:hover {
120128
background-color: #8a297f;
121129
opacity: 1;
130+
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
122131
}
123132

124133
#back-to-top.show {
@@ -138,41 +147,79 @@ html {
138147
transition: opacity 0.5s;
139148
background-color: #d6d6d695;
140149
display: flex;
141-
justify-content: space-between;
150+
/* justify-content: space-between; */
142151
align-items: center;
143152
padding: 0 20px;
144153
box-sizing: border-box;
145154
z-index: 1;
155+
border-bottom-right-radius: 10px;
156+
border-bottom-left-radius: 10px;
146157
}
147158

148159
#navbar.show {
149160
opacity: 1;
150161
pointer-events: auto;
162+
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
151163
}
152164

153-
.about-button {
165+
.logo {
154166
position: absolute;
155-
right: 20px;
167+
left: 20px;
168+
padding: 10px 20px;
169+
color: #8a297f;
170+
font-size: 50px;
171+
text-decoration: none;
172+
border-radius: 5px;
173+
transition: background-color 0.3s;
174+
}
175+
176+
/* Dropdown styles */
177+
.dropdown {
178+
margin-left: auto;
179+
/* 推向右端 */
180+
}
181+
182+
.dropdown-btn {
156183
padding: 10px 20px;
157184
background-color: #d6d6d695;
158185
color: #fff;
159186
text-decoration: none;
160187
border-radius: 5px;
161188
transition: background-color 0.3s;
189+
cursor: pointer;
190+
border: none;
191+
font-size: inherit;
192+
font-family: inherit;
162193
}
163194

164-
.about-button:hover {
195+
.dropdown-btn:hover {
165196
background-color: #8a407f;
166197
}
167198

168-
.logo {
199+
.dropdown-content {
200+
display: none;
169201
position: absolute;
170-
left: 20px;
171-
padding: 10px 20px;
172-
/* background-color: #8a407f; */
202+
right: 0;
203+
background-color: #f9f9f9;
204+
min-width: 160px;
205+
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
206+
z-index: 1;
207+
border-radius: 5px;
208+
overflow: hidden;
209+
}
210+
211+
.dropdown-content a {
173212
color: #8a297f;
174-
font-size: 50px;
213+
padding: 12px 16px;
175214
text-decoration: none;
176-
border-radius: 5px;
215+
display: block;
177216
transition: background-color 0.3s;
217+
}
218+
219+
.dropdown-content a:hover {
220+
background-color: #f2e3f6;
221+
}
222+
223+
.dropdown:hover .dropdown-content {
224+
display: block;
178225
}

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -215,7 +215,7 @@
215215

216216
<body>
217217
<div id="navbar">
218-
<a href="./index.html" class="logo">田语</a>
218+
<a href="./neoindex.html" class="logo">田语</a>
219219
<div class="dropdown">
220220
<button class="dropdown-btn">关于</button>
221221
<div class="dropdown-content">

‎neoindex.html‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,7 @@
1616

1717
<body>
1818
<div id="navbar">
19-
<div class="brand">
2019
<a href="./index.html" class="logo">田语</a>
21-
</div>
2220
<div class="dropdown">
2321
<button class="dropdown-btn">关于</button>
2422
<div class="dropdown-content">

0 commit comments

Comments
 (0)