我试图使用普通 CSS 进行逐渐淡入淡出，并且列表中没有 jquery，这样它就可以一一淡入淡出。然而，我只知道如何在有限的列表中做到这一点。如何循环 css，以便无论我有多少列表，它仍然有效。
这是我所做的：
.ladder {
opacity: 0;
-webkit-animation: fadeIn 0.9s 1;
animation: fadeIn 0.9s 1;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.ladder:nth-child(5n+1) {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.ladder:nth-child(5n+2) {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.ladder:nth-child(5n+3) {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.ladder:nth-child(5n+4) {
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s;
}
.ladder:nth-child(5n+5) {
-webkit-animation-delay: 1.0s;
animation-delay: 1.0s;
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0.0;
}
100% {
opacity: 1.0;
}
}
@keyframes fadeIn {
0% {
opacity: 0.0;
}
100% {
opacity: 1.0;
}
}
<li class="ladder">A</li>
<li class="ladder">B</li>
<li class="ladder">C</li>
<li class="ladder">D</li>
<li class="ladder">E</li>
我的问题：无论有多少列表，如何使 css 正常工作。
这里有一个使用 CSS 变量的想法，可以让你减少代码。它不是通用的，但向每个元素附加一个简单的内联 CSS 会更容易li比编写复杂的CSS：
.ladder {
opacity: 0;
animation: fadeIn 1s var(--d) forwards;
}
@keyframes fadeIn {
100% {
opacity: 1;
}
}
<ul>
<li style="--d:0s" class="ladder">A</li>
<li style="--d:0.2s" class="ladder">B</li>
<li style="--d:0.4s" class="ladder">C</li>
<li style="--d:0.6s" class="ladder">D</li>
<li style="--d:0.8s" class="ladder">E</li>
</ul>
这是另一个想法，您可以在其中应用动画ul:
ul {
position:relative;
}
ul:before {
content:"";
position:absolute;
top:-20px;
bottom:0;
left:0;
right:0;
background:linear-gradient(to bottom,transparent,#fff 20px);
animation:fadeIn 2s forwards
}
@keyframes fadeIn {
0% {
top:-10px;
}
100% {
top: 100%;
}
}
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
