css3 image crossfade（no javascript） [英] css3 image crossfade (no javascript)

问题描述

我很确定可以使用新的css动画功能做一个css只有图像交叉淡化。

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 /

他们使用跨度，动画和： -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屋！