js,css文字横向滚动

 如下：

1.<marquee>标签可以自动实现效果，但是已经废弃 。

使用方法:https://www.jianshu.com/p/6dcec8a9ea60

属性介绍:<marquee> - HTML（超文本标记语言） | MDN

2.css实现

<div class="notice-con">
    <div class="notice-main">     
        <span class="notice"> 
            1.注射用甲泼尼龙琥珀酸钠；2.5%葡萄糖注射液
        </span>
    </div>
</div>  

 
   

.notice-con {
        width: 342px; 
        height: 24px;  
        line-height: 24px;
        margin: 0 auto 15px;
        color: #fff; 
        font-size: 12px; 
        overflow: hidden;
        background: url("notice.png") no-repeat center;  
        background-size: contain;
    }
 
    .notice-main {
        margin: 0 16px 0 25px; 
        overflow: hidden;    
    }
    
    .notice {
        display: block;
        -moz-animation: move 8s infinite linear;
        -webkit-animation: move 8s infinite linear;
        animation: move 8s infinite linear;   
        white-space: nowrap;              
    }
    
    @-moz-keyframes move{ 
        0%{transform:translateX(100%);}    
        50%{transform:translateX(0);}
        100%{transform:translateX(-100%);} 
    }
    @-webkit-keyframes move{ 
        0%{transform:translateX(100%);}    
        50%{transform:translateX(0);}
        100%{transform:translateX(-100%);}
    }
    @keyframes move{ 
        0%{transform:translateX(100%);}    
        50%{transform:translateX(0);}
        100%{transform:translateX(-100%);}   
    }

以上使用了水平平移transform:translateX，也可以使用margin-left控制或者若是定位的使用left或right，以上notice可能是动态插入的，所以层级分的比较多

注意：以上100%一般参照标准都是父级元素的width和height，所以若是notice的宽度过大，超过了100%的值那么可能出现动画没有完全播放完整就到下一次播放了，所以以上做法要求：notice的width要小于父级的width（若是width不确定，那么久修改上面代码，在notice外面加一层使其width是自适应内容的width，这样100%永远等于notice的width所以动画正好完全播放）

<div class="notice-con">
    <div class="notice-main-con">
        <div class="notice-main">     
            <span class="notice"> 
                1.注射用甲泼尼龙琥珀酸钠；2.5%葡萄糖注射液
            </span>
        </div>
    </div>
</div>    

   

 .notice-con {
        width: 342px; 
        height: 24px;  
        line-height: 24px;
        margin: 0 auto 15px;
        color: #fff; 
        font-size: 12px; 
        overflow: hidden;
        background: url("notice.png") no-repeat center;  
        background-size: contain;
    }
 
    .notice-main-con {
        margin: 0 16px 0 25px; 
        overflow: hidden;    
    }
 
     .notice-main {
        display: inline-block;
        width: auto;  
        white-space: nowrap;
    }
    
    .notice {
        display: block;
        -moz-animation: move 8s infinite linear;
        -webkit-animation: move 8s infinite linear;
        animation: move 8s infinite linear;                 
    }
    
    @-moz-keyframes move{ 
        0%{transform:translateX(100%);}    
        50%{transform:translateX(0);}
        100%{transform:translateX(-100%);} 
    }
    @-webkit-keyframes move{ 
        0%{transform:translateX(100%);}    
        50%{transform:translateX(0);}
        100%{transform:translateX(-100%);}
    }
    @keyframes move{ 
        0%{transform:translateX(100%);}    
        50%{transform:translateX(0);}
        100%{transform:translateX(-100%);}   
    }