css3 div内部文字左右滚动

smily_word

已于 2022-07-26 16:07:46 修改

阅读量1.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： css3 文章标签： css3 css 前端

于 2022-07-26 16:06:58 首次发布

本文链接：https://blog.youkuaiyun.com/smily_word/article/details/125997012

css3 专栏收录该内容

1 篇文章

订阅专栏

没有检索到摘要

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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%);
            }
        }