css3 image crossfade(no javascript) [英] css3 image crossfade (no javascript)
问题描述
我确定可以做一个css只有图像交叉淡入淡出使用新的CSS动画功能。我的要求是,它应该工作在任何数量的图像没有javascript。
I'm pretty sure it's possible to do a css only image crossfade using the new css animation features. My requirements are that it should work for arbitrary number of images without javascript.
有人知道如何做吗?
我如何开始:
img(src='img1.png')
img(src='img2.png')
img(src='img3.png')
img(src='img4.png')
接下来所有的图像设置为彼此堆叠,第一个显示:
Next all the images are set to stack on top of each other with the first one showing:
img
opacity 0
transition 1s
position absolute
&:first-child
opacity 100
现在如何浏览每张图片?
Now how do I go through each image?
:似乎不可能。需要javascript。
Seems impossible. Requires javascript.
推荐答案
这篇文章是我看过的最好的效果。
This article is the best I've seen for doing an effect like this.
http ://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/
他们使用跨度,动画和:nth-child属性来实现背景图像之间的交叉淡入淡出。非常棒。
They use spans, animation and the :nth-child property to achieve a crossfade between the background images. Pretty awesome.
.cb-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
animation: imageAnimation 36s linear infinite 0s;
}
.cb-slideshow li:nth-child(1) span {
background-image: url(../images/1.jpg)
}
.cb-slideshow li:nth-child(2) span {
background-image: url(../images/2.jpg);
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
background-image: url(../images/3.jpg);
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) span {
background-image: url(../images/4.jpg);
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) span {
background-image: url(../images/5.jpg);
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) span {
background-image: url(../images/6.jpg);
animation-delay: 30s;
}
.cb-slideshow li:nth-child(2) div {
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) div {
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) div {
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) div {
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) div {
animation-delay: 30s;
}
这篇关于css3 image crossfade(no javascript)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!