Css 在图像（徽标）上创建光线扫描效果（闪亮）

我想添加一个光扫描效果的图像，看起来像是发光

期望的行为： （就像在这张图片中，但是图片，但是光线在移动）

我找到了一些解决方案，这些解决方案完全符合我的预期，但只适用于div元素。我试着用图片申请，但没有成功。 你知道如何在PNG图像上添加闪亮效果吗？

---

示例：http://jsfiddle.net/nqQc7/289/

因为

img

标记不喜欢伪元素，所以需要使用包装器元素，并将

absolute

正确地定位

img

。如下图所示：

.wrap{
显示：内联块；
高度：200px；
宽度：200px；
位置：相对位置；
溢出：隐藏；
}
.包裹img{
位置：绝对位置；
排名：0；
左：0；
身高：100%；
宽度：100%；
}
.包装：之前{
内容：“；
z指数：10；
位置：绝对位置；
身高：200%；
宽度：200%；
前-120%；
左-120%；
背景：线性梯度（透明0%，rgba（255，255，255，0.1）45%，rgba（255，255，255，0.5）50%，rgba（255，255，255，0.1）55%，透明100%）；
过渡：所有2；
变换：旋转（-45度）；
动画：闪耀6秒无限向前；
}
@关键帧发光{
0% {
前-120%；
左-120%；
}
20% {
左：100%；
最高：100%；
}
40% {
左：100%；
最高：100%；
}
100% {
左：100%；
最高：100%；
}
}

---

因为

img

标记不喜欢伪元素，所以需要使用包装器元素，然后

absolute

将

img

放在其中。如下图所示：

.wrap{
显示：内联块；
高度：200px；
宽度：200px；
位置：相对位置；
溢出：隐藏；
}
.包裹img{
位置：绝对位置；
排名：0；
左：0；
身高：100%；
宽度：100%；
}
.包装：之前{
内容：“；
z指数：10；
位置：绝对位置；
身高：200%；
宽度：200%；
前-120%；
左-120%；
背景：线性梯度（透明0%，rgba（255，255，255，0.1）45%，rgba（255，255，255，0.5）50%，rgba（255，255，255，0.1）55%，透明100%）；
过渡：所有2；
变换：旋转（-45度）；
动画：闪耀6秒无限向前；
}
@关键帧发光{
0% {
前-120%；
左-120%；
}
20% {
左：100%；
最高：100%；
}
40% {
左：100%；
最高：100%；
}
100% {
左：100%；
最高：100%；
}
}

将类应用于

img

标记时会发生什么？你说它不起作用，会发生什么？你在找这样的东西吗@是的，非常相似！但是我想在一个logo上添加同样的效果（比如每5-10秒）来模拟一个轻微的运动。当你把这个类应用到

img

标签上时会发生什么？你说它不起作用，会发生什么？你在找这样的东西吗@是的，非常相似！但我想在徽标上添加相同的效果（比如每5-10秒），以模拟灯光运动。