今天在搞移动端开发的时候,标题太长导致被隐藏了,那么如何让这溢出的文字进行滚动显示呢?

.animate { 
            display: inline-block;
            white-space: nowrap;
            animation: 10s scrollText linear infinite normal;
        }
 
        @keyframes scrollText {
            0% {
                transform: translateX(0px);
                -webkit-transform: translateX(0px);
            }
            100% {
                transform: translateX(-100%);
                -webkit-transform: translateX(-100%);
            }
        }
 
        @-webkit-keyframes scrollText {
            0% {
                transform: translateX(0px);
                -webkit-transform: translateX(0px);
            }
            100% {
                transform: translateX(-100%);
                -webkit-transform: translateX(-100%);
            }
        } 

通过css的keyframes来定义动画实现滚动文本.translateX就是滚动方向了.即横向滚动.

以上就是【css溢出滚动文字】的全部内容了,欢迎留言评论进行交流!