SVG 警笛 CSS 动画

Question

我正在尝试在 SVG 动画中复制这个警笛。

这是我创建的：

svg {
  height: 200px;
}

#siren {
  animation: flash 1s linear infinite;
}

#line1, #line2, #line3 {
  stroke-dasharray: 10;
  animation: line-dash 1s forwards infinite;
}

@keyframes line-dash {
  0% {
    stroke-dashoffset: 46;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes flash {
 to {
    fill: white;
  }
}

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104.69 98.48">
  <title>siren</title>
  <g id="_32b192a6-4f40-44d1-9e98-565e0c30a65b" data-name="32b192a6-4f40-44d1-9e98-565e0c30a65b">
    <g id="ef66adc2-a9a5-4b4a-830b-37ffb06635fc">
      <path id="siren" d="M342.14,70.62h2.42a16,16,0,0,1,16,16V104H326.14V86.62A16,16,0,0,1,342.14,70.62Z" transform="translate(-290.79 -11.71)" fill="#f15d44" stroke="#42404d" stroke-miterlimit="10" stroke-width="2"/>
      <rect x="25.67" y="88.75" width="53.78" height="9.73" fill="#f1f2f2"/>
    </g>
  </g>
  <line id="line2" x1="52.56" y1="46.6" x2="52.56" fill="none" stroke="#ffdb55" stroke-miterlimit="10" stroke-width="10"/>
  <line id="line3" x1="68.2" y1="51.13" x2="101.15" y2="18.19" fill="none" stroke="#ffdb55" stroke-miterlimit="10" stroke-width="10"/>
  <line id="line1" x1="36.48" y1="52.32" x2="3.54" y2="19.37" fill="none" stroke="#ffdb55" stroke-miterlimit="10" stroke-width="10"/>
</svg>

Answer 1

我想你会喜欢这个：

svg {
  height: 200px;
}

#siren {
  animation: color-flash 1s linear infinite;
}

#line1, #line2, #line3 {
  stroke-dasharray: 10;
  animation: line-dash 1s forwards infinite;
}

@keyframes line-dash {
  0% {
    stroke-dashoffset: 46;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes flash {
 to {
    fill: white;
  }
}
@keyframes color-flash {
  0% {
    fill: white;
  }
  50% {
    fill: red;
  }
  100% {
    fill: yellow;
  }
}

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104.69 98.48">
  <title>siren</title>
  <g id="_32b192a6-4f40-44d1-9e98-565e0c30a65b" data-name="32b192a6-4f40-44d1-9e98-565e0c30a65b">
    <g id="ef66adc2-a9a5-4b4a-830b-37ffb06635fc">
      <path id="siren" d="M342.14,70.62h2.42a16,16,0,0,1,16,16V104H326.14V86.62A16,16,0,0,1,342.14,70.62Z" transform="translate(-290.79 -11.71)" fill="#f15d44" stroke="#42404d" stroke-miterlimit="10" stroke-width="2"/>
      <rect x="25.67" y="88.75" width="53.78" height="9.73" fill="#f1f2f2"/>
    </g>
  </g>
  <line id="line2" x1="52.56" y1="46.6" x2="52.56" fill="none" stroke="#ffdb55" stroke-miterlimit="10" stroke-width="10"/>
  <line id="line3" x1="68.2" y1="51.13" x2="101.15" y2="18.19" fill="none" stroke="#ffdb55" stroke-miterlimit="10" stroke-width="10"/>
  <line id="line1" x1="36.48" y1="52.32" x2="3.54" y2="19.37" fill="none" stroke="#ffdb55" stroke-miterlimit="10" stroke-width="10"/>
</svg>

Answer 2

一个破折号数组，其中一个值与您的一样

stroke-dasharray: 10;

实际上是一个快捷方式：

stroke-dasharray: 10 10;

这意味着破折号模式由长度为 10 的破折号和长度为 10 的间隙组成。然后重复破折号 10、间隙 10、破折号 10、间隙 10 等

如果你想要一个短破折号，然后是一个大间隙，你需要在破折号模式中添加一个合适的间隙值。例如：

stroke-dasharray: 10 40;

svg {
  height: 200px;
}

#siren {
  animation: flash 1s linear infinite;
}

#line1, #line2, #line3 {
  stroke-dasharray: 10 40;
  animation: line-dash 1s forwards infinite;
}

@keyframes line-dash {
  0% {
    stroke-dashoffset: 46;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes flash {
  to {
    fill: white;
  }
}

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104.69 98.48">
  <title>siren</title>
  <g id="_32b192a6-4f40-44d1-9e98-565e0c30a65b" data-name="32b192a6-4f40-44d1-9e98-565e0c30a65b">
    <g id="ef66adc2-a9a5-4b4a-830b-37ffb06635fc">
      <path id="siren" d="M342.14,70.62h2.42a16,16,0,0,1,16,16V104H326.14V86.62A16,16,0,0,1,342.14,70.62Z" transform="translate(-290.79 -11.71)" fill="#f15d44" stroke="#42404d" stroke-miterlimit="10" stroke-width="2"/>
      <rect x="25.67" y="88.75" width="53.78" height="9.73" fill="#f1f2f2"/>
    </g>
  </g>
  <line id="line2" x1="52.56" y1="46.6" x2="52.56" fill="none" stroke="#ffdb55" stroke-miterlimit="10" stroke-width="10"/>
  <line id="line3" x1="68.2" y1="51.13" x2="101.15" y2="18.19" fill="none" stroke="#ffdb55" stroke-miterlimit="10" stroke-width="10"/>
  <line id="line1" x1="36.48" y1="52.32" x2="3.54" y2="19.37" fill="none" stroke="#ffdb55" stroke-miterlimit="10" stroke-width="10"/>
</svg>

SVG 警笛 CSS 动画

SVG siren CSS animation

css

svg

svg-animate

pure-css