1、html的代码块
<div class="scroll">
<span>
断章(卞之琳创作现代诗歌)
你站在桥上看风景,
看风景人在楼上看你。
明月装饰了你的窗子,
你装饰了别人的梦。
</span>
</div>
2、style代码块
/*字数滚动*/
.scroll {
width: 300px;
height: 50px;
line-height: 50px;
font-size: 30px;
margin: 0 auto;
white-space: nowrap; /*文字不折行*/
overflow: hidden; /*文字溢出隐藏*/
}
.scroll span {
display: inline-block;
/*inline样式不能使用动画*/
animation: scroll 10s linear infinite; /*滚动动画*/
}
@keyframes scroll {
from {
transform: translateX(300px); /*div多宽就写多宽*/
}
to {
transform: translateX(-100%);
}
}