79 lines
2.6 KiB
XML
79 lines
2.6 KiB
XML
<svg width="48" height="60" viewBox="0 0 48 60" xmlns="http://www.w3.org/2000/svg">
|
||
<defs>
|
||
<style>
|
||
.bg-rect {
|
||
fill: #fff;
|
||
rx: 7; /* 调整圆角，约等于原15*0.48，或根据视觉效果调整 */
|
||
ry: 7;
|
||
}
|
||
.top-line {
|
||
fill: none;
|
||
stroke: #20C29F;
|
||
stroke-width: 2.5; /* 调整线宽 */
|
||
stroke-linecap: round;
|
||
}
|
||
.outer-rail {
|
||
fill: #000;
|
||
}
|
||
.door-panel {
|
||
fill: #000;
|
||
transform-origin: center;
|
||
}
|
||
.arrow {
|
||
fill: #fff;
|
||
}
|
||
@keyframes openDoors {
|
||
0% {
|
||
transform: translateX(0px);
|
||
}
|
||
100% {
|
||
transform: translateX(8px); /* 调整开门距离，原20*0.48=9.6，取8-10 */
|
||
}
|
||
}
|
||
@keyframes openDoorsLeft {
|
||
0% {
|
||
transform: translateX(0px);
|
||
}
|
||
100% {
|
||
transform: translateX(-8px); /* 调整开门距离 */
|
||
}
|
||
}
|
||
.left-door {
|
||
animation: openDoorsLeft 1.5s ease-out forwards;
|
||
}
|
||
.right-door {
|
||
animation: openDoors 1.5s ease-out forwards;
|
||
}
|
||
.arrows-group {
|
||
opacity: 0;
|
||
animation: fadeOutArrows 0.5s forwards;
|
||
}
|
||
@keyframes fadeOutArrows {
|
||
0% { opacity: 1; }
|
||
100% { opacity: 0; }
|
||
}
|
||
</style>
|
||
</defs>
|
||
<!-- 背景矩形 -->
|
||
<rect class="bg-rect" x="0" y="0" width="48" height="60" />
|
||
<!-- 顶部线条 -->
|
||
<line class="top-line" x1="12" y1="7.5" x2="36" y2="7.5" /> <!-- 原25-75，缩放0.48，并向上移动 -->
|
||
<!-- 外侧固定轨道 -->
|
||
<rect class="outer-rail" x="9.5" y="15" width="2.5" height="30" /> <!-- 宽度原5*0.48=2.4，高度原50*0.6=30 -->
|
||
<rect class="outer-rail" x="36" y="15" width="2.5" height="30" />
|
||
<!-- 门板 - 初始状态是关上的 -->
|
||
<!-- 左门板：宽度原20*0.48=9.6，高度原50*0.6=30。Y轴起始点原30*0.6=18，微调至15 -->
|
||
<rect class="door-panel left-door" x="12.5" y="15" width="11.5" height="30" />
|
||
<!-- 右门板：X轴起始点在左门板结束位置+0.5间隙（约24），宽度同左门板 -->
|
||
<rect class="door-panel right-door" x="24" y="15" width="11.5" height="30" />
|
||
<!-- 箭头和中间点 - 动画开始时消失 -->
|
||
<g class="arrows-group">
|
||
<!-- 上箭头 -->
|
||
<polygon class="arrow" points="21,19 27,19 24,16" /> <!-- 调整位置和大小 -->
|
||
<!-- 中间点 -->
|
||
<circle class="arrow" cx="24" cy="27" r="1.5" /> <!-- 调整位置和大小 -->
|
||
<!-- 下箭头 -->
|
||
<polygon class="arrow" points="21,34 27,34 24,37" /> <!-- 调整位置和大小 -->
|
||
</g>
|
||
</svg>
|