如何在 CSS3 中制作闪烁的图像

Question

我是 CSS3 的新手，正在研究 CSS3 闪烁图像的代码。我只需要显示一个不断闪烁的图像。我不能使用 GIF 图片，因为图片是动态的。

Answer 1

非常简单...只需在图像的不透明度上使用 CSS3 动画

希望对您有所帮助..

这是有效的 fiddle http://jsfiddle.net/rameezrami/27754r4f/1/ 或使用以下 html

<html>
<head>
<style>
/* Firefox old*/
@-moz-keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
} 

@-webkit-keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}
/* IE */
@-ms-keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
} 
/* Opera and prob css3 final iteration */
@keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
} 
.blink-image {
    -moz-animation: blink normal 2s infinite ease-in-out; /* Firefox */
    -webkit-animation: blink normal 2s infinite ease-in-out; /* Webkit */
    -ms-animation: blink normal 2s infinite ease-in-out; /* IE */
    animation: blink normal 2s infinite ease-in-out; /* Opera and prob css3 final iteration */
}
</style>
</head>
<body>
<img class="blink-image" src="http://www.chicagoexcelclasses.com/wp-content/uploads/2014/04/css31-180x180.jpg">
</body>
</html>

如何在 CSS3 中制作闪烁的图像

how to make a blinking image in CSS3

css

css-transitions

css-animations