4

我很确定可以使用新的 css 动画功能进行仅 css 的图像淡入淡出。我的要求是它应该适用于没有 javascript 的任意数量的图像。

有谁知道它是怎么做的？

我是如何开始的：

img(src='img1.png')
img(src='img2.png')
img(src='img3.png')
img(src='img4.png')

接下来，将所有图像设置为相互堆叠，第一个显示：

img
  opacity 0
  transition 1s
  position absolute

  &:first-child
    opacity 100

现在我如何浏览每张图片？

编辑：似乎不可能。需要 JavaScript。

4

2 回答 2

8

这篇文章是我见过的最好的做这种效果的文章。

http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/

他们使用跨度、动画和 :nth-child 属性来实现背景图像之间的交叉淡入淡出。真棒。

.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;
}
于 2012-01-17T16:29:53.713 回答
6

使用本文中概述的关键帧：http: //css3.bradshawenterprises.com/cfimg/#cfimg3

于 2011-12-16T22:33:43.837 回答