Skip to content

Commit a83dae9

Browse files
yequanruiyequanrui
committed
update
1 parent 0d5f032 commit a83dae9

File tree

3 files changed

+1438
-0
lines changed

3 files changed

+1438
-0
lines changed

‎动态主题切换.html‎

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>动态主题切换</title>
7+
<style>
8+
:root {
9+
--quote-font: 'Georgia', serif;
10+
--quote-font-size: clamp(16px, 1vw, 14px);
11+
--quote-line-height: 1.5;
12+
--quote-padding: 4vw;
13+
--quote-border-width: 8px;
14+
--quote-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
15+
--quote-letter-spacing: 1px;
16+
}
17+
.theme-switcher {
18+
margin-bottom: 20px;
19+
}
20+
.theme-switcherlabel {
21+
font-weight: bold;
22+
margin-right: 10px;
23+
}
24+
.theme-switcherselect {
25+
padding: 5px 10px;
26+
font-size: 16px;
27+
}
28+
.inspiring-quote {
29+
font-family: var(--quote-font);
30+
font-size: var(--quote-font-size);
31+
line-height: var(--quote-line-height);
32+
max-width: 500px;
33+
margin: 40px auto;
34+
padding: var(--quote-padding);
35+
position: relative;
36+
text-align: center;
37+
display: flex;
38+
flex-direction: column;
39+
align-items: center;
40+
opacity: 0;
41+
animation: fadeIn 1.2s ease-in-out forwards;
42+
transition: all 0.5s ease-in-out;
43+
}
44+
.inspiring-quotep::before,
45+
.inspiring-quotep::after {
46+
font-size: clamp(16px, 1vw, 14px);
47+
font-weight: bold;
48+
position: absolute;
49+
}
50+
.inspiring-quotep::before {
51+
content: '“';
52+
left: -10px;
53+
top: -30px;
54+
}
55+
.inspiring-quotep::after {
56+
content: '”';
57+
right: -10px;
58+
bottom: -30px;
59+
}
60+
.inspiring-quotep {
61+
margin: 0;
62+
padding: 2vw;
63+
display: inline-block;
64+
position: relative;
65+
font-style: italic;
66+
font-weight: 400;
67+
max-width: 90%;
68+
text-align: center;
69+
}
70+
.inspiring-quotecite {
71+
display: block;
72+
font-size: clamp(16px, 1vw, 14px);
73+
font-weight: bold;
74+
margin-top: 1vw;
75+
text-transform: uppercase;
76+
letter-spacing: var(--quote-letter-spacing);
77+
font-style: normal;
78+
}
79+
.patriotic-theme {
80+
color: #43426b;
81+
background: #faf8f1;
82+
border-left: var(--quote-border-width) solid #43426b;
83+
box-shadow: var(--quote-shadow);
84+
}
85+
.patriotic-themep::before,
86+
.patriotic-themep::after {
87+
color: #b3495d;
88+
}
89+
.classic-theme {
90+
color: #333;
91+
background: #f9f9f9;
92+
border-left: var(--quote-border-width) solid #2c3e50;
93+
box-shadow: var(--quote-shadow);
94+
}
95+
.dark-theme {
96+
color: #fff;
97+
background: #2c3e50;
98+
border-left: var(--quote-border-width) solid #f1c40f;
99+
box-shadow: var(--quote-shadow);
100+
}
101+
.gold-theme {
102+
color: #333;
103+
background: #fef7e5;
104+
border-left: var(--quote-border-width) solid #d4a017;
105+
box-shadow: var(--quote-shadow);
106+
}
107+
.ocean-theme {
108+
color: #014f86;
109+
background: #e3f2fd;
110+
border-left: var(--quote-border-width) solid #0288d1;
111+
box-shadow: var(--quote-shadow);
112+
}
113+
.minimalist-quotes-theme {
114+
color: #000;
115+
background: transparent;
116+
border-left: none;
117+
box-shadow: none;
118+
}
119+
@keyframes fadeIn {
120+
from {
121+
opacity: 0;
122+
transform: translateY(10px);
123+
}
124+
to {
125+
opacity: 1;
126+
transform: translateY(0);
127+
}
128+
}
129+
@media (max-width: 768px) {
130+
:root {
131+
--quote-padding: 6vw;
132+
}
133+
.inspiring-quote {
134+
padding: var(--quote-padding);
135+
}
136+
.inspiring-quotep {
137+
font-size: clamp(20px, 4vw, 30px);
138+
}
139+
.inspiring-quotep::before,
140+
.inspiring-quotep::after {
141+
font-size: clamp(50px, 6vw, 70px);
142+
}
143+
.inspiring-quotecite {
144+
font-size: clamp(16px, 1.8vw, 22px);
145+
}
146+
}
147+
body {
148+
font-family: sans-serif;
149+
text-align: center;
150+
background-color: #eee;
151+
padding: 20px;
152+
margin-top: 35px;
153+
}
154+
</style>
155+
</head>
156+
<body>
157+
<div class="theme-switcher">
158+
<label for="theme">Choose a Theme:</label>
159+
<select id="theme">
160+
<option value="patriotic-theme">Patriotic</option>
161+
<option value="classic-theme">Classic</option>
162+
<option value="dark-theme">Dark</option>
163+
<option value="gold-theme">Gold Elegance</option>
164+
<option value="ocean-theme">Ocean Breeze</option>
165+
<option value="minimalist-quotes-theme">Minimalist</option>
166+
</select>
167+
</div>
168+
<blockquote class="inspiring-quote patriotic-theme">
169+
<p>It’s not about being the best. It’s about being better than you were yesterday.</p>
170+
<cite>Hardy</cite>
171+
</blockquote>
172+
<script>
173+
document.getElementById('theme').addEventListener('change', function () {
174+
const quoteBlock = document.querySelector('.inspiring-quote');
175+
quoteBlock.className = 'inspiring-quote ' + this.value;
176+
});
177+
</script>
178+
</body>
179+
</html>

0 commit comments

Comments
 (0)