如何让一张图片闪烁？

Question

我想知道如何在CSS中让图像闪烁，如果可能的话。我希望它闪烁在原地。 同时，我也想改变速度，但主要是想让它闪烁。

- user1623495

---

不认为仅使用CSS就可以实现，但您可以使用JavaScript来完成。 - Philip Kirkbride

你能再解释一下“闪烁”吗？你是想让图像在瞬间变亮，还是变成白色或其他颜色？ - Cᴏʀʏ

你知道为什么<blink>标签会悲惨地消失了吗？ - j08691

你可以使用CSS动画和关键帧来实现，但对于简单的闪烁来说可能有点过头了。 - uSeRnAmEhAhAhAhAhA

Answer 1

CSS动画来拯救！

@keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
img {
    animation: blink 1s;
    animation-iteration-count: infinite;
}

http://jsfiddle.net/r6dje/

通过调整时间间隔，您可以使其成为一个尖锐的闪烁：

@keyframes blink {
    0% {
        opacity: 1;
    }
    49% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

http://jsfiddle.net/xtJF5/1/

- Waleed Khan

---

如果我悬停，图像就不会闪烁。有什么选项吗？ - KarSho

这很棒，但也需要针对Chrome浏览器的代码。 - LauraNMS

你还需要添加跨浏览器兼容规则，以支持 keyframes（如 -moz-keyframes、-webkit-keyframes 等）、animation-iteration-count（如 -moz-animation-iteration-count、-webkit-animation-iteration-count 等）和 animation（-moz-animation、-webkit-animation 等）。 - 1_bug

Answer 2

使用Javascript的setInterval方法，将W3Schools作为参考，然后将CSS从visibility:visible更改为visiblity:hidden。我们不会使用display:none，因为它也会删除图像的空间，但我们确实需要图像的空间以使闪烁效果正常工作。

- Dhruvenkumar Shah

---

顺便提一下，请在 Stack Overflow 上创建一个正式账户，这对你非常有帮助。谢谢。我希望我的回答能够帮到你。 - Dhruvenkumar Shah

Answer 3

你可以使用CSS轻松实现。只需在图像的CSS元素中添加以下跨浏览器代码即可。如果更改代码中的数字，还可以设置时间。

-webkit-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
-ms-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
-webkit-animation:blink normal 2s infinite ease-in-out; 
-ms-animation:blink normal 2s infinite ease-in-out; 
animation:blink normal 2s infinite ease-in-out;

- user1874941