Html 你如何使图像闪烁？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12115247/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you make an image blink?
提问by user1623495
I was wondering how to make an image blink in CSS, if it is possible. I want to have it blink where it is.
如果可能的话，我想知道如何在 CSS 中使图像闪烁。我想让它在它所在的地方闪烁。
I would also like to change the speed but mainly I want to make it blink.
我也想改变速度，但主要是我想让它闪烁。
回答by Waleed Khan
CSS animations to the rescue!
CSS 动画来拯救你！
@keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
img {
animation: blink 1s;
animation-iteration-count: infinite;
}
You can make it a sharp blink by adjusting the intervals:
您可以通过调整间隔使其快速闪烁：
@keyframes blink {
0% {
opacity: 1;
}
49% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 0;
}
}
回答by Dhruvenkumar Shah
use setInterval method of Javascript use it as a reference of W3Schoolsand then change the css from visibility:visibleto visiblity:hiddenwe will not use display:noneas it will remove the space of the image as well but we do need the space for the image for the blinking thing to work.
使用 JavaScript 的 setInterval 方法将其用作W3Schools的参考，然后将 css 从 更改visibility:visible为visiblity:hidden我们不会使用，display:none因为它也会删除图像的空间，但我们确实需要图像的空间才能使闪烁的东西工作。
回答by user1874941
You can do it with CSS easily. Just add below cross browser code in the CSS element of your image. You can set also timing if you change the digit in the code.
您可以使用 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;
