时间戳

首页 > 解决方案 > 使用 CSS 在 SVG 上发光动画

css - 使用 CSS 在 SVG 上发光动画

问题描述

我正在尝试在 SVG 图标上应用发光的阴影效果，但它不起作用。

我在文本上应用了类似的东西，并且使用效果很好text-shadow：

.glow {
  font-weight: 450;
  -webkit-animation: glow 1.5s ease-in-out infinite alternate;
  -moz-animation: glow 1.5s ease-in-out infinite alternate;
  animation: glow 1.5s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #e60073, 0 0 20px #e60073,
      0 0 25px #e60073, 0 0 30px #e60073, 0 0 35px #e60073;
  }

  to {
    text-shadow: 0 0 10px #fff,
      0 0 15px #ff9800 0 0 20px #ff9800 0 0 25px #ff9800 0 0 30px #ff9800 0 0
        40px #ff9800 0 0 45px #ff4da6;
  }
}
					<a href="#sec1" class="nav-link  glow">
						<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="home" style="max-width:50px" class="svg-inline--fa fa-home fa-w-18 svg-shadow" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z"></path></svg>
						<span class="link-text">NASLOVNA</span>
					</a>

因此，如果您取消注释该行成功地在 SVG 上投下阴影，我使用webkit-filter: drop-shadow女巫尝试了同样的事情，但我无法使其动画化。我似乎无法找到任何使用阴影的 SVG 动画示例，我发现一些使用填充但我不感兴趣。

任何指导表示赞赏。

.svg-shadow {

/*-webkit-filter: drop-shadow( 3px 3px 2px #ff5722); */
    -webkit-animation: svg-shadow 1.5s ease-in-out infinite alternate;
  -moz-animation: svg-shadow 1.5s ease-in-out infinite alternate;
  animation: svg-shadow 1.5s ease-in-out infinite alternate;
}

@-webkit-keyframes svg-shadow {
  from {
     -webkit-filter: drop-shadow( 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #e60073, 0 0 20px #e60073,
      0 0 25px #e60073, 0 0 30px #e60073, 0 0 35px #e60073);
  }

  to {
    -webkit-filter: drop-shadow( 0 0 10px #fff,
      0 0 15px #ff9800 0 0 20px #ff9800 0 0 25px #ff9800 0 0 30px #ff9800 0 0
        40px #ff9800 0 0 45px #ff4da6);
  }
}
						<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="home" class="svg-inline--fa fa-home fa-w-18 svg-shadow" role="img" style="max-width:50px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z"></path></svg>

标签： cssanimationsvg

解决方案

您的多重阴影的语法是错误的，它需要如下所示：

.svg-shadow {
  animation: svg-shadow 1.5s ease-in-out infinite alternate;
}

@keyframes svg-shadow {
  from {
    filter: drop-shadow( 0 0 5px #fff) drop-shadow( 0 0 15px #e60073) drop-shadow( 0 0 20px #e60073);
  }

  to {
    
    filter: drop-shadow( 0 0 20px #fff) drop-shadow( 0 0 25px #e60073) drop-shadow( 0 0 40px #e60073);
  }
}
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="home" class="svg-inline--fa fa-home fa-w-18 svg-shadow" role="img" style="max-width:50px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z"></path></svg>

推荐阅读