0

嘿嘿！

所以我有一大块内联 SVG 代码，所以我可以用一些 css 对其进行动画处理，我已经将 SVG 内联代码放在一个pastebin中，如果我把它放在这里它会很庞大。现在的问题是它没有出现在 Chrome 中。对应的 SCSS：

#logo {
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%);
  stroke-linecap: square;
  z-index: 1;
}

#logo path {
  &:nth-child(1) {
    stroke-dasharray: 500.82;
    stroke-dashoffset: 500.92;
    animation: line-anim 1.5s ease forwards;
  }

  &:nth-child(2) {
    stroke-dasharray: 313.24163818359375;
    stroke-dashoffset: 313.24163818359375;
    animation: line-anim 1.5s ease forwards 0.3s;
  }

  &:nth-child(3) {
    stroke-dasharray: 350.793212890625;
    stroke-dashoffset: 350.793212890625;
    animation: line-anim 1.5s ease forwards 0.6s;
  }

  &:nth-child(4) {
    stroke-dasharray: 327.3361511230469;
    stroke-dashoffset: 327.3361511230469;
    animation: line-anim 1.5s ease forwards 0.9s;
  }

  &:nth-child(5) {
    stroke-dasharray: 282.18719482421875;
    stroke-dashoffset: 282.18719482421875;
    animation: line-anim 1.5s ease forwards 1.2s;
  }

  &:nth-child(6) {
    stroke-dasharray: 313.2420959472656;
    stroke-dashoffset: 313.2420959472656;
    animation: line-anim 1.5s ease forwards 1.5s;
  }

  &:nth-child(7) {
    stroke-dasharray: 386.1973876953125;
    stroke-dashoffset: 386.1973876953125;
    animation: line-anim 1.5s ease forwards 1.8s;
  }

  &:nth-child(8) {
    stroke-dasharray: 365.17633056640625;
    stroke-dashoffset: 365.17633056640625;
    animation: line-anim 1.5s ease forwards 2.1s;
  }

  &:nth-child(9) {
    stroke-dasharray: 296.4239501953125;
    stroke-dashoffset: 296.4239501953125;
    animation: line-anim 1.5s ease forwards 2.4s;
  }

  &:nth-child(10) {
    stroke-dasharray: 350.7937316894531;
    stroke-dashoffset: 350.7937316894531;
    animation: line-anim 1.5s ease forwards 2.7s;
  }

  &:nth-child(11) {
    stroke-dasharray: 365.1751708984375;
    stroke-dashoffset: 365.1751708984375;
    animation: line-anim 1.5s ease forwards 3s;
  }

  &:nth-child(12) {
    stroke-dasharray: 313.2421875;
    stroke-dashoffset: 313.2421875;
    animation: line-anim 1.5s ease forwards 3.3s;
  }

  &:nth-child(13) {
    stroke-dasharray: 482.3141174316406;
    stroke-dashoffset: 482.3141174316406;
    animation: line-anim 1.5s ease forwards 3.6s;
  }
}

我已经在 Edge 上尝试过它确实显示但非常奇怪。在 FireFox 上它根本不显示，昨天一切正常，现在我在项目中走得更远了，我认为这是我后来添加的一些 SCSS，但事实并非如此。

任何帮助，将不胜感激

4

1 回答 1

0

傻我，我line-anim在清理我的css时不小心删除了关键帧，谢谢你提醒我@enxaneta

于 2019-11-25T20:55:59.413 回答