我知道在 SO 上有一些问题有类似的问题，但它们与我当前的问题不匹配，我正在尝试用一些路径 svg 做一个动画，在 CodePen 上我的动画工作，但类"脉冲"(颜色变化)不起作用，看起来它被关闭了(？)，而在 Atom 编辑器中，甚至动画都不适合我， 即使它在浏览器前打开
我已经尝试将"脉冲"类放在其他div 上，但情况不会改变，只有放在 svg 容器上，它才能工作，但会为 svg 文件覆盖的整个区域着色，而不是 SVG 的各个元素，因此我将"脉冲"类放在单独的路径上， 但这似乎没有办法工作(？为什么代码笔上的previe和Atom的预览之间存在这种差异？
请打开代码笔示例文件
<div class="spin ">
<svg viewBox="0 0 800 800" >
<g class="pulse">
<path class="pulse"
d="M587.3,263.2c20.7,1.1,40.8,5.5,60.7,11.4c17,5,34.1,5.2,49.6-5c6.6-
4.4,12.6-9.8,18.8-14.8c6.8-5.5,12.7-12.2,21.6-14.9
c3.8-1.2,4.6-6.2,1.9-9.7c-2.7-3.5-6.6-5.3-10.6-3.2c-6.1,3.2-12.1,6.9-
17.6,11.1c-5,3.8-9.2,8.7-13.9,12.9
c-8.2,7.3-17.8,13.2-28.9,11.4c-17.8-2.9-35.3-7.6-52.9-11.6c0-0.8,0-
1.5,0.1-2.3c3.4-0.8,6.8-2,10.3-2.4
c11.7-1.5,23.5-2.6,35.2-4.1c9.5-1.2,18.2-4.4,24.8-11.7c3.3-3.7,3.5-
8.7,0.9-12.4c-2.8-3.9-7.1-5-12-2.9
c-3.8,1.6-7.9,2.9-11.3,5.2c-8.4,5.8-17.9,7.6-27.7,9c-18.3,2.5-37,2.8-
54.2,10.5c-0.7,0.3-1.6,0.3-2.5,0.3c-7-0.2-14-0.2-20.9-0.6
c-22.3-1.2-44.6-2.5-66.9-3.7c-2.6-0.1-5.4,0.3-7.8,1.2c-5.4,2-8.1,6.8-
6.7,11.2c1.4,4.4,5.6,6.6,11.5,5c15.2-4,30.6-4.7,46.1-2.9
c7.6,0.8,15.2,2.4,22.7,3.7c0,0.5,0,1,0,1.5c-3.1,2.2-6.4,4.1-9.2,6.5c-
2.9,2.6-5.8,3-9.5,2c-16.5-4.5-32.6-3.5-48.3,3.6
c-6.2,2.8-9.3,6.9-8.3,11.5c1.1,5.1,5.5,8,12.4,7.8c4.3-0.1,8.6-1.2,12.9-
1.2c6.3,0,12.6,0.6,18.9,0.9c0.1,0.6,0.2,1.2,0.3,1.8
c-3.3,3.9-6.5,7.9-9.8,11.8c-10.7,12.5-19.9,25.9-26.5,40.9c-5.9,13.4-
1.5,24.2,12.3,29.2c17.2,6.2,33.8,5,48.6-6.8
c8.2-6.6,16.8-12.1,27.5-13.2c8.6-0.9,17.2-2,25.9-2.4c15-0.7,30-1,45-
1.1c10.4,0,17.8-4.3,24.1-12.5c9.8-12.9,22.4-19.9,39.5-16.9
c5.5,1,11.6,0.1,17.3-0.9c7-1.3,10.1-7.9,7.6-14.5c-2.2-5.8-6.7-9.3-12.6-
8.7c-7.2,0.7-14.8,1.7-21.2,4.7
c-12.7,6.1-24.8,13.6-36.8,21c-4.1,2.5-8.1,4.3-13,4.2c-13.3-0.2-26.6-
0.5-40-0.4c-11.8,0.1-23.7,0-35.4,1.3
c-14.2,1.6-28.6,4.1-40.4,13.1c-10.3,7.8-22.3,6-34.6,7.6c0.9-2.3,1.4-
3.9,2.1-5.3c8.6-17.7,20.9-32.3,36-44.9
c3.4-2.8,6.5-4,10.9-
3c20.8,4.7,41.6,9.4,62.4,13.9c5.4,1.2,10.8,2.3,16.2,2.8c3.1,0.3,6.1-
1.1,6.6-4.7c0.6-3.8-1.2-6.4-4.9-7.6
c-1.3-0.4-2.6-0.6-3.9-0.9c-16.2-3.9-32.4-7.6-48.5-12c-6.4-1.7-
12.3-5.1-19.7-8.3C570.1,268.2,577.7,262.7,587.3,263.2z">
</g>
</svg>
</div>
.pulse{
animation: pulse 5s infinite;
transition:.5s ease;
}
@keyframes pulse {
0%{
background-color: #001F3F;
}
100%{
background-color: #FF4136;
}
}
请打开代码笔示例文件
正如我所评论的：您需要使用fill而不是background.此外，您还可以在 css 文档中使用 SASS 语法。
.spin {
width:90vh;
animation: spin 3s infinite;
flex-basis: 50%;
transform-origin: center;
filter: blur(2px);
transition: .5s ease;
}
.spin .pulse {
animation: pulse 5s infinite;
transition: .5s ease;
}
.spin:nth-child(1) {
animation-duration: 2.85s;
}
.spin:nth-child(2) {
animation-duration: 3.85s;
}
.spin:nth-child(3) {
animation-duration: 4.85s;
}
.spin:nth-child(4) {
animation-duration: 5.85s;
}
@keyframes spin {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
@keyframes pulse {
0% {
fill: #001F3F;
}
100% {
fill: #FF4136;
}
}<div class="spin ">
<svg viewBox="0 0 800 800" >
<g class="pulse">
<path class="pulse" d="M587.3,263.2c20.7,1.1,40.8,5.5,60.7,11.4c17,5,34.1,5.2,49.6-5c6.6-4.4,12.6-9.8,18.8-14.8c6.8-5.5,12.7-12.2,21.6-14.9
c3.8-1.2,4.6-6.2,1.9-9.7c-2.7-3.5-6.6-5.3-10.6-3.2c-6.1,3.2-12.1,6.9-17.6,11.1c-5,3.8-9.2,8.7-13.9,12.9
c-8.2,7.3-17.8,13.2-28.9,11.4c-17.8-2.9-35.3-7.6-52.9-11.6c0-0.8,0-1.5,0.1-2.3c3.4-0.8,6.8-2,10.3-2.4
c11.7-1.5,23.5-2.6,35.2-4.1c9.5-1.2,18.2-4.4,24.8-11.7c3.3-3.7,3.5-8.7,0.9-12.4c-2.8-3.9-7.1-5-12-2.9
c-3.8,1.6-7.9,2.9-11.3,5.2c-8.4,5.8-17.9,7.6-27.7,9c-18.3,2.5-37,2.8-54.2,10.5c-0.7,0.3-1.6,0.3-2.5,0.3c-7-0.2-14-0.2-20.9-0.6
c-22.3-1.2-44.6-2.5-66.9-3.7c-2.6-0.1-5.4,0.3-7.8,1.2c-5.4,2-8.1,6.8-6.7,11.2c1.4,4.4,5.6,6.6,11.5,5c15.2-4,30.6-4.7,46.1-2.9
c7.6,0.8,15.2,2.4,22.7,3.7c0,0.5,0,1,0,1.5c-3.1,2.2-6.4,4.1-9.2,6.5c-2.9,2.6-5.8,3-9.5,2c-16.5-4.5-32.6-3.5-48.3,3.6
c-6.2,2.8-9.3,6.9-8.3,11.5c1.1,5.1,5.5,8,12.4,7.8c4.3-0.1,8.6-1.2,12.9-1.2c6.3,0,12.6,0.6,18.9,0.9c0.1,0.6,0.2,1.2,0.3,1.8
c-3.3,3.9-6.5,7.9-9.8,11.8c-10.7,12.5-19.9,25.9-26.5,40.9c-5.9,13.4-1.5,24.2,12.3,29.2c17.2,6.2,33.8,5,48.6-6.8
c8.2-6.6,16.8-12.1,27.5-13.2c8.6-0.9,17.2-2,25.9-2.4c15-0.7,30-1,45-1.1c10.4,0,17.8-4.3,24.1-12.5c9.8-12.9,22.4-19.9,39.5-16.9
c5.5,1,11.6,0.1,17.3-0.9c7-1.3,10.1-7.9,7.6-14.5c-2.2-5.8-6.7-9.3-12.6-8.7c-7.2,0.7-14.8,1.7-21.2,4.7
c-12.7,6.1-24.8,13.6-36.8,21c-4.1,2.5-8.1,4.3-13,4.2c-13.3-0.2-26.6-0.5-40-0.4c-11.8,0.1-23.7,0-35.4,1.3
c-14.2,1.6-28.6,4.1-40.4,13.1c-10.3,7.8-22.3,6-34.6,7.6c0.9-2.3,1.4-3.9,2.1-5.3c8.6-17.7,20.9-32.3,36-44.9
c3.4-2.8,6.5-4,10.9-3c20.8,4.7,41.6,9.4,62.4,13.9c5.4,1.2,10.8,2.3,16.2,2.8c3.1,0.3,6.1-1.1,6.6-4.7c0.6-3.8-1.2-6.4-4.9-7.6
c-1.3-0.4-2.6-0.6-3.9-0.9c-16.2-3.9-32.4-7.6-48.5-12c-6.4-1.7-12.3-5.1-19.7-8.3C570.1,268.2,577.7,262.7,587.3,263.2z" class="spin pulse" />
</g>
<g class="pulse">
<path d="M226,305.6c10.3-0.8,18.3-7.8,24.5-16c3-3.9,2.9-8.5,0-12.6c-2.5-3.6-8-5.5-12-3.7c-2.2,0.9-4.2,2.7-5.8,4.6
c-6.7,7.9-14.3,14.1-25,16.3c-4.3,0.9-7.9,4.6-12.1,6.7c-5.1,2.6-10.2,5.3-15.6,7.2c-4,1.4-8.5,1.3-12.8,2.1
c-9.2,1.5-18.7,1.6-27.2,6.7c-4.4,2.6-9.5,4-14.2,6.2c-8.4,3.8-17,5.2-26.3,4.2c-9.1-1-18.7-1.4-26.8,3.6
c-13.2,8.2-26.2,17-39,25.9c-8.7,6.1-9.9,18.7-3,27c6.5,7.8,17.9,8.5,25.8,1.2c2.7-2.5,5-5.4,7-8.4c3.5-5.2,6.8-10.7,10-16.1
c4.2-7.2,10.2-10.5,18.5-10.5c5.5,0,11-0.6,16.4-1.7c7.3-1.4,14.5-3.4,21.8-5.2c-0.3,4.9-1.2,9.9-0.8,14.7
c1.4,18.8-1.2,37.3-8.2,54.4c-7.7,18.9-5.8,35.4,4.6,52.5c9.4,15.6,11.5,32.5,5.2,50.4c-2.2,6.3-2.2,13.7-2,20.6
c0.1,5.6,4.1,9.4,9.5,10.9c10.5,3,25.2-5.7,26.3-16.5c0.6-5.3-1.1-11.2-2.9-16.5c-6.7-19.7-14.3-39.1-20.8-58.8
c-2.4-7.3-4.3-15.4-3.9-22.9c1.5-23,9.5-44.8,15-67c0.2-0.8,0.7-1.5,1.1-2.3c3.5-7.8,7-15.6,10.6-23.4c0.5-1,2-2.2,2.8-2.1
c11.8,1.5,18.8-5.7,26.4-13.2C202.5,315.1,211.9,306.8,226,305.6z" class="spin pulse" />
</g>
<g class="pulse">
<path d="M386.7,280.2c-3.2-6.7-8.1-8.2-14-3.7c-22.4,17.1-41.9,37-56.2,61.6c-2.5,4.3-5.7,8.3-9.3,11.6
c-8.8,8.1-15.1,17.6-19.2,28.8c-1.8,5-3.6,10.5-7,14.2c-9.6,10.5-11,22-6,34.7c2.7,6.8,2.6,13.6,0.5,20.6c-0.4,1.4-0.8,2.9-1,4.4
c-0.7,5.2,1.6,10.3,5.7,12.4c4.8,2.4,10,2,13.4-1.8c2.7-2.9,5.3-7.5,5.2-11.2c-0.1-6.3-2.1-12.7-4-18.8c-1.6-5.1-4.3-9.7-6.2-14.7
c-1.6-4.2-1.2-8.3,1.2-12.4c4.9-8.6,9.2-17.6,14.2-26.2c3.2-5.5,6.5-11.4,11-15.7c9.6-9,17.5-19.1,24-30.5
c9-15.7,22-27.8,36.7-40.1c1.2,3.9,2.4,6.9,3,9.9c4.2,23.4-0.6,46-5.7,68.6c-1.1,5-3.5,8.8-9.3,9.4c-2,0.2-4,1.7-5.8,2.8
c-24.7,15-34.7,48.1-21.2,74c6.5,12.4,15.3,23.8,23.6,35.2c2.2,3,6.3,4.9,9.9,6.3c7.3,2.8,14.8-2.2,15.5-10.1
c0.2-2.6,0-5.4-0.6-7.9c-2.6-11.8-6.8-23.4-6.1-35.8c1.5-26.9,6-53.2,15.1-78.6c5-14,8.7-28,4.7-43.4
C395.2,309.2,393.4,294,386.7,280.2z M362.4,464.2c-11.9-7.2-16.9-18.6-17-32.1c-0.1-12.6,4.1-23.7,15.6-31
c1.1,21.1,2.2,41.8,3.2,62.5C363.6,463.8,363,464,362.4,464.2z" class="spin" />
</g>
<g class="pulse">
<path d="M293.2,328.5c2.6-3.1,5.8-6,9.3-8.4c5.4-3.7,7.1-8,4-12.3c-2.9-3.9-9-5.2-14.2-1.8c-5.8,3.8-11.6,8.3-15.5,13.5
c-7.1,9.5-14.6,17.2-29.3,16c-0.4,0-0.8,0.1-1.2,0.2c-19.2,6.9-39.1,12.8-57.4,21.2c-11.1,5.1-18.1,14.9-19.3,26.6
c-0.5,5,1,9.4,6.2,11.9c5.1,2.3,10.8,1.4,14.3-2.1c3.8-3.7,6.5-8.4,8.7-13c2.5-5.3,3.5-11.5,10.2-14c8.6-3.2,17.8-5.4,26.7-8
c0.4,0.5,0.9,1,1.3,1.5c-0.9,2.5-1.6,5.1-2.6,7.6c-10.4,26.9-20,54.1-26,82c-1.4,6.6-2,14.1,0,20.5c3.7,11.9,22.6,14.7,35.9,6.2
c4.7-3,7.3-6.9,6.1-11.9c-1.5-6.4-3.5-12.7-5.3-19.1c-1.7-5.8-5-11.8-4.7-17.5c1.3-21.6,5-42.7,20.5-61c3-3.5,3.7-8.5,5.6-13
c3.7-2,9.5-3.8,12.9-7.3C284.8,340.9,288.4,334.3,293.2,328.5z" />
</g>
<g class="pulse">
<path d="M496.2,398c-4.8-0.2-9.7-0.1-14.5-0.1c-8.6,0-17.1,0-26,0c0.3-1.9,0.6-3.5,0.8-5.2c1.6-12.9,5.4-25.9,1.9-38.7
c-4.7-17.1-3.4-33.9-1.4-51c1.1-9.5,1.7-19.3,1.1-28.8c-0.7-11.9-7.7-16.2-18.5-11.3c-10.3,4.6-20.1,10.4-29.9,16
c-4.2,2.4-5,6.8-3,10.9c2.1,4.2,5.4,5.6,10.4,4.4c7.9-2,15.7-4.1,25.4-6.6c-0.7,9.8-1.1,18.7-2,27.5c-1.9,19.5-4.4,38.9-0.1,58.6
c1.7,7.6-0.4,16.1-1.1,24.2c-0.2,3.1-2.5,4.5-5.4,5.7c-8.3,3.3-16.7,6.7-24.5,11.1c-6.3,3.6-7.2,13.2-2.9,19.1
c2.8,3.9,7.6,5,11.9,2.2c3.5-2.2,6.7-4.9,9.8-7.6c12.6-11.2,27.1-15,43.6-11.4c4.1,0.9,8.2,2,12.3,2.2c5.2,0.2,10.7,0.4,15.7-0.8
c6-1.5,8.1-5.3,7.4-10.1C506.4,402.1,502.3,398.2,496.2,398z"/>
</g>
</svg>
</div>