javascript - 闪烁某个图像

Question

嗨，我想闪烁图像。这里有一个演示。在我的网站中，它使所有图像闪烁。我想只闪烁一个特定的图像。你知道怎么做吗？谢谢。

Answer 1

如果你检查它，闪烁是在 css 中：

-moz-animation: blink normal 2s infinite 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;

Answer 2

我们可以通过javascript编码提供闪烁的图像错觉，方法是将图像的显示属性更改为具有周期性时间间隔的块/无...

但是，这会增加客户端的负载，因为我们需要一个脚本来连续运行以使图像闪烁...

我更愿意准备一个 GIF 闪烁图像并将其放在网站上......（如果要求允许）

Answer 3

从您提供的演示链接中，您可以class为要闪烁或取消闪烁的图像或多个图像应用 a。

这是相同的工作小提琴。

的HTML

<div>
<img width="350px" height="237px" alt="Don't Blink" src="http://www.websitecodetutorials.com/code/images/dont-blink.jpg">  
    <img class="abc" width="350px" height="237px" alt="Don't Blink" src="http://www.websitecodetutorials.com/code/images/dont-blink.jpg">   
        <img width="350px" height="237px" alt="Don't Blink" src="http://www.websitecodetutorials.com/code/images/dont-blink.jpg">   
            <img width="350px" height="237px" alt="Don't Blink" src="http://www.websitecodetutorials.com/code/images/dont-blink.jpg">   
<div>

CSS：

@-moz-keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* Firefox */
@-webkit-keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* Webkit */
@-ms-keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* IE */
@keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* Opera and prob css3 final iteration */
img {
border:1px solid #000;
-moz-transition:all 1s ease-in-out;
-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;
/* order: name, direction, duration, iteration-count, timing-function */   
-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 */
}​

img {
    animation: 2s ease-in-out 0s normal none infinite blink;
    border: 1px solid #000000;
    transition: all 1s ease-in-out 0s;
}

img.abc {
    animation: none;
    transition: none;
}

因此，默认情况下所有图像都在闪烁，您只需要应用类.abc（来自此示例）来取消闪烁您不想闪烁的图像，反之亦然。

希望这可以帮助。

Answer 4

在教程中，为页面上的每个图像设置了效果，因为“img”选择器选择了页面上的每个图像。

img {
border:1px solid #000;
-moz-transition:all 1s ease-in-out;
-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;
/* order: name, direction, duration, iteration-count, timing-function */  
-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 */
}​

改用一个类；将 img 替换为 .blink 并将此类添加到您的图像中：

<img src="..." class="blink" />

Answer 5

如此处所示： 如何使图像闪烁？

@keyframes blink {
    0% {
        opacity: 1;
    }
     50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

img {
    animation: blink 1s;
    animation-iteration-count: infinite;
}