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

Question

我有 6 张不同大小的图像，我需要将它们加载到一个渐变背景中。我希望在打开页面时加载第一个图像，并在 X 秒内直接淡入第二个图像(过渡中没有白色或黑色透明度)，然后在它结束时循环。我为此找到了数百个示例，但似乎没有一个能够正常工作以完成我需要它做的事情。有没有一种方法我可以单独使用 html/css 来完成，或者它是否太复杂了？

谢谢

Answer 1

使用纯 css 是可能的，由于浏览器限制 css3 animations 可能不是最安全的选择.

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

css动画样式分解:

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

1. 浏览器前缀

2. 关键帧名称

3. 动画多长

4. 通知动画在完成后循环。

这是 css 和 关键帧:

.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;
    }
}

最后，一个 fiddle :Demo-remove show in url to see code