更新时间:2022-06-08 22:40:56
通过使用CSS关键帧动画使其简单.
Make it simple by using CSS key-frame animation.
下面是一个例子.
body{
font-family:calibri;
}
.codinfox-changing-keywords{
vertical-align:top;
overflow:hidden;
height:20px;
position:relative;
display: inline-block;
width: 250px;
}
.hidden{
position:absolute;
top: 20px;
display:inline-block;
width:250px;
opacity:0;
animation: slideme 8s infinite;
}
.hidden:nth-child(3){
animation-delay: 2s;
}
.hidden:nth-child(5){
animation-delay: 4s;
}
.hidden:nth-child(7){
animation-delay: 6s;
}
@keyframes slideme {
0% {
top: 20px;
opacity:0;
}
5% {
top: 0px;
opacity:1;
}
10%{
top : 0;
opacity:1;
}
20%{
opacity:1;
}
25% {
opacity:0.1;
top : 0;
}
30% {
opacity:0;
top: 20px;
}
}
<div class="codinfox-sidebar-description sidebar-personal-info-section">
A passionate
<div class="codinfox-changing-keywords" id="change">
<strong>
<b class="hidden">software engineer</b><br/>
<b class="hidden">lifelong learner</b><br/>
<b class="hidden">blogger</b><br/>
<b class="hidden">traveller</b>
</strong>
</div>
</div>
您也可以在此处进行测试!