html - 如何让图像闪烁？

Question

如果可能的话，我想知道如何在 CSS 中使图像闪烁。我想让它在它所在的地方闪烁。

我也想改变速度，但主要是想让它闪烁。

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/

Answer 2

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

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;