css实现信息栏上下滚动轮播
<div class="container">
<div class="tagline">
<span class="change-container">
<span class="changing">
张** 189******17 2小时前
</span>
<span class="changing">
陈** 137******06 3分钟前
</span>
<span class="changing">
徐** 150******82 2天前
</span>
<span class="changing">
屈** 131******75 1天前
</span>
<span class="changing">
第** 199******99 3分钟前
</span>
</span>
</div>
</div>
* {
margin: 0;
padding: 0;
}
.container {
background: #eee;
margin-top: 10px;
text-align: center;
height: 1.9375rem;
line-height: 1.9375rem;
margin-bottom: 10px;
}
.tagline {
text-align: center;
}
.change-container {
position: relative;
display: inline-block;
width: 100%;
height: 1.9375rem;
text-align: center;
margin-top: -5px;
}
.changing {
position: absolute;
overflow: hidden;
display: inline-block;
width: 100%;
left: 0;
bottom: 0;
height: 0;
opacity: 0;
font-size: 16px;
line-height: 16px;
text-rendering: optimizeLegibility;
-webkit-animation: revealNextWord 10s ease-in-out infinite;
animation: revealNextWord 10s ease-in-out infinite;
}
.changing:nth-child(2) {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.changing:nth-child(3) {
-webkit-animation-delay: 4s;
animation-delay: 4s;
}
.changing:nth-child(4) {
-webkit-animation-delay: 6s;
animation-delay: 6s;
}
.changing:nth-child(5) {
-webkit-animation-delay: 8s;
animation-delay: 8s;
}
@-webkit-keyframes revealNextWord {
0% {
opacity: 0.3;
height: 0;
}
10% {
opacity: 1;
height: 1.2em;
}
20% {
opacity: 1;
height: 1.2em;
}
28% {
opacity: 0;
height: 2em;
}
100% {
opacity: 0;
}
}
@keyframes revealNextWord {
0% {
opacity: 0.3;
height: 0;
}
10% {
opacity: 1;
height: 1.2em;
}
20% {
opacity: 1;
height: 1.2em;
}
28% {
opacity: 0;
height: 2em;
}
100% {
opacity: 0;
}
}
效果图