是否可以在CSS动画上交替使用z索引
我尝试了多种方法,但都没有成功。JavaScript、TweenLite等。我需要交替使用两个是否可以在CSS动画上交替使用z索引,css,z-index,keyframe,Css,Z Index,Keyframe,我尝试了多种方法,但都没有成功。JavaScript、TweenLite等。我需要交替使用两个标记,slide1和slide2,它们位于幻灯片中。从淡出到淡入。连续循环。我可以使用基本的css@关键帧动画,如贝娄。它可以正常工作,但它们是可单击的链接,其中一个始终位于顶部 是否有方法循环@关键帧动画中每个div的z索引 或者是一个更好的方法 CSS .slider { max-width: 300px; height: 200px; margin: 20px auto; posi
标记,slide1和slide2,它们位于幻灯片中。从淡出到淡入。连续循环。我可以使用基本的css@关键帧
动画,如贝娄。它可以正常工作,但它们是可单击的链接,其中一个
始终位于顶部
是否有方法循环@关键帧
动画中每个div的z索引
或者是一个更好的方法
CSS
.slider {
max-width: 300px;
height: 200px;
margin: 20px auto;
position: relative;
}
.slide1,.slide2 {
position: absolute;
width: 100%;
height: 100%;
}
.slide1 {
animation:fade 8s infinite;
-webkit-animation:fade 8s infinite;
}
.slide2 {
animation:fade2 8s infinite;
-webkit-animation:fade2 8s infinite;
}
@keyframes fade
{
0% {opacity:1}
33.333% { opacity: 0}
66.666% { opacity: 0}
100% { opacity: 1}
}
@keyframes fade2
{
0% {opacity:0}
33.333% { opacity: 1}
66.666% { opacity: 0 }
100% { opacity: 0}
}
HTML
<div class="slider">
<div class="slide1"></div>
<div class="slide2"></div>
</div>
他们似乎在为我工作,请查看:
.滑块{
线高:1.5;
高度:200px;
保证金:20px自动;
位置:相对位置;
宽度:300px;
}
.幻灯片{
填充:20px;
位置:绝对位置;
宽度:100%;
身高:100%;
}
滑动
.幻灯片a{
颜色:#fff;
}
.幻灯片1{
动画:淡入8秒无限;
背景:红色;
}
.幻灯片2{
动画:fade2 8s无限;
背景:蓝色;
}
@关键帧淡入淡出
{
0%{不透明度:1;z索引:2;}
33.333%{不透明度:0;z指数:1;}
66.666%{不透明度:0;z指数:1;}
100%{不透明度:1;z指数:2;}
}
@关键帧淡入淡出2
{
0%{不透明度:0;z索引:1;}
33.333%{不透明度:1;z指数:2;}
66.666%{不透明度:1;z指数:2;}
100%{不透明度:0;z指数:1;}
}
在某个地方放一个演示,比如在上面,然后将链接粘贴到这里。包括你的html标记。好的,包括HTMLYep。这很好用。因此,我可以将z索引添加到@keyframes标记中!太好了…谢谢你,谢谢你在你走之前做了这件事。我注意到了它的爆裂声。我还不够好,看不出这个问题。我希望它能在它们之间以8秒的延迟进行转换。你觉得怎么样?@NodeCodeMan使用这种技术,你必须决定动画需要多少时间+8秒的延迟。通过使用百分比(因为不允许在关键帧中以秒为单位定义时间),例如0%->10%->90%->100%,您可以获得该值。明白了吗?嘿,对不起,我刚刚发布了另一个关于这个的问题,在我看到你回信之前,你的代码。我确实有点明白。百分比很难看到。时间表会简单得多。实际上,这可能无法正常工作。我刚刚注意到,正是z指数的变化导致了转换不干净。如果你移除它,效果很好。
<style>
.slider {
line-height: 1.5;
height: 200px;
margin: 20px auto;
position: relative;
width: 300px;
}
.slide {
padding: 20px;
position: absolute;
width: 100%;
height: 100%;
}
.slide,
.slide a {
color: #fff;
}
.slide1 {
animation: fade 8s infinite;
background: red;
}
.slide2 {
animation: fade2 8s infinite;
background: blue;
}
@keyframes fade
{
0% { opacity: 1 ; z-index: 2; }
33.333% { opacity: 0; z-index: 1; }
66.666% { opacity: 0; z-index: 1; }
100% { opacity: 1; z-index: 2; }
}
@keyframes fade2
{
0% { opacity: 0; z-index: 1; }
33.333% { opacity: 1; z-index: 2; }
66.666% { opacity: 1; z-index: 2; }
100% { opacity: 0; z-index: 1; }
}
</style>
<div class="slider">
<div class="slide slide1">
<ul>
<li><a href="//www.google.com" target="_blank">Google</a></li>
<li><a href="//www.globo.com" target="_blank">Globo.com</a></li>
</ul>
</div>
<div class="slide slide2">
<ul>
<li><a href="//www.lovemondays.com.br" target="_blank">Love Mondays</a></li>
<li><a href="//www.hotmail.com" target="_blank">Hotmail</a></li>
</ul>
</div>
</div>