使用CSS3动画实现文字滚动

最新推荐文章于 2024-07-08 17:02:45 发布

玛卡巴卡_ran

最新推荐文章于 2024-07-08 17:02:45 发布

阅读量553

点赞数 1

文章标签： css3 css 前端

本文链接：https://blog.csdn.net/qq_33770684/article/details/132161214

版权

使用css动画来实现文字滚动

<style>
    .scroll{
      width: 500px;
      height: 50px;
      line-height: 50px;
      white-space: nowrap;
      overflow: hidden;
      font-size: 30px;
        margin: 0 auto;
    }
    .scroll span{
      display: inline-block;/*inline样式不能使用动画*/
      animation: scroll 10s linear infinite;
    }
    @keyframes scroll {
      from {
        transform: translateX(500px)
      }
      to {
        transform: translateX(-100%)
      }
    }
</style>
<div class="scroll">
    <span> 断章(卞之琳创作现代诗歌) 你站在桥上看风景， 看风景人在楼上看你。 明月装饰了你的窗子，
                你装饰了别人的梦。</span>
</div>

这种滚动方式体验很不好，中间有过多空白，接下来我们要实现一个首尾相连的文字滚动。

在不使用js改变DOM结构的前提下，要为span里添加重复内容我们可以使用after伪元素，它有个attr函数可以获取所在父元素的属性内容，前提只要我们提前将span里的内容同时设置到属性里比如data-text，我们就可以只使用CSS为span添加尾部内容，这对使用VUE等框架是很方便的。