Question

我有6张不同尺寸的图像需要加载到单个渐变背景中。我希望在打开页面时加载第一个图像，并在X秒内直接淡入第二个图像（转换中没有白色或黑色透明度），然后在它结束时循环。我已经找到了数以百计的例子，但似乎没有一个能够正常运行我需要做的事情。有没有办法我只能使用html / css来完成它还是太复杂了？

由于

Answer 1

纯css是可能的，由于css3 animations的浏览器限制，这可能不是最安全的赌注。

我正在做的是使用keyframe在图片之间进行无限循环切换。

分解css动画风格：

-webkit(1)-animation: slides(2) 15s(3) linear infinite(4);

浏览器前缀
关键帧名称
动画的时长
完成后通知动画循环。

这是css和keyframe：

.mainCont {
    width: 100%;
    height: 100%;
    background-image: url("http://forestry.ky.gov/Kentuckysstateforests/PublishingImages/TygartsStateForest.jpg");
    background-size: cover;
    background-position: center center;
    animation: slides 15s linear infinite;
    -webkit-animation: slides 15s linear infinite;
    -moz-animation: slides 15s linear infinite;
    -o-animation: slides 15s linear infinite;
    -ms-animation: slides 15s linear infinite;
}

@-webkit-keyframes slides {
    from {
        background: url("http://forestry.ky.gov/Kentuckysstateforests/PublishingImages/TygartsStateForest.jpg");
        background-size: cover;
        background-position: center center;
    }
    20% {
        background: url("http://miriadna.com/desctopwalls/images/max/Falling-asleep-forest.jpg");
        background-size: cover;
        background-position: center center;
    }
    40% {
        background: url("http://forestry.ky.gov/Kentuckysstateforests/PublishingImages/TygartsStateForest.jpg");
        background-size: cover;
        background-position: center center;
    }
    60% {
        background: url("http://upload.wikimedia.org/wikipedia/commons/f/f6/Epping_Forest_Centenary_Walk_2_-_Sept_2008.jpg");
        background-size: cover;
        background-position: center center;
    }
    80% {
        background: url("http://foundwalls.com/wp-content/uploads/2012/06/forest-tree-sun-ray-light-spruce.jpg");
        background-size: cover;
        background-position: center center;
    }
    to {
        background: url("http://static1.wikia.nocookie.net/__cb20130516163359/creepypasta/images/c/c5/Green-forest-wallpaper.jpg");
        background-size: cover;
        background-position: center center;
    }
}

最后，小提琴：Demo-remove show in url to see code

Answer 2

假设你想在这里使用全屏并且你可以使用Javascript（因为它在标题中提到过），假设你有两个divs容器和下面的css：

.bg {
    position   : fixed;
    width      : 100%;
    height     : 100%;
    top        : 0;
    left       : 0;
    opacity    : 0;
    transition : opacity .8s ease-out; // not adding browser specifics for clarity sake
    background : #FFF url(photo.jpg) 0 0 no-repeat;
}

.active {
  opacity      : 1;
}

然后你可以简单地做到：

var images = ["photo_1.jpg", "photo_2.png", "photo_3.gif","photo4.jpg"]
  , delay  = 3000  // 3 seconds
  , pointer= 0
  , xfade  = function() {
         var selectedBg = $('.bg:not(.active)')
           , image      = images[pointer%images.length];

         $('.bg.active').removeClass('active');
         selectedBg.css({'backgroundImage':"url("+image+")"}).addClass('active');
         pointer += 1;
    }

setInterval(xfade, delay);

小提琴：http://jsfiddle.net/F426j/1/

仅使用html / css / js在背景图像之间淡入淡出

2 个答案: