Skip to content

Commit f6b1dd0

Browse files
minorcellminorcell
committed
feat: replace static images with videos in TwelveOrderStars, enhance CSS for video styling and hover effects
1 parent 4b5fd7d commit f6b1dd0

8 files changed

Lines changed: 78 additions & 71 deletions

File tree

‎assets/videos/TwelveOrderStars/part01.mp4‎

4.79 MB
Binary file not shown.

‎assets/videos/TwelveOrderStars/part02.mp4‎

2.32 MB
Binary file not shown.

‎assets/videos/TwelveOrderStars/part03.mp4‎

3.75 MB
Binary file not shown.

‎assets/videos/TwelveOrderStars/part04.mp4‎

4.48 MB
Binary file not shown.

‎assets/videos/TwelveOrderStars/part05.mp4‎

3.4 MB
Binary file not shown.

‎pages/TwelveOrderStars.html‎

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -47,39 +47,54 @@ <h4 class="detail">发射地点：酒泉卫星发射基地</h4>
4747
<div class="line"></div>
4848
<div class="name">火箭起飞</div>
4949
<div class="intro">点火后，火箭在推力作用下克服地球重力，逐渐离开发射台，开始上升。</div>
50-
<div class="live-img"></div>
50+
<video class="live-video" muted autoplay loop>
51+
<source src="../assets/videos/TwelveOrderStars/part01.mp4" type="video/mp4">
52+
您的浏览器不支持视频播放
53+
</video>
5154
</div>
5255
</div>
5356
<div class="part">
5457
<div class="stage-info">
5558
<div class="line"></div>
5659
<div class="name">逃逸塔分离</div>
5760
<div class="intro">在火箭上升到一定高度时，逃逸塔完成保护航天员的使命，与火箭分离。</div>
58-
<div class="live-img"></div>
61+
<video class="live-video" muted autoplay loop>
62+
<source src="../assets/videos/TwelveOrderStars/part02.mp4" type="video/mp4">
63+
您的浏览器不支持视频播放
64+
</video>
5965
</div>
6066
</div>
6167
<div class="part">
6268
<div class="stage-info">
6369
<div class="line"></div>
6470
<div class="name">助推器分离</div>
6571
<div class="intro">当火箭飞行到一定时间，助推器燃料耗尽，它们会与火箭主体分离，减轻火箭重量，让火箭轻装前行。</div>
66-
<div class="live-img"></div>
72+
<video class="live-video" muted autoplay loop>
73+
<source src="../assets/videos/TwelveOrderStars/part03.mp4" type="video/mp4">
74+
您的浏览器不支持视频播放
75+
</video>
6776
</div>
6877
</div>
6978
<div class="part">
7079
<div class="stage-info">
7180
<div class="line"></div>
7281
<div class="name">二极关机</div>
7382
<div class="intro">二级火箭根据任务需求进行工作，在达到预定轨道高度和速度时，二级火箭与有效载荷分离，将有效载荷送入预定轨道。</div>
74-
<div class="live-img"></div>
83+
<video class="live-video" muted autoplay loop>
84+
<source src="../assets/videos/TwelveOrderStars/part04.mp4" type="video/mp4">
85+
您的浏览器不支持视频播放
86+
</video>
7587
</div>
7688
</div>
7789
<div class="part">
7890
<div class="stage-info">
7991
<div class="line"></div>
8092
<div class="name">级箭分离</div>
8193
<div class="intro">热分离是下级推力未消失时上级点火启动实现分离，冷分离则是下级推力消失后借助专门冲量装置完成分离。</div>
82-
<div class="live-img"></div>
94+
<video class="live-video" muted autoplay loop>
95+
<source src="../assets/videos/TwelveOrderStars/part05.mp4" type="video/mp4">
96+
您的浏览器不支持视频播放
97+
</video>
8398
</div>
8499
</div>
85100
</div>

‎scripts/TwelveOrderStars/index.js‎

