javascript - .png 徽标上的脉动发光效果

Question

我想在徽标上制作一个脉动发光的效果。首先，我尝试使用 CSS 和一些 jquery 片段来解决它，但这只会影响图像的矩形，而不是矩形内的图像本身。

有没有人有一个解决方案，例如 html5？不幸的是，我对 html5 不是很熟练。有人有我可以看的例子吗？

先感谢您

Answer 1

您可以通过拥有 2 个徽标图像来做到这一点。1个没有发光，1个有。

将它们一个放在另一个上，使用不透明度上的 JQuery 动画淡入和淡出发光的图像。

对不起，我不知道一个例子，但这应该工作。

Answer 2

这可以通过 CSS、一个名为 drop-shadow 的属性和一个过滤器来完成

@-webkit-keyframes redPulse {
    from { -webkit-filter: drop-shadow(0px 0px 20px rgba(194,0,0,0.7)); filter: url(shadow.svg#drop-shadow); }
    50% { -webkit-filter: drop-shadow(0px 0px 20px rgba(255,0,0,1)); filter: url(shadow.svg#drop-shadow); }
    to { -webkit-filter: drop-shadow(0px 0px 20px rgba(194,0,0,0.7)); filter: url(shadow.svg#drop-shadow); }
}
.myimage {
    width: 500px;
}
.glow { 
    -webkit-animation-name: redPulse;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
}

您必须在 img 标签的类中添加 Glow 和 myimage 才能使发光变为红色。

myimage 是设置图像的宽度，glow 是 webkit 中的动画，带有阴影属性和过滤器。试试看！