Skip to content

Commit 33808f3

Browse files
CommandstoneCommandstone
authored
Create mv.html
1 parent 0363e02 commit 33808f3

File tree

1 file changed

+198
-0
lines changed

1 file changed

+198
-0
lines changed

‎mv/mv.html‎

Lines changed: 198 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
1+
<!DOCTYPE html>
2+
<html lang="zh-CN">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>CST视频</title>
7+
<style>
8+
:root {
9+
--gold: #FFD700;
10+
--green: #7CFC00;
11+
--transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
12+
}
13+
14+
body {
15+
margin: 0;
16+
padding: 2rem;
17+
min-height: 100vh;
18+
background: linear-gradient(135deg, var(--gold) 0%, var(--green) 100%);
19+
font-family: 'Segoe UI', system-ui, sans-serif;
20+
display: flex;
21+
flex-direction: column;
22+
align-items: center;
23+
}
24+
25+
.header {
26+
text-align: center;
27+
margin-bottom: 3rem;
28+
color: #2c3e50;
29+
animation: fadeIn 1s ease;
30+
}
31+
32+
.tool-grid {
33+
display: grid;
34+
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
35+
gap: 2rem;
36+
width: 100%;
37+
max-width: 1200px;
38+
}
39+
40+
.tool-card {
41+
background: rgba(255, 255, 255, 0.95);
42+
padding: 2rem;
43+
border-radius: 20px;
44+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
45+
transition: var(--transition);
46+
cursor: pointer;
47+
transform-style: preserve-3d;
48+
position: relative;
49+
overflow: hidden;
50+
}
51+
52+
.tool-card:hover {
53+
transform: translateY(-10px) rotateX(5deg) rotateY(-5deg);
54+
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
55+
}
56+
57+
.tool-card::before {
58+
content: '';
59+
position: absolute;
60+
top: 0;
61+
left: -100%;
62+
width: 200%;
63+
height: 100%;
64+
background: linear-gradient(
65+
90deg,
66+
transparent,
67+
rgba(255, 255, 255, 0.4),
68+
transparent
69+
);
70+
transition: var(--transition);
71+
}
72+
73+
.tool-card:hover::before {
74+
left: 100%;
75+
}
76+
77+
.card-icon {
78+
font-size: 3rem;
79+
margin-bottom: 1rem;
80+
color: var(--green);
81+
transition: var(--transition);
82+
}
83+
84+
.card-title {
85+
color: #2c3e50;
86+
margin: 0 0 1rem;
87+
font-size: 1.5rem;
88+
}
89+
90+
.card-description {
91+
color: #666;
92+
line-height: 1.6;
93+
margin-bottom: 1.5rem;
94+
}
95+
96+
.launch-button {
97+
background: var(--green);
98+
color: white;
99+
border: none;
100+
padding: 12px 24px;
101+
border-radius: 30px;
102+
cursor: pointer;
103+
transition: var(--transition);
104+
display: inline-flex;
105+
align-items: center;
106+
gap: 8px;
107+
}
108+
109+
.launch-button:hover {
110+
background: var(--gold);
111+
transform: translateX(10px);
112+
}
113+
114+
@keyframes fadeIn {
115+
from { opacity: 0; transform: translateY(20px); }
116+
to { opacity: 1; transform: translateY(0); }
117+
}
118+
119+
@media (max-width: 768px) {
120+
body {
121+
padding: 1rem;
122+
}
123+
124+
.tool-card {
125+
padding: 1.5rem;
126+
}
127+
}
128+
</style>
129+
</head>
130+
<body>
131+
<div class="header">
132+
<h1>💻 视频</h1>
133+
<p>选择你要看的视频</p>
134+
</div>
135+
136+
<div class="tool-grid">
137+
<div class="tool-card" onclick="openTool('xg')">
138+
<div class="card-icon">🌠</div>
139+
<h3 class="card-title">星轨</h3>
140+
<p class="card-description">来自b站改编</p>
141+
<button class="launch-button">立即观看 →</button>
142+
</div>
143+
144+
<div class="tool-card" onclick="openTool('404')">
145+
<div class="card-icon">🈳️</div>
146+
<h3 class="card-title">敬请期待</h3>
147+
<p class="card-description">空空如也</p>
148+
<button class="launch-button">立即观看 →</button>
149+
</div>
150+
151+
<div class="tool-card" onclick="openTool('404')">
152+
<div class="card-icon">🈳️</div>
153+
<h3 class="card-title">敬请期待</h3>
154+
<p class="card-description">空空如也</p>
155+
<button class="launch-button">立即观看 →</button>
156+
</div>
157+
158+
<div class="tool-card" onclick="openTool('404')">
159+
<div class="card-icon">🈳️</div>
160+
<h3 class="card-title">敬请期待</h3>
161+
<p class="card-description">空空如也</p>
162+
<button class="launch-button">立即观看 →</button>
163+
</div>
164+
165+
<div class="tool-card" onclick="openTool('404')">
166+
<div class="card-icon">🈳️</div>
167+
<h3 class="card-title">敬请期待</h3>
168+
<p class="card-description">空空如也</p>
169+
<button class="launch-button">立即观看 →</button>
170+
</div>
171+
172+
<div class="tool-card" onclick="openTool('404')">
173+
<div class="card-icon">🈳️</div>
174+
<h3 class="card-title">敬请期待</h3>
175+
<p class="card-description">空空如也</p>
176+
<button class="launch-button">立即观看 →</button>
177+
</div>
178+
</div>
179+
180+
<script>
181+
function openTool(toolName) {
182+
const toolTitles = {
183+
xg: "🌠星轨",
184+
404: "神秘的页面"
185+
};
186+
187+
alert(`正在加载 ${toolTitles[toolName]}...`);
188+
window.location.href = `/mv/${toolName}.html`;
189+
}
190+
191+
// 添加卡片入场动画
192+
document.querySelectorAll('.tool-card').forEach((card, index) => {
193+
card.style.animation = `fadeIn 0.5s ease ${index * 0.1}s forwards`;
194+
card.style.opacity = 0;
195+
});
196+
</script>
197+
</body>
198+
</html>

0 commit comments

Comments
 (0)