[英]Trying to make it so that my text colors will alternate blinking forever but for not working with infinite loop, is there a better way?
我试图在文本 flash colors 中反复写几句话我设置了一个无限循环来包含代码,但它不起作用,因为时间是 5 秒有人能告诉我我的代码有什么问题来得到我想要的结果吗? 虽然我不认为问题出在我的 html 文件上,但无论如何我还是添加了它,我很确定它与 animation 持续时间有关 提前谢谢
$(function() {
for (var h = 0; h < 1000; h++) {
setTimeout(function() {
$('li.color-0').removeClass('hidden');
}, 1000);
setTimeout(function() {
$('li.color-1').removeClass('hidden');
}, 1200);
setTimeout(function() {
$('li.color-2').removeClass('hidden');
}, 1400);
setTimeout(function() {
$('li.color-3').removeClass('hidden');
}, 1600);
setTimeout(function() {
$('li.color-4').removeClass('hidden');
}, 1800);
setTimeout(function() {
$('li.color-5').removeClass('hidden');
}, 2000);
setTimeout(function() {
$('li.color-6').removeClass('hidden');
}, 2200);
setTimeout(function() {
$('li.color-7').removeClass('hidden');
}, 2600);
setTimeout(function() {
$('li.color-8').removeClass('hidden');
}, 2800);
setTimeout(function() {
$('li.color-9').removeClass('hidden');
}, 3000);
setTimeout(function() {
$('li.color-10').removeClass('hidden');
}, 3200);
setTimeout(function() {
$('li.color-11').removeClass('hidden');
}, 3400);
setTimeout(function() {
$('li.color-12').removeClass('hidden');
}, 3600);
setTimeout(function() {
$('li.color-12').addClass('hidden');
}, 3800);
setTimeout(function() {
$('li.color-11').addClass('hidden');
}, 4000);
setTimeout(function() {
$('li.color-10').addClass('hidden');
}, 4200);
setTimeout(function() {
$('li.color-9').addClass('hidden');
}, 4400);
setTimeout(function() {
$('li.color-8').addClass('hidden');
}, 4600);
setTimeout(function() {
$('li.color-7').addClass('hidden');
}, 4800);
setTimeout(function() {
$('li.color-6').addClass('hidden');
}, 5000);
setTimeout(function() {
$('li.color-5').addClass('hidden');
}, 5200);
setTimeout(function() {
$('li.color-4').addClass('hidden');
}, 5400);
setTimeout(function() {
$('li.color-3').addClass('hidden');
}, 5600);
setTimeout(function() {
$('li.color-2').addClass('hidden');
}, 5800);
setTimeout(function() {
$('li.color-1').addClass('hidden');
}, 6000);
setTimeout(function() {
$('li.color-0').addClass('hidden');
}, 6200);
/* setTimeout(function() {
$('.fly-in-text').remove();
}, 6400);
*/
}
<div class="wrapper">
<section class="content">
<div class="columns">
<main class="main">
<div class="container-fluid">
<ul class="fly-in-text">
<li class="color-0">C</li>
<li class="color-1">J</li>
<li class="color-2">s</li>
<br>
<li class="color-3">P</li>
<li class="color-4">i</li>
<li class="color-5">z</li>
<li class="color-6">z</li>
<li class="color-7">a</li>
<br>
<li class="color-8">P</li>
<li class="color-9">l</li>
<li class="color-10">a</li>
<li class="color-11">c</li>
<li class="color-12">e</li>
</ul>
</div>
@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&family=Pacifico&display=swap');
body{
margin: 0;
}
.wrapper{
min-height: 100vh;
background: #ccc;
display: flex;
flex-direction: column;
}
.content {
display: flex;
flex: 1;
background: #999;
color: #000;
}
.columns{
display: flex;
flex:1;
}
.main{
flex: 1;
order: 2;
background: #eee;
}
.sidebar-1 {
width: 30%;
background: #000000;
order: 1;
}
.sidebar-2 {
width: 30%;
order: 3;
background: #000000;
}
/* Welcome Page Animation */
.fly-in-text {
list-style: none;
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
z-index: 2;
}
.fly-in-text li {
display: inline-block;
margin-right: 50px;
font-family: 'Indie Flower', cursive;
font-weight: 300;
font-size: 4em;
color: #fff;
opacity: 2;
transform: translate(380px, 300px);
}
.fly-in-text li:last-child, .fly-in-text li:last-child {
margin-right: 0;
}
.fly-in-text.hidden li {
opacity: 0;
}
/* rainbow color setting */
@-webkit-keyframes flashycolor {
0% {color:#FF4D4D;}
25% {color:#FFF94D;}
50% {color:#40CFFF;}
75% {color:#61FF4D;}
100% {color:#EF56FC;}
}
@keyframes flashycolor {
0% {color:#FF4D4D;}
25% {color:#FFF94D;}
50% {color:#40CFFF;}
75% {color:#61FF4D;}
100% {color:#EF56FC;}
}
@-webkit-keyframes flashycolor1 {
0% {color:#EF56FC;}
25% {color:#FF4D4D;}
50% {color:#FFF94D;}
75% {color:#40CFFF;}
100% {color:#61FF4D;}
}
@keyframes flashycolor1 {
0% {color:#EF56FC;}
25% {color:#FF4D4D;}
50% {color:#FFF94D;}
75% {color:#40CFFF;}
100% {color:#61FF4D;}
}
@-webkit-keyframes flashycolor2 {
0% {color:#61FF4D;}
25% {color:#EF56FC;}
50% {color:#FF4D4D;}
75% {color:#FFF94D;}
100% {color:#40CFFF;}
}
@keyframes flashycolor2 {
0% {color:#61FF4D;}
25% {color:#EF56FC;}
50% {color:#FF4D4D;}
75% {color:#FFF94D;}
100% {color:#40CFFF;}
}
@-webkit-keyframes flashycolor3 {
0% {color:#40CFFF;}
25% {color:#61FF4D;}
50% {color:#EF56FC;}
75% {color:#FF4D4D;}
100% {color:#FFF94D;}
}
@keyframes flashycolor3 {
0% {color:#40CFFF;}
25% {color:#61FF4D;}
50% {color:#EF56FC;}
75% {color:#FF4D4D;}
100% {color:#FFF94D;}
}
@-webkit-keyframes flashycolor4 {
0% {color:#FFF94D;}
25% {color:#40CFFF;}
50% {color:#61FF4D;}
75% {color:#EF56FC;}
100% {color:#FF4D4D;}
}
@keyframes flashycolor4 {
0% {color:#FFF94D;}
25% {color:#40CFFF;}
50% {color:#61FF4D;}
75% {color:#EF56FC;}
100% {color:#FF4D4D;}
}
.color-0, .color-1, .color-10 {
-webkit-animation-name: flashycolor;
animation-name: flashycolor;
-webkit-animation-duration: 20s;
animation-duration: 2s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.color-2, .color-11 {
-webkit-animation-name: flashycolor1;
animation-name: flashycolor1;
-webkit-animation-duration: 20s;
animation-duration: 2s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.color-3, .color-12 {
-webkit-animation-name: flashycolor2;
animation-name: flashycolor2;
-webkit-animation-duration: 20s;
animation-duration: 2s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.color-4 {
-webkit-animation-name: flashycolor3;
animation-name: flashycolor3;
-webkit-animation-duration: 20s;
animation-duration: 2s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.color-6 {
-webkit-animation-name: flashycolor4;
animation-name: flashycolor4;
-webkit-animation-duration: 20s;
animation-duration: 2s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.color-5 {
-webkit-animation-name: flashycolor;
animation-name: flashycolor;
-webkit-animation-duration: 20s;
animation-duration: 2s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.color-7 {
-webkit-animation-name: flashycolor1;
animation-name: flashycolor1;
-webkit-animation-duration: 20s;
animation-duration: 2s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.color-8 {
-webkit-animation-name: flashycolor2;
animation-name: flashycolor2;
-webkit-animation-duration: 20s;
animation-duration: 2s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.color-9 {
-webkit-animation-name: flashycolor3;
animation-name: flashycolor3;
-webkit-animation-duration: 20s;
animation-duration: 2s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.fly-in-text li {
font-size: 36px;
transform: translate(0, 250px);
margin-right: 10px;
}
你for
循环不是无限的。 它有 0 次迭代,因为h = 0
总是小于2
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.