html
<div class="roll-box">
<div class="text">滚滚长江东逝水,浪花淘尽英雄,是非成败... ...</div>
</div>
css
.roll-box{
height: 40px;
border: 1px solid #ccc;
border-radius: 6px;
margin: 50px auto;
width: 200px;
position: relative;
line-height: 40px;
overflow: hidden;
font-size: 16px;
}
.roll-box .text{
position: absolute;
white-space: nowrap;
left: 0;
top: 0;
animation-name: roll;
animation-duration: 4s;
animation-timing-function: linear;
padding-right: 20px;
animation-iteration-count: infinite;
}
.roll-box .text:before{
content: '';
display: inline-block;
width: 200px;
height: 100%;
}
@keyframes roll{
from{
transform: translate(0%,0);
}
to{
transform: translate(-100%,0);
}
}
原理
css3动画实现的文字无缝轮播,c3动画默认只播放一次。animation-iteration-count: infinite;将播放次数设置为无穷。文字不能换行。每次动画播放完,该元素将回到初始位置,为了框内文字不至于每次都闪现到初始位置而显得有点突兀,这里用一个宽度和显示框一样长的伪元素占位。
再有一点就是transform: translate(-100%,0);的百分数值是以自身为基准的。其它比如宽度或者高度等,如果以百分比为值则是以其父元素为基准。