文本超出滚动

<div class="active">
                    <div class="tixing">文本超出啦要滚动显示呀~文本超出啦要滚动显示呀~文本超出啦要滚动显示呀~</div>
                </div>

仅使用css:

<style>
        .active{
            color:red;
            display:block;
            width:98%;
            height:30px;
            margin:0 auto;
            position:relative;
            overflow:hidden;
        }
       
        .tixing{
            position:absolute;
            top:0;
            left:100%;
            line-height:30px;
            display:block;
            word-break:keep-all;
            text-overflow:ellipsis;
            white-space:nowrap;
            font-size:xx-large;
           animation: move 5s infinite alternate linear;
        }
       @keyframes move {0% {left: 0;transform: translate(0, 0);}100% {left: 100%;transform: translate(-100%, 0);}}
    </style>        

效果展示：

 第二种方式，使用css+js

css:

 <style>
        .active{
            color:red;
            display:block;
            width:98%;
            height:30px;
            margin:0 auto;
            position:relative;
            overflow:hidden;
        }
       
        .tixing{
            position:absolute;
            top:0;
            left:100%;
            line-height:30px;
            display:block;
            word-break:keep-all;
            text-overflow:ellipsis;
            white-space:nowrap;
            font-size:xx-large;
        }
    </style>

js:

<script type="text/javascript" src="/js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript">
        (function () { var timer = setTimeout(this.marquee, 500); }());
        function marquee() {
            var scrollWidth = $('.active').width();
            var textWidth = $('.tixing').width();
            var i = scrollWidth;
            setInterval(function () {
                i--;
                if (i < -textWidth) {
                    i = scrollWidth;
                }
                $('.tixing').animate({ 'left': i + 'px' }, 20);
            }, 10);
        }
    </script>

效果展示：

 

说明：使用上述css方法能够达到首尾相接的效果，且没有太大的闪烁，使用css+js没有首尾相接的效果还存在一些闪烁。