我想知道如何在CSS中使图像 Flink ,如果可能的话。我想让它在原地 Flink 。我也想改变速度,但主要是我想让它 Flink 。
gg58donl1#
CSS动画来救援!
@keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } img { animation: blink 1s; animation-iteration-count: infinite; }
http://jsfiddle.net/r6dje/您可以通过调整间隔来使其成为急剧 Flink :
@keyframes blink { 0% { opacity: 1; } 49% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; } }
http://jsfiddle.net/xtJF5/1/
5jdjgkvh2#
使用JavaScript的setInterval方法将其用作W3Schools的引用,然后将css从visibility:visible更改为visiblity:hidden,我们将不使用display:none,因为它会删除图像的空间,但我们确实需要 Flink 的图像的空间。
visibility:visible
visiblity:hidden
display:none
juud5qan3#
你可以很容易地使用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;
3条答案
按热度按时间gg58donl1#
CSS动画来救援!
http://jsfiddle.net/r6dje/
您可以通过调整间隔来使其成为急剧 Flink :
http://jsfiddle.net/xtJF5/1/
5jdjgkvh2#
使用JavaScript的setInterval方法将其用作W3Schools的引用,然后将css从
visibility:visible
更改为visiblity:hidden
,我们将不使用display:none
,因为它会删除图像的空间,但我们确实需要 Flink 的图像的空间。juud5qan3#
你可以很容易地使用CSS。只需在您的图像的CSS元素中添加以下跨浏览器代码。如果您更改代码中的数字,也可以设置计时。