我创建了一个svg文件,当页面加载时,轮廓会被“绘制”。 动画完成后,我想填写大纲。
所以这就是我所做的。
有多条路径。这是一个:
<path id="b1" class="b1" d="M95.4,204.9a31.7,31.7,0,0,1,23,9.6,32.8,32.8,0,0,1,6.9,10.8,38.7,38.7,0,0,1,0,27.4,32.8,32.8,0,0,1-6.9,10.8,31.7,31.7,0,0,1-23,9.6,25.7,25.7,0,0,1-11.9-2.6,25.4,25.4,0,0,1-8.3-6.8v7.7H61V174H75.1v40.3a25.4,25.4,0,0,1,8.3-6.8A25.7,25.7,0,0,1,95.4,204.9Zm-1.7,13.3a19.5,19.5,0,0,0-8,1.6,18.5,18.5,0,0,0-6.1,4.4,19.7,19.7,0,0,0-4,6.6,24.6,24.6,0,0,0,0,16.5,19.7,19.7,0,0,0,4,6.6,18.5,18.5,0,0,0,6.1,4.4,20.9,20.9,0,0,0,16.1-.1,18.1,18.1,0,0,0,6.1-4.5,19.7,19.7,0,0,0,3.9-6.6,24.6,24.6,0,0,0,0-16.1,19.8,19.8,0,0,0-3.9-6.6,18.1,18.1,0,0,0-6.1-4.5A19.6,19.6,0,0,0,93.7,218.2Z" transform="translate(-60.5 -173.5)" fill="none" stroke="#1d1d1b" stroke-miterlimit="10"/>
这是轮廓动画的css:
@keyframes offset{
to {
stroke-dashoffset: 0;
}
}
.b1{
animation: offset 2s linear forwards;
stroke-dasharray: 324.774;
stroke-dashoffset: 324.774;
}
直到这里一切正常。
@keyframes fill {
0% {
fill: white;
}
100% {
fill: black;
}
}
#fill {
animation-name: fill;
animation-duration: 2s;
animation-delay:2s;
}
问题是我已经为id
分配了class
和path
我试图更改path
的{{1}使用id
。
如果我这样做,大纲动画会被覆盖,只需等待两秒钟。在两秒之后,路径被动画填充。
我该如何使这项工作? 我想要的是首先为轮廓设置动画,当它们完成时,必须填充形状。
日Thnx。
答案 0 :(得分:2)
您可以在动画中拥有任意数量的关键帧。只需为0%和50%之间的路径设置动画,然后在50%和100%之间设置填充动画。
你走了:
.b1 {
animation: stroke_fill 4s linear forwards;
stroke-dasharray: 324.774;
stroke-dashoffset: 324.774;
}
@keyframes stroke_fill {
0% {
fill: white;
}
50% {
fill: white;
stroke-dashoffset: 0;
}
100% {
fill: black;
stroke-dashoffset: 0;
}
}
<svg width="300" height="300" viewBox="0 0 300 300">
<path id="b1" class="b1" d="M95.4,204.9a31.7,31.7,0,0,1,23,9.6,32.8,32.8,0,0,1,6.9,10.8,38.7,38.7,0,0,1,0,27.4,32.8,32.8,0,0,1-6.9,10.8,31.7,31.7,0,0,1-23,9.6,25.7,25.7,0,0,1-11.9-2.6,25.4,25.4,0,0,1-8.3-6.8v7.7H61V174H75.1v40.3a25.4,25.4,0,0,1,8.3-6.8A25.7,25.7,0,0,1,95.4,204.9Zm-1.7,13.3a19.5,19.5,0,0,0-8,1.6,18.5,18.5,0,0,0-6.1,4.4,19.7,19.7,0,0,0-4,6.6,24.6,24.6,0,0,0,0,16.5,19.7,19.7,0,0,0,4,6.6,18.5,18.5,0,0,0,6.1,4.4,20.9,20.9,0,0,0,16.1-.1,18.1,18.1,0,0,0,6.1-4.5,19.7,19.7,0,0,0,3.9-6.6,24.6,24.6,0,0,0,0-16.1,19.8,19.8,0,0,0-3.9-6.6,18.1,18.1,0,0,0-6.1-4.5A19.6,19.6,0,0,0,93.7,218.2Z"
transform="translate(-60.5 -173.5)" fill="none" stroke="#1d1d1b" stroke-miterlimit="10" />
</svg>