Question

我试图将一个相关的SVG路径绘制到div块，该块也会根据当前动画状态动画显示其他元素的不透明度。基本上类似于：https://www.biggerpicture.agency/about-us#main＆＃34;我们的哲学＆＃34;。

我设法创建了我的六边形形状并使用stroke-dashoffset方法制作动画，但我正在努力研究如何包含动画来操纵其他div块的不透明度。如果你们能给我一些关于如何做到这一点的提示，那就太棒了。

<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="100%" height="100%" viewBox="0 0 600 600" xml:space="preserve">
<path class="polygon" d="M267,30l271,146l14,262L329,566L26,380l70.9-254.3L267,30z"/>
</svg>




<style>
.polygon {
        fill: none;
        stroke: white;
        stroke-width: 3;
        stroke-dasharray: 1650;
        stroke-dashoffset: 1650;
        animation-name: draw-polygon;
        animation-duration: 4s;
        animation-fill-mode: forwards; 
        animation-iteration-count: 1;
        animation-timing-function: ease-in-out;
}    

@keyframes draw-polygon {
  to {
    stroke-dashoffset: 0;
  }
}

</style>

Answer 1

一种方法是只为其他对象创建动画，并使用animation-delay让它们在行达到你想要的长度时开始。

＆＃13;

.polygon {
        fill: none;
        stroke: black;
        stroke-width: 3;
        stroke-dasharray: 1650;
        stroke-dashoffset: 1650;
        animation-name: draw-polygon;
        animation-duration: 4s;
        animation-fill-mode: forwards; 
        animation-iteration-count: 1;
        animation-timing-function: ease-in-out;
}    

@keyframes draw-polygon {
  to {
    stroke-dashoffset: 0;
  }
}

.circle1, .circle2 {
  opacity: 0;
  animation-name: fade-in;
  animation-duration: 0.5s;
  animation-fill-mode: forwards; 
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
}

.circle1 {
  animation-delay: 1100ms;
}

.circle2 {
  animation-delay: 1500ms;
}


@keyframes fade-in {
  to {
    opacity: 1;
  }
}

＆＃13;

<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="400" height="400" viewBox="0 0 600 600" xml:space="preserve">
  <path class="polygon" d="M267,30l271,146l14,262L329,566L26,380l70.9-254.3L267,30z"/>
  <circle class="circle1" cx="538" cy="176" r="40"/>
  <circle class="circle2" cx="552" cy="438" r="40"/>
</svg>

＆＃13;

创建动画SVG路径

1 个答案: