我找到了一个示例,使用SVG路径动画。
svg {
position: absolute;
width: 100%;
height: 100%;
left: 0%;
top: 0%;
display: block;
background: transparent;
}
.path {
stroke: black;
stroke-dasharray: 290;
stroke-dashoffset: 130;
animation: dash 6s 0s forwards infinite;
stroke-width: 2px;
stroke-linecap: round;
stroke-linejoin: round;
}
@keyframes dash {
from {
stroke-dashoffset: 290;
}
to {
stroke-dashoffset: 0;
}
}
<svg viewbox="0 0 25 100" xmlns="http://www.w3.org/2000/svg">
<path class="path" d="M0 50 L 12 50, 12 0, 25 0" fill="transparent"></path>
</svg>
它能够正常工作,但它是在页面加载时触发的。是否有一种方法(比如使用按钮)可以使用JavaScript触发这个动画?
我会处理JS,但我对CSS和SVG动画很菜。
有人能给我一个示例,说明我如何使用我的实际CSS来做到这一点吗?