1

我目前使用 codrops 的 css3 背景滑块：

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

这是我放的网站：

http://www.josturdycelebrant.com

问题是，客户端不希望页面在第一个滑块图像加载之前闪烁白色或任何其他颜色。他们只是希望图像在那里。除了将背景设置为滑块中的第一个图像之外，我到处寻找并似乎找不到答案。

任何帮助，将不胜感激。

4

1 回答 1

0

你确定这是个好主意吗？

经常使用淡入效果不仅是因为它在渲染中的柔和和“自然”的感觉，还因为它允许浏览器有一定的时间来完全加载图像，否则用户会体验到难看的“级联”效果的加载图像。我们可以非常肯定地说，用于背景的高分辨率图像就是这种情况，如您的示例所示。

无论如何，如果您（或您的客户）仍然想尝试一下，这里有一种方法来完成它。

您只需要声明为第一张图片优化的自定义动画。就像是：

@-webkit-keyframes firstImageAnimation { 
     0% { opacity: 1; }
    17% { opacity: 1; }
    25% { opacity: 0; }
   100% { opacity: 0; } }  /* complete with all other vendor prefixes */

然后将其分配给您要首先出现的 .jpg：

.cb-slideshow li:nth-child(1) span { 
   background-image:url(path-to-first-image);
   -webkit-animation: firstImageAnimation 36s linear infinite 0s;
      -moz-animation: firstImageAnimation 36s linear infinite 0s;
       -ms-animation: firstImageAnimation 36s linear infinite 0s;
        -o-animation: firstImageAnimation 36s linear infinite 0s;
           animation: firstImageAnimation 36s linear infinite 0s; 

}

（这将覆盖原始动画，仍然分配给所有其他背景图像）。

这样，第一张图片会在加载页面后立即弹出。不幸的是，过了一会儿你会注意到这会破坏幻灯片，因为在最后一张图像消失后，第一张图像会突然出现。

一个简单的解决方法是为幻灯片中的第一个和最后一个分配相同的图像，后者默认返回与除第一个之外的任何其他图像相同的动画。所以在这种情况下，它只是这样的：

.cb-slideshow li:nth-child(6) span { 
    background-image: url(path-to-first-image);
    -webkit-animation-delay: 30s;
       -moz-animation-delay: 30s;
        -ms-animation-delay: 30s;
         -o-animation-delay: 30s;
            animation-delay: 30s;

}

这将转换为从集合中的最后一个图像到第一个图像的无缝过渡。

于 2012-11-26T03:12:27.590 回答