147 lines
3.6 KiB
HTML
147 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
<title>红军长征路线动画</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
font-family: "Microsoft YaHei", sans-serif;
|
|
background: #f0f8ff;
|
|
}
|
|
|
|
h2 {
|
|
text-align: center;
|
|
margin: 10px 0;
|
|
}
|
|
|
|
#map {
|
|
position: relative;
|
|
width: 90%;
|
|
max-width: 1200px;
|
|
height: 840px;
|
|
margin: 0 auto;
|
|
border: 2px solid #333;
|
|
background: url("background.jpeg") no-repeat center/cover;
|
|
overflow: hidden;
|
|
}
|
|
|
|
svg {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
#redFlag {
|
|
width: 30px;
|
|
height: 30px;
|
|
background: url("hongqi.jpg") no-repeat center/contain;
|
|
position: absolute;
|
|
offset-path: path('M100,350 C150,340 200,320 250,300 300,280 350,260 400,240 450,220 500,200 550,180 600,160 650,140 700,100');
|
|
offset-distance: 0%;
|
|
animation: move 20s linear paused;
|
|
}
|
|
|
|
@keyframes move {
|
|
to {
|
|
offset-distance: 100%;
|
|
}
|
|
}
|
|
|
|
#subtitle {
|
|
text-align: center;
|
|
margin-top: 10px;
|
|
font-size: 16px;
|
|
height: 24px;
|
|
}
|
|
|
|
#controls {
|
|
text-align: center;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
button {
|
|
margin: 0 5px;
|
|
padding: 6px 12px;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<h2>红军长征路线动画演示</h2>
|
|
|
|
<div id="map">
|
|
<svg viewBox="0 0 900 500">
|
|
<!-- 路线 -->
|
|
<path id="route"
|
|
d="M100,350 C150,340 200,320 250,300 300,280 350,260 400,240 450,220 500,200 550,180 600,160 650,140 700,100"
|
|
stroke="red" stroke-width="2" fill="none" stroke-dasharray="4,4" />
|
|
</svg>
|
|
|
|
<!-- 小红旗 -->
|
|
<div id="redFlag"></div>
|
|
</div>
|
|
|
|
<div id="subtitle">1934年10月 从江西瑞金出发</div>
|
|
|
|
<div id="controls">
|
|
<button onclick="play()">开始</button>
|
|
<button onclick="pause()">暂停</button>
|
|
<button onclick="reset()">重播</button>
|
|
</div>
|
|
|
|
<script>
|
|
const flag = document.getElementById("redFlag");
|
|
const subtitle = document.getElementById("subtitle");
|
|
|
|
const timeline = [
|
|
{ p: 0, text: "1934年10月 从江西瑞金出发" },
|
|
{ p: 10, text: "1934年11月 血战湘江" },
|
|
{ p: 20, text: "1935年1月 遵义会议" },
|
|
{ p: 35, text: "四渡赤水" },
|
|
{ p: 50, text: "强渡大渡河，飞夺泸定桥" },
|
|
{ p: 65, text: "翻越夹金山" },
|
|
{ p: 80, text: "穿越草地，懋功会师" },
|
|
{ p: 95, text: "1935年10月 到达吴起镇" }
|
|
];
|
|
|
|
let interval;
|
|
|
|
function play() {
|
|
flag.style.animationPlayState = "running";
|
|
interval = setInterval(updateSubtitle, 200);
|
|
}
|
|
|
|
function pause() {
|
|
flag.style.animationPlayState = "paused";
|
|
clearInterval(interval);
|
|
}
|
|
|
|
function reset() {
|
|
flag.style.animation = "none";
|
|
flag.offsetHeight; // 触发重排
|
|
flag.style.animation = "move 20s linear paused";
|
|
subtitle.textContent = timeline[0].text;
|
|
clearInterval(interval);
|
|
}
|
|
|
|
function updateSubtitle() {
|
|
const computed = window.getComputedStyle(flag);
|
|
const distance = computed.offsetDistance;
|
|
const percent = parseFloat(distance);
|
|
for (let i = timeline.length - 1; i >= 0; i--) {
|
|
if (percent >= timeline[i].p) {
|
|
subtitle.textContent = timeline[i].text;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html> |