gpt4 book ai didi

html - (Textillate.js) 两行不同字体等

转载 作者:行者123 更新时间:2023-11-28 17:10:21 25 4
gpt4 key购买 nike

我正在尝试创建每 5 秒更改一次的两行文本(一个标题和一个下划线)。但是,我没有设法更改两行的 CSS,也没有找到有关如何在线执行此操作的任何线索。

谁有什么想法?

jsFiddle:http://jsfiddle.net/9dKum/151/

HTML:

<div class="outer-box">
<div class="tlt">

<ul class="texts">
<li>HEADING #1</li>
<li>HEADING #2</li>
</ul>

<ul class="texts">
<li>underline #1</li>
<li>underline #2</li>
</ul>

</div>
</div>

CSS:

.outer-box {
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
}

.tlt {
text-align: center;
z-index: 999;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.hd {
color: #000000;
}

.un {
color: #ff0000
}

最佳答案

请试试这个。您的 css 未应用,因为 js 生成了新类。

$(document).ready(function(){
$('.texts').textillate({
minDisplayTime: 5000,
initialDelay: 100,
loop: true,
autoStart: true,

in: {
effect: 'fadeInUp',
delay: 50,
sync: true
},
out: {
effect: 'fadeOutDown',
delay: 50,
sync: true
}
});
});
.outer-box {
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
}

.tlt {
text-align: center;
z-index: 999;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.texts:first-child span {color: #ff0000;}
.texts:last-child span {color: #000000;}
<link href="http://jschr.github.io/textillate/assets/animate.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://jschr.github.io/textillate/assets/jquery.lettering.js"></script>
<script src="http://jschr.github.io/textillate/jquery.textillate.js"></script>

<div class="outer-box">
<div class="tlt">
<ul class="texts">
<li class="hd">HEADING #1</li>
<li class="un">HEADING #2</li>
</ul>
<ul class="texts">
<li class="hd">underline #1</li>
<li class="un">underline #2</li>
</ul>
</div>
</div>

关于html - (Textillate.js) 两行不同字体等,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46357683/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com