javascript - 试图让我的文本颜色永远交替闪烁,但不使用无限循环,有没有更好的方法?
问题描述
我正在尝试用文本闪烁颜色反复制作几个单词我设置了一个无限循环来包含代码,但它不起作用,因为时间是 5 秒有人可以告诉我我的代码有什么问题以获得我正在寻找的结果吗?虽然我不认为问题出在我的 html 文件上,但无论如何我还是添加了它,我很确定它与动画持续时间有关提前谢谢你
$(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
。
推荐阅读
- sql - 在 HIVE 中使用 DISTINCT 和 GROUP BY
- flutter - 如何防止导航栏活动图标抖动
- php - Nginx 在 Laravel 中的特定 URL 上更改位置
- javascript - 关于 keydown 捕获无法正常工作
- kotlin - 带有导航组件的主从视图
- c++ - 1./n 和 (double)1/n 之间的差异;
- javascript - 如何通过套接字正确地与 Kafka Broker 通信?
- python - 如果特定字段输出值为负数,那么在 Odoo 中查看 XML 文件时如何将其设置为 0?
- python - 使用模板标签循环遍历 django 中的对象不起作用
- c++ - C++向量函数“push_back()”,返回什么类型?