Question

嗨我想眨一下图像。有一个演示here。在我的网站上，它使所有图像闪烁。我想只眨一下某个图像。你知道怎么做吗？感谢。

Answer 1

我们可以通过javascript编码提供闪烁的图像错觉，通过将图像的显示属性更改为阻止/无定期时间间隔...

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

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

Answer 2

如果您检查它，则闪烁在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 3

在教程中，效果设置为页面上的每个图像，因为“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 */
}

改用课程;用.blink替换img并将此类添加到您的图像中：

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

Answer 4

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

以下是Working fiddle。

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 */
}&#8203;

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 5

如下所示： How do you make an image blink?

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

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

闪烁某个图像

5 个答案: