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标签类添加发光和myimage才能发光红色。

myimage用于设置图像的宽度，而glow是webkit中的动画，具有drop-shadow属性和过滤器。试试吧！

对.png徽标的脉动发光效果

2 个答案: