我已经在CSS中创建了一个带有背景图像的div，并且希望该div /图像具有自动淡入和淡出效果。
我已经收集了CSS动画以使其工作，但是我不知道如何将动画的CSS与当前div的CSS结合在一起。所以这是我到目前为止所拥有的
的HTML
<div id="image"></div>
的CSS
div.image {
content:url(http://www.google.com/images/srpr/logo3w.png);
float:left;
}
动画CSS
@-webkit-keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-moz-keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-o-keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
img {
-webkit-animation: blink 1s;
-webkit-animation-iteration-count: infinite;
-moz-animation: blink 1s;
-moz-animation-iteration-count: infinite;
-o-animation: blink 1s;
-o-animation-iteration-count: infinite;
}
您需要使用背景图片定位div。
#image 目标 <div id="image">
.image 目标 <div class="image">
img 目标 <img>
的CSS
#image {
-webkit-animation: blink 3s;
-webkit-animation-iteration-count: infinite;
-moz-animation: blink 3s;
-moz-animation-iteration-count: infinite;
-o-animation: blink 3s;
-o-animation-iteration-count: infinite;
}
您还应该指定一个，background-image 而不要使用content：
注意：如果div中没有内容，则需要指定宽度和高度以查看背景图像。默认情况下，该图像将被重复-使用no-repeat将仅显示一次图像。在此处阅读有关CSS背景的更多信息。
div#image {
background:url(http://www.google.com/images/srpr/logo3w.png) no-repeat;
height: 95px;
width: 280px;
float:left;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句