[英]Is it possible to alternate z-index on CSS animation
I have been trying this multiple ways with no success. 我一直在尝试多种方法,但都没有成功。 JavaScript, TweenLite, etc. I need to alternate two
<div>
tags, slide1 & slide2 , that live inside slide . JavaScript,TweenLite等。我需要交替使用两个
<div>
标签, slide1和slide2 ,它们位于slide内部。 Fading one out to fading one in. A continuous loop. 淡入淡出到淡入淡出。一个连续的循环。 I can use a basic css
@keyframes
animation like bellow. 我可以使用像波纹管这样的基本css
@keyframes
动画。 It works fine, but they are clickable links and one <div>
will always remain on top. 它工作正常,但是它们是可单击的链接,并且一个
<div>
始终保留在顶部。
Is there a way to loop the z-index of each div in the @keyframes
anim? 有没有办法在
@keyframes
动画中循环每个div的z索引?
Or maybe a completely better method? 还是一种完全更好的方法?
CSS 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 HTML
<div class="slider">
<div class="slide1"></div>
<div class="slide2"></div>
</div>
They seem to be working for me, check it out: https://codepen.io/giovannipds/pen/LzgYaa 他们似乎为我工作,请查看: https : //codepen.io/giovannipds/pen/LzgYaa
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.