CSS中

Question

我一直致力于在三个不同的图像之间进行交叉渐变以获得“闪烁”效果，但发现我实际上需要使用三个不同的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>