示例链接:http://bss.com/RK/full3.html -- 我希望 MEDIA 这个词在写入后留在背景图像的顶部。有人可以帮我吗？我可以在另一个使用 javascript 的 div 中使用一个 div，它会干扰我想要在内部 div 中发生的事情吗？
我相信这对 SOers 来说是一个简单的问题。我已经走得很远了，但现在只是转动我的轮子，只是想不通这最后一点。我看到这个帖子CSS Animation property stays after animating因为我使用了其中的一些并且它非常接近于为我工作，但是，我在另一个应用了 js 的 div 中有这个#box div 说
$ (document).ready (function() {
setTimeout (function(){
$("div.center-div").fadeOut(1200); {
$("div.center-div").remove(1200);
};
},5500);
});
并且 fadeOut 和 remove 会干扰第二个 div。我有这个 (.center-div) div，它带有一个 svg，它会完全淡入然后淡出。淡入淡出后会保留背景图像。
.st1{fill:none;stroke:#FCFAFA;stroke-width:3;stroke-linecap:round;stroke-
linejoin:round;stroke-miterlimit:10;stroke-dasharray:2000;stroke-dashoffset:
2000;animation-delay:4.5s;animation-timing-function: ease-in forwards;
} /*media word */
我想我需要另一个 div 来让 .st1 内容(文字媒体)淡入然后保持但无法让它工作。我希望 MEDIA 这个词在它出现后保留下来。但是另一个 div 只是呈现 below center-div。
用过 z-index 没用。我试过制作一个类而不是 id，我试过如上所述嵌套它们——当包围的 div 有 javascript 淡出时，我该怎么做才能让这个“媒体”svg 线动画元素进入并保持并删除？谢谢。我希望有人能帮助我，因为我真的需要继续做其他事情。
最佳答案
首先，你正在做一个 .remove()的 <div>包含 SVG。所以你显然不能那样做。
您需要做的只是淡出要隐藏的 SVG 元素。
@keyframes fadeout {
from { opacity: 1; }
to { opacity: 0; }
}
#line, #tree_2, #leaves, #background {
animation: fadeout 1s linear forwards;
animation-delay: 5.5s;
}
因为你也想淡出黑色背景。您需要删除 <div> 的背景颜色, 而不是向 SVG 添加一个黑色矩形。然后你也可以淡出它。
<g id="background">
<rect width="100%" height="100%" fill="black"/>
</g>
更新示例:
<div class="wrapper">
<div class="center-div">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="893px"
height="332.7px" viewBox="0 0 893 332.7" style="enable-background:new 0 0 893 332.7;" xml:space="preserve">
<style type="text/css">
<![CDATA[
.st0{fill:#fcfafa;stroke:none;stroke-miterlimit:10;stroke-width:1; stroke-dasharray: 2000;
stroke-dashoffset: 2000;
animation-delay:2.5s; /* PERFECT! */
animation-timing-function: ease-in;
} /*WHITE TINY LEAVES */
.st1{fill:none;stroke:#FCFAFA;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray: 2000;
stroke-dashoffset: 2000;
animation-delay:4.5s;
animation-timing-function: ease-in forwards;
} /*media word */
.st2{fill:none;stroke:#FCFAFA;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10; stroke-dasharray: 2000;
stroke-dashoffset: 2000;
animation-delay:5.6s;
animation-timing-function: ease-in forwards;; } /* dot white*/
.st3{fill:none;stroke:#89CB6A;stroke-width:4;stroke-miterlimit:10;} /* the green line */
/* .st4{fill:none;stroke:#89CB6A;stroke-width:8;stroke-miterlimit:10;} cant see difference-tiny amount of leaves I guess */
.st5{fill:none;stroke:#89CB6A;stroke-width:2;stroke-miterlimit:10;stroke-dasharray: 2000;
stroke-dashoffset: 2000;
animation-delay:2.5s; /* PERFECT! */
animation-timing-function: ease-in;} /* reg leaves */
]]>
</style>
<style type="text/css">
svg {
height: 100%;
width: 100%;
margin:auto;
}
path {
stroke-dasharray: 2100;
animation: draw 3.4s linear forwards;
/*transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); */
}
.path2 {
animation-delay: 2s; /*number not mattering here right now
animation: draw 3.4s linear ;*/
}
@keyframes draw {
from {
stroke-dashoffset: 2200;
}
to {
stroke-dashoffset: 0;
}
}
@keyframes msvg {
0% { stroke-dashoffset: 1500; }
12% { stroke-dashoffset: 1500; }
44% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: 0;
}
}
.wrapper {
position: relative;
background-image: url(https://filedn.com/lPKPli3Xz1KVxCemkqFzHfL/bss/treebanner_893x332.jpg);
background-size: contain;
margin: 0 auto;
max-width: 100%;
width: 1300px;
height: 483px;
z-index: 25;
background-repeat: no-repeat;
/* object-fit: cover; nothing */
}
.center-div /*fades out green line and tree see js*/
{
position: relative;
margin: 0 auto;
max-width: 100%;
height: auto;
z-index:13;
background-position: left top;
}
.media-div /*bring in word and stay*/
{
position: relative;
margin: 0 auto;
max-width: 100%;
height: auto;
z-index:1;
background-position: left top;
}
@keyframes fadeout {
from { opacity: 1; }
to { opacity: 0; }
}
#line, #tree_2, #leaves, #background {
animation: fadeout 1s linear forwards;
animation-delay: 5.5s;
}
</style>
<g id="background">
<rect width="100%" height="100%" fill="black"/>
</g>
<g id="MEDIA">
<path class="st1" d="M234.7,201.1l-2.4,10.4c0.3,0.4,14.3-19.9,15.6-0.7c0.5,0.1,8.4-15,12.2-2.9c1.9,2.9,4.1,3.4,5.6,3.7
c7.8,1.7,15.8-6.6,17.3-8.1c0,0,8.1-9.5,11-5.5c2.2,3-4,6.8-10.8,5.9c-0.7,2.5-1.2,6.1,6.8,7.8c11.9,2.5,25-5,29.2-8.6
c3.7-3.1,7.1-5.6,9.3,0c-2.3-8.9-12.4,1.5-9.2,8c0.8,1.6,2.6,1.6,5.1-0.2c3.5-2.4,24.1-35.8,17.2-36.3c-7.3,0.5-9.7,22.1-9.7,22.8
c0,0.7-0.1,15.3,11.1,14.6c11.9-0.8,18.3-6.7,20.5-12.2c-3,7-2.6,11.4,7.3,12.5c11.4,0.2,20.1-14.5,27.3-14.7
c-0.2-0.8-13.9,5.6-11,13.7c0.2,0.4,0.5,0.9,1.2,1.1c2.2,0.7,6.7-4.4,8.8-11.2c-0.8-0.2,4.5,22.4,29.2,1.2"/>
<path class="st2" d="M364.2,188.6c0,0,4.1-1,4.2-2.1"/>
</g>
<g id="line">
<path class="st3" d="M750.9,194.2c0.9,0.9,47.6-162.4,47.6-162.4l-34.8,0.6H55.2c0,0-13.9,0-13.7,13.7c0.1,8.7,0,248.6,0,248.6
s-1.2,9.9,7.5,11.2s659.2,0.4,659.2,0.4s1.5,1.3,9.9-21.1c6.2-16.5,23.8-57.6,23.8-57.6l4.5-12.6c0,0,1.8-6.2,1.1-7"/>
<path class="st4" d="M739.8,232.8"/>
</g>
<g id="tree_2">
<path class="st5" d="M737.5,127.7c-0.6,0.3-1.5,2.9-2.1,3.2l-15.6-2.8l-3.3,4.6l0.4,5.8c0,0-2.1,3.7-8.7,7
c-7.8,3.9-13.6-0.4-14.2-0.1c-0.6-1.2-1.3,2.1-3.2,2.5c-1.9,0.5-1.7-3.5-1.3-4.1c0.3-0.6,2.5-2.2,3.7-4.5c1.1-2.3-1.9-3.6-3.2-2.5
c-0.4,0.3-1.7,1.1-1.8,2c-0.3,2.6-4.2,4.4-5.6,3c-2.1-2.1-5.9,2.8-8.1,3.3c-3.7-1.8-1.2-4.3-1.2-4.3l6.4-2.4l2.7-2l-1.9-2.8
c0,0-0.2-7,6.1-7.8c2.7-0.3-1.1,6.2-0.7,6.9c0.4,0.8,4.6-0.4,4.6-0.4s2.9,1.7,2.9-2.5c0-4.1,2.9,0,2.9,0l2.1,6.2
c0,0,7.7-10,8.3-9.1c0,0,0.4,5.8-1.7,9.9c-2.1,4.1,9.5,0,6.6-5.4c-2.9-5.4-1.7-3.7,0.4-4.6c2.1-0.8,5.8-1.2,10.4-7
c4.6-5.8,4.1-5,8.3-1.7s-9.1,7.5-9.1,7.5s6.6-1.2,12.4-3.3c5.8-2.1,3.1-7.2,2.2-8.5c-0.9-1.3-6-1.8-6-1.8s1.7-5.5,1.2-6.6
c-0.4-1.1-2.5,2.5-2.5,2.5l-3.7-3.3l-2.5,3.7c0,0-3.7,0.8-6.2,9.9c-2.5,9.1,2.1,4.6-1.2,3.7c-3.3-0.8-4.4-8-1.7-12.8
c2.4-4.2,8.3-4,8.3-4l-4.3-2.5c0,0-3.2,2.7-4.7,0.4c-1.9,4.2,1.2,8.1-7.1,1.1c-2.4,0.9,2,7-0.5,7c-2.5,0-4.1-2.1-4.1-2.1l-5.4,5
c0,0-1.2-6.7-5.3-2c-1.8,2.2,2.8-9.1-0.1-9.4c-2.9-0.3-4.1,8.5-5.4,6s-4.9-4.6-6.6,0.4c-0.8,2.2-2.2,6.5-4.3,7.4
c-0.3,1.1-0.3,2.3,0.1,3.7c0.1,1.1,3.1,3,1.8,7.1c-0.7,2.1-7.2-4.4-6.2-8.5c0.2-0.7,9.8-11.1,4.8-16c-2-1.9-3.7-0.4-5,1.1
c-1.2,1.6,2.2,9.2,0.7,9.1s-3.8-6-4.6-6.4c-0.7-0.4-1.3,4.5-5.1,4.5c-3.7,0,2.7-9.5-3.9-5.4c-6.6,4.1-1.7,9.9-1.7,9.9l-5,0.4
c0,0,4.1,4.1,1.2,4.6s-5.8-9.1-5.8-9.1s3.1,12.9,1.2,11.2c-9.7-8.8-2.7,3-6,4.6c-3.3,1.7-2.9-5.3-7.6-4.4c-1.2,0.2-3.8,2.7-0.9,4.8
c2.9,2.1-6.2,6.2-10.4,6.6s-0.2,6.5-4.6,8.7c-3.1,1.6-7.8-2.5-7.8-2.5l3.7,9.5l-5.8,2.5l0.8,4.6c0,0-1.9,3.3-0.4,3.7
c1.5,0.4,4.6-2.5,4.6-2.5s4.6,2.9,5.8,0c1.2-2.9,7.9-0.4,12.8-1.7c5-1.2,1.2,5.8,1.2,5.8s-7.5-3.3-6.6,4.1s5.4,4.6,5.4,2.9
c0-1.7,0-4.6,5-4.1c5,0.4,2.5,2.9,6.6,2.1c4.1-0.8,3.1-4.4,6.6-8.7c3.1-3.8,13.3,4.4,11.6,8.4"/>
<line class="st5" x1="611.9" y1="166.5" x2="612.1" y2="166.2"/>
<path class="st5" d="M748.8,207.6c-2-1.5-6.9,2.2-6.9,2.2s-6.9,1.5-8.9,2.1c-1.5,0.5-6.9,1.3-8.2,1.6c-0.8-0.6-4.9,0.3-6.7-0.4
c-1.9-0.8-5.8,0-7.9-3.3c-2.1-3.3-4.7-0.1-4.7-0.1l2.7-3.2l-2.5-6.6l-6.2-1.7l-6.6-5c0,0-9.5,1.7-8.3,2.9s-3.7,3.7,0.4,5
c4.1,1.2-9.5,6.2-9.1,0c0.4-6.2,0.4-10.4-5-6.2s-6.6,5-8.7,9.1c-0.9,1.7-5.2-2.3-5.2-2.3s-4.7,7.2-8,5.2c-3.3-2.1-1.3-5.5,0.6-7.7
c0.7,1.6,0.7,1.7,1.9,3.5c3.3,3.3,2.9,2.5,4.6-0.4c1.7-2.9,2.1-8.7,2.1-8.7l-3.3-2.1c0,0-7,5-12,5.4c-5,0.4-4-2.9-0.3-3.4
c4.4-0.6-3-8.6-7.1-6.9c-4.1,1.7-1.2-5.4,3.3-5c4.6,0.4,6.6,3.3,6.6,3.3l2.9-3.3v2.5l4.6-2.9l0.4,3.7c0,0-1.7,4.6,3.7,3.7
s5.8-2.5,5.8-2.5s-2.9-3.3-5.4-1.2c-2.5,2.1,2.9-6.2,6.6-3.3c3.7,2.9,6.2,5,8.3,2.5c2.1-2.5,0.8-8.3,4.1-7.5
c3.3,0.8-9.9-2.1-9.9-2.1l3.3-2.5c0,0-2.5-6.2-5.8-4.6c-3.3,1.7-8.3-1.2-8.3-1.2l-0.8,4.1c0,0-9.1,2.6-11.2,2.7
c-9.9,0.3-12.7,9.4-16.5,8.5c-5-1.2-5.1-2.6-3.8-5c1.5-3-5.7-2.7-2.9-4.6c5.4-3.5-4.6-10.1-4.6-3.3c0,2.1-2.1,7-2.9,7.5
c-0.8,0.4-2.5-3.7-2.5-3.7s-3.3,2.1-3.1-1.6c0.2-2.1,2.8-5.3,4.1-4"/>
<path class="st5" d="M612.1,166.2c-0.2,0-0.4,0-0.5,0"/>
<path class="st5" d="M682.7,117.6c0,0-3,0.8-3.9,5.1c-0.3,1.3-1.2,2.7-1.2,2.7S685.9,124.8,682.7,117.6z"/>
<path class="st5" d="M626.8,181.2c0,0-2.9,1.1-1.9,3.9c1,2.8-0.4,2-0.4,2s5.8-1.2,2.6-5.5"/>
<path class="st5" d="M684,161.2c0,0,2.1,2,4.4,0.1c0.8-0.3,2-0.4,2-0.4s-3.5-4.7-6.1,0L684,161.2z"/>
<path class="st5" d="M633.5,149.5c0,0,0.4-3.1-2.5-3.6c-2.9-0.5-1.5-1.3-1.5-1.3s-1.8,5.7,3.6,5L633.5,149.5z"/>
<path class="st5" d="M618.3,158.8c0,0,0.4-3.1-2.5-3.6c-2.9-0.5-1.5-1.3-1.5-1.3s-1.8,5.6,3.6,5"/>
<path class="st5" d="M639.7,128.4"/>
<path class="st5" d="M646.9,122.7"/>
<path class="st5" d="M659.5,98.5"/>
<path class="st0" d="M714.3,112.8c0,0-0.5,2,1.4,2.5c1.9,0.5,0.9,1,0.9,1s1.5-3.6-2.1-3.5L714.3,112.8z"/>
<path class="st5" d="M691.4,148c0,0-2.6,7.9,0.7,12l0.7-0.9c0,0,4.4-7.7,5.4-6.6s-1,7.5-0.5,8.1c0.5,0.6,4.6-6,4.6-0.6
c0,0.7,1.7,2.4-0.6,2.8c-2.3,0.5,1.2,2.8-0.2,3.4c-1.5,0.6-1.6-1.2-5.4,0.4c-3.8,1.7-4.8,5.5-4.8,5.5l6.7-1.3c0,0,0.3,0.5-1.2,0.7
c-4.7,0.5-10.9,13.3-10.9,13.3s0.8-0.2,4,0.4c7.2,1.4,10.3,6.4,13.2,6.4c2.9,0,8.5,4.7,13.1,13.5c2.7,3.7,5.2,0.1,5.2-0.7
c0-0.8-0.3-2.7-0.3-2.7s-0.1-18.4,3.9-21.1c-3,4.2-4.6,19.1-2.5,19.9c2.1,0.8,5.4,0,5.4,0l1.2,1.7c0,0,1.7,2.3,6.6-0.4
s7.1-4.9,12.1-6.1c1.2-0.3,2.2-0.3,3-0.1"/>
<path class="st0" d="M703.3,147.5c0,0,2.7,3.7,6.2,3.9c3.5,0.2,2.9-2.1,4.8-1.4"/>
<path class="st0" d="M693.9,164.6c0,0,0.3-2.1-1.8-2.7c-0.5-0.4-1.1-1-1.1-1s-1.3,4.2,2.7,3.7L693.9,164.6z"/>
<line class="st5" x1="750.2" y1="192.6" x2="749.3" y2="195.1"/>
</g>
<g id="leaves">
<path class="st5" d="M661.6,156c0,0,5.7,2.3,1.4,5.7c-3.3-3-1.9-5.7-1.9-5.7l1.6-2.7c0,0-0.9-4.9-7.7-3.7c2.7,7,7.2,2.6,7.2,2.6"/>
<path class="st0" d="M727.3,129.8c-0.2,2.2,1.8-1.3,2.2,4c0.1,2-1.5,2.9-1.5,2.9c4.1,1.2,4-2.2,3.7-3.1c-0.3-0.8-2.6-2.1-2.6-2.1"
/>
<path class="st0" d="M702.6,116.5c0,0-1.7-4.3,1.9-6.8C706.7,113.1,702.6,116.5,702.6,116.5c-0.1-0.1-1.6,3.3-3.8,3.2
c-2.2-0.1-3.8,3.4-3.8,3.4s3.3,2.4,4.1-3.3c4.9-1.4,4.9,1.5,4.9,2.6c0,0-0.4,4.4,4.4,4.2c0.6-2.8-4.4-4.2-4.4-4.2s5.8,1.9,7.9-2.9"
/>
<path class="st5" d="M641.2,147.2c0,0-0.5,1.2,3.8,3.5c4.4,2.3,3.3-1.7,3.3-1.7s-1.5-5,3.7-6.2c1.7,7.7-2.8,7.6-2.8,7.6"/>
<path class="st5" d="M628.9,139.9c0,0-7.7,0.2-7.3-4.4c0,0,6.2-3.3,8.3,4.6"/>
<path class="st5" d="M670.8,129.6c0,0-7-0.4-4.8-6.2c2.5,0.2,4.3,4.8,3.7,5.8"/>
<path class="st5" d="M662.4,130.7c-1.6-0.6-2.5-0.4-2.5-0.4s-2.7-2.7-6.8,0.7c-2.1,1.3-2.2,0-2.2,0c2.7,2.7,3.4,2.7,6,2.1
s2.6-2.7,2.6-2.7l-2.8-2.4c0,0-2.8-3.3,1.5-5.7c2.6-1.3,0.6-2.8,0.6-2.8s4,2.7,3.2,4.8c-0.8,2.1-6.1,1.9-6.1,1.9"/>
<path class="st5" d="M626.2,146.1c0,0-0.4,3.5-7.9,3.7c4.1-5,0.4-3.1,7.2-5.8C626.2,145.5,626.2,146.1,626.2,146.1z"/>
<path class="st0" d="M654.6,108.5c0,0-5.1-3.9-7.2,1.8c3.6,1.5,3.9,0.8,6.4-1.1"/>
<path class="st5" d="M644.1,154.9c0,0,2.8-0.7,5.2,4.8c-5-1.6-2.5,0.6-6.6-3.7C643.6,155.1,644.1,154.9,644.1,154.9z"/>
<path class="st0" d="M681.5,193.9c0,0,1.4,2.4-2,4.6c-2.9-3.4,1.2-5.5,0.6-5c4.1-0.1,3.5-2,2.9-4.9c-1.1-4.8-3-1.4-3-1.4
s-3.2,4.2-7.5,1.1c4.8-6.2,7.2-1.1,7.2-1.1"/>
<path class="st0" d="M643.7,164.3c0,0,0.7-5.3-3.5-6.4c-4.2-1.1-2-2.2-2-2.2s-2.5,8.1,5.4,8"/>
<path class="st5" d="M685.8,178.1c0,0,3.8-2.7,1.3-6.3c-2.5-3.6-1.5-3-1.5-3s-5.5,4.7,0.6,9.7"/>
<path class="st0" d="M667.2,118.8c0,0,1.8-4.3-2.1-6.3c-3.9-2-1.5-2.6-1.5-2.6s-4.3,7.4,3.5,9L667.2,118.8z"/>
<path class="st0" d="M674.7,139c0,0,0.6-1.6-1.2-3.7c-2.2-2.5-2.9-2.2-2.9-2.2S668.4,139.6,674.7,139"/>
<path class="st0" d="M650.2,167.9"/>
<path class="st0" d="M653.6,174.3"/>
<path class="st0" d="M644.2,179.8c0,0,0.5-3.7-2.3-4.5c-2.8-0.8-1.3-1.5-1.3-1.5s-1.7,5.7,3.6,5.6"/>
<path class="st0" d="M674.1,164.5c0,0-1.8-1.9-4.6-2c-1.7-0.1-2-0.3-2-0.3s2.3,5.4,6.3,2"/>
<path class="st0" d="M633.9,172.1c0,0,3.7,0.5,4.5-2.2c0.8-2.8,1.5-1.3,1.5-1.3s-5.7-1.8-5.6,3.5"/>
<path class="st0" d="M683.7,189.5c1.1,0.8,4.7,1.4,4.7,1.4s-0.9-5.1-5.2-2"/>
<path class="st0" d="M610.1,163.2c0,0,0.6,3.9,3.8,3.8c3.2-0.1,1.9,1.1,1.9,1.1s0.1-6.3-5.5-4.5"/>
<path class="st5" d="M632.6,123.3c0,0-6.1-5.2,0.1-9.2c2.3,1.9,1.4,8.2,0.1,9.4L632.6,123.3z"/>
<path class="st0" d="M668.4,105.3c0,0-6.6-1.3-3.7-6.8c2.5,0.5,4.4,5.4,4,6.8L668.4,105.3z"/>
<path class="st0" d="M720.8,172.6c0,0,0.2,2.6,2.4,4.5c1.3,1.1,1.4,1.5,1.4,1.5s1.6-5.7-3.6-5.5"/>
<path class="st0" d="M680.5,100.9c0,0-0.8,3.1,2.1,3.9c2.9,0.8,1.4,1.5,1.4,1.5s1.8-5.7-3.7-5.6L680.5,100.9z"/>
<path class="st5" d="M679,110.5c0,0,6.7-0.1,5.1,5.9c-2.5,0.1-5.5-4.3-5.3-5.8L679,110.5z"/>
<path class="st0" d="M656.5,120.2c0,0,6.4-0.8,3.9-6.3c-3.6,1.5-3.4,2.1-3.8,5.3L656.5,120.2z"/>
<path class="st0" d="M711.6,118.1c0,0-1.8-1.9-4.6-2c-1.7-0.1-2-0.3-2-0.3s2.3,5.4,6.3,2"/>
<path class="st0" d="M724.9,111.7c0,0-2.5-0.5-4.9,1.1c-1.4,0.9-1.8,0.9-1.8,0.9s5.1,3.1,6.3-2"/>
<g>
<path class="st5" d="M693.1,123.3c0,0-7.6,1.8-4.5-5.9c2.9-1.2,4.2,3.6,4.4,4.7L693.1,123.3z"/>
</g>
<g>
<path class="st0" d="M721.1,143.1c0,0-7.6,1.8-4.5-5.9c2.9-1.2,4.2,3.6,4.4,4.7L721.1,143.1z"/>
</g>
<g>
<path class="st0" d="M686.5,138.1c0,0-5.5,1.3-3.2-4.2c2.1-0.9,3,2.6,3.1,3.3L686.5,138.1z"/>
</g>
<path class="st0" d="M705.5,154.4c0.9-1,0.5-2.3,0.3-2.7c-1-2.1-1.6-2.1-1.6-2.1s-2.8,4.1,1.7,4.9"/>
<path class="st0" d="M672.3,162.7c0,0,0.1-2.6-1.8-4.7c-1.1-1.2-1.2-1.6-1.2-1.6s-2.2,5.5,3,5.9"/>
<path class="st0" d="M620,147.8c0,0-2.2-4.7-5.8-1.4c2,2.4,2.5,2,5,1.6"/>
<path class="st0" d="M637.1,112.9c0,0,0.1,4.2,3.8,5.2c2.5,0.7,2,1.7,2,1.7s1.3-7.4-5.6-6.4"/>
<path class="st0" d="M646.9,200.1c0,0-2.5-0.3-4.8,1.4c-1.3,1-1.7,1-1.7,1s5.3,2.7,6.2-2.4"/>
<path class="st5" d="M640.5,143c0,0,2.7,5.4-2.2,8.8c-2.9-4,2-8.3,2-8.3s1.6-4.1,4.3-4.2c2.7,0,4.4-4.3,4.4-4.3s-3.3-2.5-4.9,2.8
c-6.6,4-6.1-1.1-6.1-1.1s-0.7-7.5-6.4-6.9c0.3,4.3,0.1,3.7,5.4,6.3c5.3,2.5-4.5-3-8.1,4.5c2.7,4.6,5.8-2.3,5.8-2.3"/>
<path class="st0" d="M618.8,137.3c0,0-5,2.8-5-2.3c0-1.5,0-1.2,0.5-2.9C615,133.2,616.7,136,618.8,137.3z"/>
<path class="st5" d="M706.5,147c0,0,3.7-1.3,1.2-5.6c-2.5-4.2-3.7-0.3-3.7-0.3s-1.4,5-6.4,3.3c2.6-7.4,6.3-4,6.3-4"/>
<path class="st5" d="M715.1,158.3"/>
<path class="st5" d="M682.7,164.5c0,0,0.1,6.8-5.9,5.1c-0.2-4.8,4-4.3,5.5-4.1"/>
<path class="st5" d="M665.4,143.9c0,0-0.7,2.9-8.6,2.1c-1.5-0.2-3.8-7.6,7.2-3c3.2,1.5,3.6-1.4,2.3-1c-1.2,0.4-8.2-6.8-4.4-9
c3.8-2.3,3.5-1.7,5.4-1.6c-2.5,4.8-4.7,7.6-4.7,7.6"/>
<path class="st0" d="M647.3,133.4c-0.3-1.2-1.6-0.8-1.6-0.8s-0.4-2.6-3.9-1.2c-0.4,0.1-2.3-0.3-2.3-0.3c0.4,1.1,1.7,2.6,3.6,2.7
c1.9,0.1,2.3-1.3,2.3-1.3l-1.4-2.2c0,0-1.8-2.9,1.6-3.6c1-0.1,2.3-0.9,2.3-0.9s1.4,1.9,0.5,3.1c-1,1.2-4.5-0.1-4.5-0.1"/>
<path class="st5" d="M662.5,190.7c0,0-2.5,7,4.5,7.3c0.5-6.4-3-6.1-4.6-6.5"/>
<path class="st0" d="M665.2,189.5c0,0-1.9,0.9-4.3-2.7c3.7,0.5,1.7-0.8,5.1,1.8C665.5,189.3,665.2,189.5,665.2,189.5z"/>
<path class="st5" d="M677.9,144.3c1.1,1.4,1.9,1.6,1.9,1.6s3.2,4.3,8,4.1c-0.6-2.5-1.5-4.1-4-4.9c-2.5-0.8-3.6,1-3.6,1l1.1,3.5
c0.6,4.6-5.9,5.3-5.9,5.3s-1.6-2.9,0.2-4.2c1.8-1.4,5.4,0.9,5.4,0.9"/>
<path class="st5" d="M676.5,183.1c0,0,4-5.5,6.9-0.8c-2.5,3.7-5.7-0.3-6.2-0.3"/>
<path class="st5" d="M661.4,179.2c0,0-3.7,0.3-3.3-7.1c3.5,1.9,5,2.6,5.4,6.7C662,179.3,661.4,179.2,661.4,179.2z"/>
<path class="st5" d="M665,150.9c-0.2,0.1,3.8-5.1,6.8-0.4C668.3,155.6,665,150.9,665,150.9C665.5,150.5,665.1,150.8,665,150.9z"/>
<path class="st0" d="M715.8,146.5c0.3,0.2,1.6,3.2-2.2,3.6C712.1,146.7,715.5,146.3,715.8,146.5z"/>
<path class="st0" d="M662.1,207.4c0,0,5.2-3.4,5.5,2.1c-4.4,1-5.7-1.7-5.7-1.7l-1.3-2.8c0,0-4.5-2-7.4,4.3c7.3,1.8,6.3-4.5,6.3-4.5
"/>
<path class="st5" d="M648.1,175.7c0,0,4-5.5,6.9-0.8c-2.7,6.5-3.6,0-6.1,0.7"/>
<path class="st0" d="M631.2,155.3c0,0-4.4,2-6.4-5.2c3.9,0.7,6.9,1.7,5.3,5.4"/>
<path class="st0" d="M674.4,161.7c0,0-0.6-4.9,6.9-4.5c-1.9,3.5-3.7,6-6.8,3.4"/>
<path class="st0" d="M646.3,171.9c0,0-1.9-4.5,5.3-6.3c-0.8,3.9-1.9,6.9-5.5,5.2"/>
<path class="st0" d="M648.3,195.4c0,0-4.7-1.2-1.7-8c2.6,3,4.3,5.7,0.7,7.6"/>
<path class="st0" d="M636.4,176.6c0,0-2.8,4-8.1-1.2c3.7-1.4,6.8-2,7.4,1.9"/>
<path class="st0" d="M626.7,133c-1.1-0.6-0.4-1.7-0.4-1.7s-2.4-1.1-0.1-4c0.2-0.4,0.3-2.3,0.3-2.3c1,0.7,2,2.3,1.7,4.2
c-0.4,1.8-1.8,1.9-1.8,1.9l-1.8-1.9c0,0-2.3-2.5-3.9,0.6c-0.3,1-1.5,2-1.5,2s1.4,1.9,2.9,1.3c1.5-0.6,1.1-4.4,1.1-4.4"/>
<path class="st0" d="M625.3,163.8c-1.1,0.5-1.6-0.8-1.6-0.8s-2.3,1.3-3.3-2.3c-0.2-0.4-1.7-1.6-1.7-1.6c1.1-0.4,3.1-0.2,4.3,1.1
c1.3,1.4,0.4,2.6,0.4,2.6l-2.6,0.3c0,0-3.4,0.4-1.8,3.5c0.6,0.8,0.7,2.4,0.7,2.4s2.4,0,2.7-1.6c0.4-1.5-2.9-3.5-2.9-3.5"/>
<path class="st0" d="M639.4,192.1c0,0-1.6,4-7.2,0.5c2.9-1.9,5.5-3,6.7,0.3"/>
<path class="st5" d="M697.3,107.4c0,0-3.4-1.5,0.7-7.8c2.1,3.3,3.1,4.7,1.4,8.5C697.8,107.8,697.3,107.4,697.3,107.4z"/>
<path class="st0" d="M738.1,110.1c0,0-1.5-5.6,2.5-4.8c-0.5,3.4-2.6,4.4-2.6,4.4s0-0.2-1.6,2c-2.2,3.1-0.2,2.4,2.2,2.9
c0.7-0.4,1.6-2.6,4.5,0.8c-3.1,2.2-4.3-0.6-4.5-0.8"/>
<polyline class="st5" points="720.4,128.7 722,133.2 724.2,133.2 "/>
<path class="st0" d="M668,189.7c0,0-1.5-1.4,1-4.9c0.8,3.7,1.3,1.3,0.1,5.4C668.3,189.9,668,189.7,668,189.7z"/>
<path class="st0" d="M696.9,170.2c1.3,0.9,2.1,0.8,2.1,0.8s3.9,2.7,7.9,1.1c-1.2-1.9-2.4-3-4.8-3c-2.3,0-2.8,1.9-2.8,1.9l2,2.6
c1.8,3.7-3.4,6.2-3.4,6.2s-2.2-1.9-1.1-3.6c1.1-1.7,4.8-0.8,4.8-0.8"/>
<path class="st0" d="M703.5,165.9c-0.1,0.1,2.1-5,5.4-1.8C707.2,169.1,703.5,165.9,703.5,165.9
C703.9,165.5,703.6,165.8,703.5,165.9z"/>
<path class="st0" d="M632.5,199.6c0,0.2-1.1-5.3,3.5-4.5C637.4,200.2,632.5,199.6,632.5,199.6C632.6,199.1,632.5,199.6,632.5,199.6
z"/>
</g>
</svg>
</div>
</div>关于Javascript 干扰第二个 SVG 线动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55941011/