CSS 中三个 div 之间的交叉淡入淡出

Question

我一直在研究三个不同图像之间的交叉淡入淡出以获得 "twinkling" 效果，但发现我实际上需要用三个不同的 div 来做到这一点，所以我可以使用 "background-repeat" 属性。问题是我似乎无法弄清楚如何修改代码以使用 div 而不是图像。

这是我一直在使用的处理图像的代码：

CSS:

@-webkit-keyframes twinkle {
    from { opacity: 0; }
    to { opacity: 1; }
}

@-moz-keyframes twinkle {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes twinkle {
    from { opacity: 0; }
    to { opacity: 1; }
}

#starrysky img {
        position: top left fixed;
        width:900px;
    }

#starrysky img:nth-child(2)  {
    opacity: .9;
    -webkit-animation: twinkle 1.25s ease-in alternate infinite;
    -moz-animation: twinkle 1.25s ease-in alternate infinite;
    animation: twinkle 1.25s ease-in alternate infinite;
    transition-delay: 2s;
}

#starrysky img:nth-child(3)  {
    opacity: .9;
    -webkit-animation: twinkle 1.75s ease-in alternate infinite;
    -moz-animation: twinkle 1.75s ease-in alternate infinite;
    animation: twinkle 1.75s ease-in alternate infinite;
    transition-delay: 3s;
}

#starrysky img:nth-child(4)  {
    opacity: .7;
    -webkit-animation: twinkle 2.5s ease-in alternate infinite;
    -moz-animation: twinkle 2.5s ease-in alternate infinite;
    animation: twinkle 2.5s ease-in alternate infinite;
    transition-delay: 2s;
}

和HTML：

<div id="starrysky">
    <img src="arcticnomoon1.jpg;">
    <img src="arcticnomoon2.jpg">
    <img src="arcticnomoon3.jpg">
</div>

如有任何帮助，我们将不胜感激！我希望能够在没有 jQuery 的情况下做到这一点，或者如果我必须这样做，非常简单 jQuery。 :\

Answer 1

嗯，你走对了，你只是在#starrysky div 中定位图像有点错误:)

这是一个例子

@-webkit-keyframes twinkle {
    from { opacity: 0; }
    to { opacity: 1; }
}

@-moz-keyframes twinkle {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes twinkle {
    from { opacity: 0; }
    to { opacity: 1; }
}
#starrysky { 
    position: relative; 
    width: 300px;
    height: 200px;
    overflow: hidden;
}
#starrysky img {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }

#starrysky img{
    opacity: .9;
    -webkit-animation: twinkle 1.25s ease-in alternate infinite;
    -moz-animation: twinkle 1.25s ease-in alternate infinite;
    animation: twinkle 1.25s ease-in alternate infinite;
    transition-delay: 2s;
}

#starrysky img:nth-child(2)  {
    opacity: .9;
    -webkit-animation: twinkle 1.75s ease-in alternate infinite;
    -moz-animation: twinkle 1.75s ease-in alternate infinite;
    animation: twinkle 1.75s ease-in alternate infinite;
    transition-delay: 3s;
}

<div id="starrysky">
    <img src="http://www.southernhillsanimalhospital.com/sites/site-1450/images/kittens.jpg" />
    <img src="http://dreamatico.com/data_images/kitten/kitten-2.jpg" />
</div>

CSS 中三个 div 之间的交叉淡入淡出

Cross fading between three divs in CSS

html

css

keyframe

css-transitions

css-animations