1 <div class="active">
2                     <div class="tixing">文字超出啦要滾動顯示呀~文字超出啦要滾動顯示呀~文字超出啦要滾動顯示呀~</div>
3                 </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沒有首尾相接的效果還存在一些閃爍。