CSS中的多图像交叉淡入淡出 - 无（java）脚本 [英] Multiple image cross fading in CSS - without (java) script
本文介绍了CSS中的多图像交叉淡入淡出 - 无（java）脚本的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
有可能在CSS中交叉淡入淡出5张图片，而不使用java脚本？我发现了一个类似的问题：
css3 image crossfade（no javascript） ，但是，它只有CSS代码片段;我试过，但不能得到它的工作。我是CSS新手，因此无法将上述页面中提到的CSS链接到我的以下HTML：
< div id =crossfade>
< img class =conesrc =1.pngalt =png>
< img class =ctwosrc =2.pngalt =png>
< img class =cthreesrc =3.pngalt =png>
< img class =cfoursrc =4.pngalt =png>
< img class =cfivesrc =5.pngalt =png>
< / div>
解决方案
您有许多图片。
jsFiddle： http：// jsfiddle。 net / hajmd /
#crossfade> img {
width：100％;
height：100％;
position：absolute;
top：0px;
left：0px;
color：transparent;
opacity：0;
z-index：0;
-webkit-backface-visibility：hidden;
-webkit-animation：imageAnimation 30s linear infinite 0s;
-moz-animation：imageAnimation 30s linear infinite 0s;
-o-animation：imageAnimation 30s线性无限0s;
-ms-animation：imageAnimation 30s线性无限0s;
animation：imageAnimation 30s linear infinite 0s; -webkit-animation：imageAnimation strong> 30s 线性无限 0; 表示每个图像的动画将以infinete次数持续30秒。 #crossfade> img：nth-child（2）{
background-image：url（../ images / 2.jpg）;
-webkit-animation-delay：6s;
-moz-animation-delay：6s;
-o-animation-delay：6s;
-ms-animation-delay：6s;
animation-delay：6s;
}
#crossfade> img：nth-child（3）{
background-image：url（../ images / 3.jpg）;
-webkit-animation-delay：12s;
-moz-animation-delay：12s;
-o-animation-delay：12s;
-ms-animation-delay：12s;
animation-delay：12s;
}
#crossfade> img：nth-child（4）{
background-image：url（../ images / 4.jpg）;
-webkit-animation-delay：18s;
-moz-animation-delay：18s;
-o-animation-delay：18s;
-ms-animation-delay：18s;
animation-delay：18s;
}
#crossfade> img：nth-child（5）{
background-image：url（../ images / 5.jpg）;
-webkit-animation-delay：24s;
-moz-animation-delay：24s;
-o-animation-delay：24s;
-ms-animation-delay：24s;
animation-delay：24s;
}
@ -webkit-keyframes imageAnimation {
0％{opacity：0;
-webkit-animation-timing-function：ease-in; }
8％{opacity：1;
-webkit-animation-timing-function：ease-out; }
17％{opacity：1}
25％{opacity：0}
100％{opacity：0}
}
@ -moz -keyframes imageAnimation {
0％{opacity：0;
-moz-animation-timing-function：ease-in; }
8％{opacity：1;
-moz-animation-timing-function：ease-out; }
17％{opacity：1}
25％{opacity：0}
100％{opacity：0}
}
@ -o -keyframes imageAnimation {
0％{opacity：0;
-o-animation-timing-function：ease-in; }
8％{opacity：1;
-o-animation-timing-function：ease-out; }
17％{opacity：1}
25％{opacity：0}
100％{opacity：0}
}
@ms -keyframes imageAnimation {
0％{opacity：0;
-ms-animation-timing-function：ease-in; }
8％{opacity：1;
-ms-animation-timing-function：ease-out; }
17％{opacity：1}
25％{opacity：0}
100％{opacity：0}
}
@keyframes imageAnimation {
0％{opacity：0;
animation-timing-function：ease-in; }
8％{opacity：1;
animation-timing-function：ease-out; }
17％{opacity：1}
25％{opacity：0}
100％{opacity：0}
}
Is it possible to cross fade 5 images in CSS, without using java script? I have found a similar question:
css3 image crossfade (no javascript) , however, it has only the CSS code snippet; which I tried, but could not get it working. I'm new to CSS, so could not link the CSS mentioned in the above page to my following HTML:
<div id= "crossfade">
<img class = "cone" src = "1.png" alt = "png">
<img class = "ctwo" src = "2.png" alt = "png">
<img class = "cthree" src = "3.png" alt = "png">
<img class = "cfour" src = "4.png" alt = "png">
<img class = "cfive" src = "5.png" alt = "png">
</div>
解决方案 This can easily be done with CSS3 if you know how many images you have.
jsFiddle: http://jsfiddle.net/hajmd/
#crossfade > img {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 30s linear infinite 0s;
-moz-animation: imageAnimation 30s linear infinite 0s;
-o-animation: imageAnimation 30s linear infinite 0s;
-ms-animation: imageAnimation 30s linear infinite 0s;
animation: imageAnimation 30s linear infinite 0s;
}
The "30s" at "-webkit-animation: imageAnimation 30s linear infinite 0s;" tells that the animation for each image will last 30 seconds in infinete number of times.
#crossfade > img:nth-child(2) {
background-image: url(../images/2.jpg);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
#crossfade > img:nth-child(3) {
background-image: url(../images/3.jpg);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
#crossfade > img:nth-child(4) {
background-image: url(../images/4.jpg);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
#crossfade > img:nth-child(5) {
background-image: url(../images/5.jpg);
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
@-webkit-keyframes imageAnimation {
0% { opacity: 0;
-webkit-animation-timing-function: ease-in; }
8% { opacity: 1;
-webkit-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@-moz-keyframes imageAnimation {
0% { opacity: 0;
-moz-animation-timing-function: ease-in; }
8% { opacity: 1;
-moz-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@-o-keyframes imageAnimation {
0% { opacity: 0;
-o-animation-timing-function: ease-in; }
8% { opacity: 1;
-o-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@-ms-keyframes imageAnimation {
0% { opacity: 0;
-ms-animation-timing-function: ease-in; }
8% { opacity: 1;
-ms-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes imageAnimation {
0% { opacity: 0;
animation-timing-function: ease-in; }
8% { opacity: 1;
animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
这篇关于CSS中的多图像交叉淡入淡出 - 无（java）脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
