'commit'
This commit is contained in:
157
dsLightRag/XingJun/history_lesson.html
Normal file
157
dsLightRag/XingJun/history_lesson.html
Normal file
@@ -0,0 +1,157 @@
|
|||||||
|
<!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;
|
||||||
|
padding: 20px;
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
}
|
||||||
|
.map-container {
|
||||||
|
position: relative;
|
||||||
|
width: 896px;
|
||||||
|
height: 1152px;
|
||||||
|
overflow: auto;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
#background-map {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
#attack-svg {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.city-marker {
|
||||||
|
fill: red;
|
||||||
|
animation: pulse 2s infinite;
|
||||||
|
}
|
||||||
|
.city-label {
|
||||||
|
font-family: "SimSun", serif;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
fill: darkred;
|
||||||
|
}
|
||||||
|
@keyframes pulse {
|
||||||
|
0% { r: 8; opacity: 1; }
|
||||||
|
50% { r: 12; opacity: 0.7; }
|
||||||
|
100% { r: 8; opacity: 1; }
|
||||||
|
}
|
||||||
|
.control-panel {
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
right: 20px;
|
||||||
|
background-color: rgba(255,255,255,0.8);
|
||||||
|
padding: 15px;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
padding: 8px 15px;
|
||||||
|
margin: 0 5px;
|
||||||
|
background-color: #4CAF50;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
button:hover {
|
||||||
|
background-color: #45a049;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="map-container">
|
||||||
|
<!-- 背景图 -->
|
||||||
|
<img id="background-map" src="c9fc2122-9324-4e2b-9bae-ced575575eca-1.png" alt="历史地图" width="896" height="1152">
|
||||||
|
|
||||||
|
<!-- SVG动画层 -->
|
||||||
|
<svg id="attack-svg" viewBox="0 0 896 1152">
|
||||||
|
<!-- 定义箭头标记 -->
|
||||||
|
<defs>
|
||||||
|
<marker id="arrowhead" markerWidth="10" markerHeight="7"
|
||||||
|
refX="9" refY="3.5" orient="auto">
|
||||||
|
<polygon points="0 0, 10 3.5, 0 7" fill="#ff0000" />
|
||||||
|
</marker>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<!-- 锦州城市标记 -->
|
||||||
|
<circle cx="650" cy="420" r="8" class="city-marker" />
|
||||||
|
<text x="670" y="425" class="city-label">锦州</text>
|
||||||
|
|
||||||
|
<!-- 箭头1: 西北方向进攻 -->
|
||||||
|
<path id="arrow1" d="M 300,200 Q 450,280 550,350" fill="none" stroke="#ff0000"
|
||||||
|
stroke-width="3" marker-end="url(#arrowhead)">
|
||||||
|
<animateMotion dur="8s" repeatCount="indefinite">
|
||||||
|
<mpath href="#arrow1" />
|
||||||
|
</animateMotion>
|
||||||
|
</path>
|
||||||
|
|
||||||
|
<!-- 箭头2: 东北方向进攻 -->
|
||||||
|
<path id="arrow2" d="M 500,150 Q 550,250 600,350" fill="none" stroke="#0000ff"
|
||||||
|
stroke-width="3" marker-end="url(#arrowhead)">
|
||||||
|
<animateMotion dur="6s" begin="1s" repeatCount="indefinite">
|
||||||
|
<mpath href="#arrow2" />
|
||||||
|
</animateMotion>
|
||||||
|
</path>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<!-- 控制面板 -->
|
||||||
|
<div class="control-panel">
|
||||||
|
<button onclick="startAnimation()">开始动画</button>
|
||||||
|
<button onclick="pauseAnimation()">暂停动画</button>
|
||||||
|
<button onclick="resetAnimation()">重置动画</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// 获取SVG元素和动画
|
||||||
|
const svg = document.getElementById('attack-svg');
|
||||||
|
const animations = svg.querySelectorAll('animateMotion');
|
||||||
|
const arrow1 = document.getElementById('arrow1');
|
||||||
|
const arrow2 = document.getElementById('arrow2');
|
||||||
|
|
||||||
|
// 初始化动画状态
|
||||||
|
animations.forEach(anim => {
|
||||||
|
anim.beginElement();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 开始动画
|
||||||
|
function startAnimation() {
|
||||||
|
animations.forEach(anim => {
|
||||||
|
anim.beginElement();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 暂停动画
|
||||||
|
function pauseAnimation() {
|
||||||
|
animations.forEach(anim => {
|
||||||
|
anim.pauseElement();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 重置动画
|
||||||
|
function resetAnimation() {
|
||||||
|
animations.forEach(anim => {
|
||||||
|
anim.endElement();
|
||||||
|
setTimeout(() => anim.beginElement(), 100);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 调整SVG大小以适应背景图
|
||||||
|
window.addEventListener('load', () => {
|
||||||
|
const background = document.getElementById('background-map');
|
||||||
|
const mapContainer = document.querySelector('.map-container');
|
||||||
|
svg.setAttribute('width', background.offsetWidth);
|
||||||
|
svg.setAttribute('height', background.offsetHeight);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user