'commit'
This commit is contained in:
@@ -1,157 +1,73 @@
|
||||
<!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>
|
||||
<meta charset="UTF-8">
|
||||
<title>军事攻击箭头（平滑版）</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
background-color: #f5f1e6;
|
||||
font-family: "SimSun", serif;
|
||||
}
|
||||
|
||||
.map {
|
||||
width: 896px; /* 设置为图片宽度 */
|
||||
height: 1152px; /* 设置为图片高度 */
|
||||
margin: 0 auto;
|
||||
background-image: url('D:/dsWork/dsProject/dsLightRag/XingJun/c9fc2122-9324-4e2b-9bae-ced575575eca-1.png');
|
||||
background-size: contain; /* 改为contain确保完整显示 */
|
||||
background-position: center;
|
||||
background-repeat: no-repeat; /* 防止图片重复 */
|
||||
border: 2px solid #8b7355;
|
||||
position: relative;
|
||||
overflow: auto; /* 如需完整查看可添加滚动条 */
|
||||
}
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.attack-arrow {
|
||||
fill: none;
|
||||
stroke: #b70000;
|
||||
stroke-width: 14;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
marker-end: url(#arrowhead);
|
||||
}
|
||||
|
||||
.label {
|
||||
position: absolute;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
background: rgba(255,255,255,0.8);
|
||||
padding: 2px 5px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
</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>
|
||||
<div class="map">
|
||||
<svg>
|
||||
<defs>
|
||||
<marker id="arrowhead" markerWidth="14" markerHeight="14" refX="13" refY="7" orient="auto">
|
||||
</marker>
|
||||
</defs>
|
||||
<path d="m216.91503,274.91109c0.26021,-11.6278 -0.1665,-23.27113 2.13988,-34.87848c56.67197,3.81831 112.67554,10.06601 168.39255,15.68451c2.99113,-5.70158 1.58328,-10.4311 4.18213,-15.70261c35.79493,11.0927 71.2671,22.34337 105.28547,34.12978c-32.63733,13.36985 -70.07352,24.98065 -106.82583,36.87022c-1.19012,-5.5368 -2.38046,-11.07356 -3.5706,-16.61037c-54.1675,5.3566 -111.45142,10.8948 -165.96914,15.79176c-3.70747,-11.29953 -3.5985,-23.60505 -3.63446,-35.28482z" class="attack-arrow" marker-end="url(#arrowhead)" />
|
||||
</svg>
|
||||
|
||||
<!-- 锦州城市标记 -->
|
||||
<circle cx="650" cy="420" r="8" class="city-marker" />
|
||||
<text x="670" y="425" class="city-label">锦州</text>
|
||||
<!-- 标注 -->
|
||||
<div class="label" style="top: 480px; left: 80px;">9纵</div>
|
||||
<div class="label" style="top: 380px; left: 280px;">73军</div>
|
||||
<div class="label" style="top: 230px; left: 680px;">莱芜</div>
|
||||
</div>
|
||||
|
||||
<!-- 箭头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>
|
||||
6
dsLightRag/XingJun/svg.svg
Normal file
6
dsLightRag/XingJun/svg.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="Layer_1">
|
||||
<title>Layer 1</title>
|
||||
<path id="svg_1" d="m216.91503,274.91109c0.26021,-11.6278 -0.1665,-23.27113 2.13988,-34.87848c56.67197,3.81831 112.67554,10.06601 168.39255,15.68451c2.99113,-5.70158 1.58328,-10.4311 4.18213,-15.70261c35.79493,11.0927 71.2671,22.34337 105.28547,34.12978c-32.63733,13.36985 -70.07352,24.98065 -106.82583,36.87022c-1.19012,-5.5368 -2.38046,-11.07356 -3.5706,-16.61037c-54.1675,5.3566 -111.45142,10.8948 -165.96914,15.79176c-3.70747,-11.29953 -3.5985,-23.60505 -3.63446,-35.28482z" stroke="#000" fill="#CE7975"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 633 B |
1
dsLightRag/XingJun/箭头.txt
Normal file
1
dsLightRag/XingJun/箭头.txt
Normal file
@@ -0,0 +1 @@
|
||||
https://editor.method.ac/
|
||||
Reference in New Issue
Block a user