当前位置：首页 > news >正文

抗日胜利80周年 | HTML页面

news 2025/8/17 9:32:57

飞翔的和平鸽；屹立的人民英雄纪念碑；倒下的日本国旗；旋转的金色勋章无不代表着我们胜利了！！！

HTML源代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>中国人民抗日战争胜利80周年</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {min-height: 100vh;background: linear-gradient(135deg, #0f0f10 0%, #0e0f10 100%);display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 20px;font-family: "SimHei", "Microsoft YaHei", sans-serif;color: #333;}.container {position: relative;width: 90%;max-width: 900px;border: 12px solid #8b0000;box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);background-color: #fff9e6;overflow: hidden;}h1 {text-align: center;color: #8b0000;margin: 25px 0 10px;font-size: 2.5rem;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);background: linear-gradient(to right, #8b0000, #ff0000);-webkit-background-clip: text;color: transparent;}.subtitle {text-align: center;color: #8b0000;margin-bottom: 25px;font-size: 1.3rem;font-weight: bold;}.flag-container {position: relative;width: 100%;height: 450px;background-color: #8b0000;overflow: hidden;}.flag {width: 60%;height: 70%;background-color: #de2910;position: relative;margin: 50px auto;box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);}.star {position: absolute;background-color: #ffde00;clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);}.big-star {width: 90px;height: 90px;top: 25px;left: 25px;}.small-star {width: 30px;height: 30px;}.star-1 {top: 10px;left: 120px;transform: rotate(15deg);}.star-2 {top: 40px;left: 140px;transform: rotate(-15deg);}.star-3 {top: 70px;left: 140px;transform: rotate(-5deg);}.star-4 {top: 100px;left: 120px;transform: rotate(-40deg);}.victory-elements {position: absolute;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none;}.peace-dove {position: absolute;color: white;font-size: 1.8rem;animation: fly 20s linear infinite;z-index: 10;}.dove1 {top: 30px;left: -50px;animation-delay: 0s;}.dove2 {top: 150px;left: -50px;animation-delay: 5s;}.dove3 {top: 80px;left: -50px;animation-delay: 2s;}.dove4 {top: 200px;left: -50px;animation-delay: 7s;}.dove5 {top: 120px;left: -50px;animation-delay: 3s;}.timeline {display: flex;justify-content: space-around;padding: 30px 20px;background-color: #8b0000;color: white;position: relative;}.timeline::before {content: '';position: absolute;top: 0;left: 50%;transform: translateX(-50%);width: 4px;height: 100%;background: linear-gradient(to bottom, #ffde00, #8b0000);}.timeline-item {width: 22%;text-align: center;padding: 15px;background-color: rgba(255, 255, 255, 0.1);border-radius: 10px;position: relative;border: 2px solid #ffde00;}.timeline-year {font-size: 1.3rem;font-weight: bold;margin-bottom: 10px;color: #ffde00;}.monument-container {position: absolute;bottom: 10px;right: 30px;width: 140px;height: 280px;z-index: 5;animation: monumentGlow 3s ease-in-out infinite alternate;}.monument-base-1 {position: absolute;bottom: 0;left: 0;width: 100%;height: 12px;background-color: #595959;border-radius: 2px;}.monument-base-2 {position: absolute;bottom: 12px;left: 5%;width: 90%;height: 12px;background-color: #4d4d4d;border-radius: 2px;}.monument-base-3 {position: absolute;bottom: 24px;left: 10%;width: 80%;height: 12px;background-color: #404040;border-radius: 2px;}.monument-pedestal {position: absolute;bottom: 36px;left: 15%;width: 70%;height: 60px;background-color: #333;z-index: 2;border-top: 8px solid #4d4d4d;}.pedestal-top {position: absolute;top: -8px;left: -5%;width: 110%;height: 8px;background-color: #4d4d4d;border-radius: 2px 2px 0 0;}.monument-column {position: absolute;bottom: 96px;left: 25%;width: 50%;height: 150px;background: linear-gradient(to top, #555, #666);box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);z-index: 3;border-left: 3px solid rgba(139, 0, 0, 0.3);border-right: 3px solid rgba(139, 0, 0, 0.3);}.column-inscription {text-align: center;color: rgba(224, 207, 58, 0.76);font-weight: bold;font-size: 0.8rem;line-height: 1.2;text-shadow: 0 0 2px rgba(255, 255, 255, 0.7);writing-mode: vertical-rl;margin-left: 15px;}.main-inscription {display: flex;flex-wrap: wrap;justify-content: space-between;align-content: space-between;height: 100px;margin-bottom: 10px;}.inscription-char {width: 45%;height: 45%;display: flex;align-items: center;justify-content: center;font-family: "SimSun", serif;font-size: 12px;font-weight: bold;color: #8b0000;background-color: rgba(255, 222, 0, 0.1);border: 1px solid rgba(139, 0, 0, 0.2);writing-mode: vertical-rl;text-orientation: upright;}.monument-inscription {display: flex;flex-direction: column;justify-content: flex-end;align-items: center;height: 100%;font-size: 10px;padding-bottom: 1px;}.sub-inscription {font-family: "SimSun", serif;font-size: 0.45rem;color: #000;text-align: center;line-height: 1.2;margin-top: 5px;}.monument-crown {position: absolute;bottom: 246px;left: 20%;width: 60%;height: 20px;background-color: #bfbfbf;z-index: 4;border-radius: 2px 2px 0 0;}.crown-top {position: absolute;top: -12px;left: 50%;transform: translateX(-50%);width: 70%;height: 12px;background-color: #b3b3b3;clip-path: polygon(0 100%, 50% 0, 100% 100%);}.japanese-defeat {position: absolute;bottom: 20px;left: 20px;width: 150px;height: 80px;animation: defeatFlag 3s ease-in-out infinite alternate;}.japanese-flag {width: 80px;height: 50px;background-color: white;border-radius: 5px;position: relative;transform: rotate(30deg);box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);}.japanese-flag::before {content: '';position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 30px;height: 30px;background-color: #bc002d;border-radius: 50%;}.fallen-flag {width: 2px;height: 60px;background-color: #333;position: absolute;top: 40px;left: 75px;transform: rotate(45deg);}.medal {position: absolute;top: 20px;right: 20px;width: 60px;height: 60px;background-color: #ffde00;border-radius: 50%;display: flex;align-items: center;justify-content: center;color: #8b0000;font-size: 2rem;box-shadow: 0 0 15px rgba(255, 222, 0, 0.7);animation: medalRotate 8s linear infinite;}.history-text {padding: 30px;text-align: center;line-height: 2;position: relative;}.history-text p {margin-bottom: 20px;font-size: 1.2rem;}.highlight {color: #8b0000;font-weight: bold;font-size: 1.3rem;background-color: rgba(255, 222, 0, 0.2);padding: 5px 10px;border-radius: 5px;}.year {text-align: center;font-size: 3.5rem;font-weight: bold;color: #8b0000;margin: 20px 0;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);position: relative;}.year::before,.year::after {content: '★★';color: #ffde00;position: absolute;top: 50%;transform: translateY(-50%);}.year::before {left: 20%;}.year::after {right: 20%;}.peace-slogan {text-align: center;font-size: 1.4rem;color: #2e8b57;margin: 20px 0;font-style: italic;}@keyframes fly {0% {transform: translateX(0) rotate(0deg);opacity: 0;}10% {opacity: 1;}90% {opacity: 1;}100% {transform: translateX(1000px) rotate(20deg);opacity: 0;}}@keyframes monumentGlow {from {filter: drop-shadow(0 0 5px rgba(255, 222, 0, 0.7));}to {filter: drop-shadow(0 0 15px rgba(255, 222, 0, 0.9));}}@keyframes medalRotate {from {transform: rotate(0deg);}to {transform: rotate(360deg);}}@keyframes defeatFlag {0%, 100% {transform: translateY(0) rotate(5deg);}50% {transform: translateY(-5px) rotate(0deg);}}@media (max-width: 768px) {.container {width: 95%;}h1 {font-size: 2rem;}.flag-container {height: 350px;}.flag {width: 80%;margin: 40px auto;}.big-star {width: 70px;height: 70px;}.small-star {width: 25px;height: 25px;}.star-1 {top: 10px;left: 100px;}.star-2 {top: 35px;left: 120px;}.star-3 {top: 60px;left: 115px;}.star-4 {top: 80px;left: 95px;}.timeline {flex-direction: column;align-items: center;}.timeline::before {left: 20px;transform: none;}.timeline-item {width: 80%;margin: 10px 0;}.year {font-size: 2.5rem;}.monument, .japanese-defeat, .medal {display: none;}}</style>
</head>
<body>
<div class="container"><h1>中国人民抗日战争胜利80周年</h1><div class="subtitle">铭记历史 · 缅怀先烈 · 珍爱和平 · 开创未来</div><div class="flag-container"><div class="flag"><!-- 五角星 --><div class="star big-star"></div><div class="star small-star star-1"></div><div class="star small-star star-2"></div><div class="star small-star star-3"></div><div class="star small-star star-4"></div></div><div class="victory-elements"><!-- 和平鸽 --><div class="peace-dove dove1"><i class="fas fa-dove"></i></div><div class="peace-dove dove2"><i class="fas fa-dove"></i></div><div class="peace-dove dove3"><i class="fas fa-dove"></i></div><div class="peace-dove dove4"><i class="fas fa-dove"></i></div><div class="peace-dove dove5"><i class="fas fa-dove"></i></div><!-- 人民英雄纪念碑 --><div class="monument-container"><!-- 纪念碑基座三层 --><div class="monument-base-3"></div><div class="monument-base-2"></div><div class="monument-base-1"></div><!-- 碑座与碑身连接部分 --><div class="monument-pedestal"><div class="pedestal-top"></div><div class="pedestal-relief front-relief"></div><div class="pedestal-relief side-relief left"></div><div class="pedestal-relief side-relief right"></div></div><!-- 碑身主体 --><div class="monument-column"><div class="column-inscription"><div class="main-inscription"><div class="monument-inscription">人民英雄永垂不朽</div></div><div class="sub-inscription"><div>三年以来</div><div>在人民解放战争和人民革命中</div><div>牺牲的人民英雄们永垂不朽</div></div></div></div><!-- 碑顶 --><div class="monument-crown"><div class="crown-top"></div></div></div><!-- 小日子国旗 --><div class="japanese-defeat"><div class="fallen-flag"></div><div class="japanese-flag"></div></div><!-- 胜利勋章 --><div class="medal"><i class="fas fa-star"></i></div></div></div><div class="year">1945-2025</div><div class="peace-slogan">"和平像阳光一样温暖，像鲜花一样美丽"</div><div class="history-text"><p>1945年9月2日，日本在投降书上签字，标志着中国人民经过14年艰苦卓绝的抗日战争，终于取得了伟大胜利。</p><p>这是近代以来中国抗击外敌入侵的第一次完全胜利，洗刷了近代以来中国抗击外来侵略屡战屡败的民族耻辱。</p><p class="highlight">这场胜利重新确立了中国在世界上的大国地位，开辟了中华民族伟大复兴的光明前景。</p><p>我们铭记历史，不是为了延续仇恨，而是为了从历史中汲取智慧和力量，防止悲剧重演，共创和平未来。</p></div><div class="timeline"><div class="timeline-item"><div class="timeline-year">1931年</div><div>九一八事变爆发，抗日战争开始</div></div><div class="timeline-item"><div class="timeline-year">1937年</div><div>七七事变，全面抗战爆发</div></div><div class="timeline-item"><div class="timeline-year">1945年</div><div>日本投降，抗战胜利结束</div></div><div class="timeline-item"><div class="timeline-year">2025年</div><div>中国抗日胜利80周年</div></div></div>
</div>
</body>
</html>