css 如何让图像 Flink ?

kmb7vmvb  于 2023-10-21  发布在  Flink
关注(0)|答案(3)|浏览(184)

我想知道如何在CSS中使图像 Flink ,如果可能的话。我想让它在原地 Flink 。
我也想改变速度,但主要是我想让它 Flink 。

gg58donl

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/

5jdjgkvh

5jdjgkvh2#

使用JavaScript的setInterval方法将其用作W3Schools的引用,然后将css从visibility:visible更改为visiblity:hidden,我们将不使用display:none,因为它会删除图像的空间,但我们确实需要 Flink 的图像的空间。

juud5qan

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;

相关问题