Lines changed: 0 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎styles/TwelveOrderStars/index.css‎

Lines changed: 58 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -170,13 +170,20 @@ body {
170170
color: rgba(255, 255, 255, 1);
171171
}
172172

173-
.page:nth-child(2) .parts .part:nth-child(1) .stage-info .live-img {
173+
.page:nth-child(2) .parts .part:nth-child(1) .stage-info .live-video {
174174
width: 100%;
175175
height: 20rem;
176-
background-image: url("../../assets/images/TwelveOrderStars/process_1_bg.png");
177-
background-size: contain;
178-
background-position: left;
179-
background-repeat: no-repeat;
176+
object-fit: cover;
177+
border-radius: 0.8rem;
178+
border: 0.2rem solid rgba(255, 255, 255, 0.3);
179+
box-shadow: 0 0 1rem rgba(146, 70, 167, 0.3);
180+
transition: all 0.3s ease;
181+
}
182+
183+
.page:nth-child(2) .parts .part:nth-child(1) .stage-info .live-video:hover {
184+
border-color: rgba(146, 70, 167, 0.8);
185+
box-shadow: 0 0 2rem rgba(146, 70, 167, 0.6);
186+
transform: scale(1.02);
180187
}
181188

182189
.page:nth-child(2) .parts .part:nth-child(2) {
@@ -222,13 +229,20 @@ body {
222229
color: rgba(255, 255, 255, 1);
223230
}
224231

225-
.page:nth-child(2) .parts .part:nth-child(2) .stage-info .live-img {
232+
.page:nth-child(2) .parts .part:nth-child(2) .stage-info .live-video {
226233
width: 100%;
227234
height: 20rem;
228-
background-image: url("../../assets/images/TwelveOrderStars/process_1_bg.png");
229-
background-size: contain;
230-
background-position: left;
231-
background-repeat: no-repeat;
235+
object-fit: cover;
236+
border-radius: 0.8rem;
237+
border: 0.2rem solid rgba(255, 255, 255, 0.3);
238+
box-shadow: 0 0 1rem rgba(146, 70, 167, 0.3);
239+
transition: all 0.3s ease;
240+
}
241+
242+
.page:nth-child(2) .parts .part:nth-child(2) .stage-info .live-video:hover {
243+
border-color: rgba(146, 70, 167, 0.8);
244+
box-shadow: 0 0 2rem rgba(146, 70, 167, 0.6);
245+
transform: scale(1.02);
232246
}
233247

234248
.page:nth-child(2) .parts .part:nth-child(3) {
@@ -274,13 +288,20 @@ body {
274288
color: rgba(255, 255, 255, 1);
275289
}
276290

277-
.page:nth-child(2) .parts .part:nth-child(3) .stage-info .live-img {
291+
.page:nth-child(2) .parts .part:nth-child(3) .stage-info .live-video {
278292
width: 100%;
279293
height: 20rem;
280-
background-image: url("../../assets/images/TwelveOrderStars/process_1_bg.png");
281-
background-size: contain;
282-
background-position: left;
283-
background-repeat: no-repeat;
294+
object-fit: cover;
295+
border-radius: 0.8rem;
296+
border: 0.2rem solid rgba(255, 255, 255, 0.3);
297+
box-shadow: 0 0 1rem rgba(146, 70, 167, 0.3);
298+
transition: all 0.3s ease;
299+
}
300+
301+
.page:nth-child(2) .parts .part:nth-child(3) .stage-info .live-video:hover {
302+
border-color: rgba(146, 70, 167, 0.8);
303+
box-shadow: 0 0 2rem rgba(146, 70, 167, 0.6);
304+
transform: scale(1.02);
284305
}
285306

286307
.page:nth-child(2) .parts .part:nth-child(4) {
@@ -327,13 +348,20 @@ body {
327348
color: rgba(255, 255, 255, 1);
328349
}
329350

330-
.page:nth-child(2) .parts .part:nth-child(4) .stage-info .live-img {
351+
.page:nth-child(2) .parts .part:nth-child(4) .stage-info .live-video {
331352
width: 100%;
332353
height: 20rem;
333-
background-image: url("../../assets/images/TwelveOrderStars/process_1_bg.png");
334-
background-size: contain;
335-
background-position: left;
336-
background-repeat: no-repeat;
354+
object-fit: cover;
355+
border-radius: 0.8rem;
356+
border: 0.2rem solid rgba(255, 255, 255, 0.3);
357+
box-shadow: 0 0 1rem rgba(146, 70, 167, 0.3);
358+
transition: all 0.3s ease;
359+
}
360+
361+
.page:nth-child(2) .parts .part:nth-child(4) .stage-info .live-video:hover {
362+
border-color: rgba(146, 70, 167, 0.8);
363+
box-shadow: 0 0 2rem rgba(146, 70, 167, 0.6);
364+
transform: scale(1.02);
337365
}
338366

339367
.page:nth-child(2) .parts .part:nth-child(5) {
@@ -380,57 +408,23 @@ body {
380408
color: rgba(255, 255, 255, 1);
381409
}
382410

383-
.page:nth-child(2) .parts .part:nth-child(5) .stage-info .live-img {
411+
.page:nth-child(2) .parts .part:nth-child(5) .stage-info .live-video {
384412
width: 100%;
385413
height: 20rem;
386-
background-image: url("../../assets/images/TwelveOrderStars/process_1_bg.png");
387-
background-size: contain;
388-
background-position: left;
389-
background-repeat: no-repeat;
414+
object-fit: cover;
415+
border-radius: 0.8rem;
416+
border: 0.2rem solid rgba(255, 255, 255, 0.3);
417+
box-shadow: 0 0 1rem rgba(146, 70, 167, 0.3);
418+
transition: all 0.3s ease;
390419
}
391420

392-
.page:nth-child(2) .parts .part:nth-child(6) {
393-
width: 6vw;
394-
height: 9vh;
395-
left: 63vw;
396-
bottom: 88vh;
397-
background-image: url("../../assets/images/TwelveOrderStars/2_6.png");
421+
.page:nth-child(2) .parts .part:nth-child(5) .stage-info .live-video:hover {
422+
border-color: rgba(146, 70, 167, 0.8);
423+
box-shadow: 0 0 2rem rgba(146, 70, 167, 0.6);
424+
transform: scale(1.02);
398425
}
399426

400-
.page:nth-child(2) .parts .part:nth-child(6) .stage-info {
401-
position: absolute;
402-
left: 0vw;
403-
top: 100%;
404-
display: flex;
405-
width: 25vw;
406-
flex-direction: column;
407-
justify-content: space-evenly;
408-
align-items: start;
409-
gap: 1rem;
410-
}
411-
412-
.page:nth-child(2) .parts .part:nth-child(6) .stage-info .name {
413-
font-size: 2.4rem;
414-
font-weight: 200;
415-
font-family: 'fys', sans-serif;
416-
color: rgba(255, 255, 255, 1);
417-
}
418427

419-
.page:nth-child(2) .parts .part:nth-child(6) .stage-info .intro {
420-
font-size: 2rem;
421-
font-weight: 200;
422-
font-family: 'fys', sans-serif;
423-
color: rgba(255, 255, 255, 1);
424-
}
425-
426-
.page:nth-child(2) .parts .part:nth-child(6) .stage-info .live-img {
427-
width: 100%;
428-
height: 20rem;
429-
background-image: url("../../assets/images/TwelveOrderStars/process_1_bg.png");
430-
background-size: contain;
431-
background-position: left;
432-
background-repeat: no-repeat;
433-
}
434428

435429
.page:nth-child(2) .process {
436430
width: 7rem;

0 commit comments

Comments
 (0)