html跑马灯

在html中，我们常常会使用到跑马灯来轮播文字，比如下面这个

跑马灯

用来作为诈骗警示
那么我们该如何去做一个这样的跑马灯呢？
在过去，我们可以直接用<marquee>标签来完成
但是现在，它已经被弃用了，会有一些浏览器无法对其进行兼容。

marquee被废弃

但是，我们可以直接通过定义css动画来实现一个跑马灯

 <div class="tips_marquee">
    <div class="left"><div class="media-icon-msg"></div>    
    <div class="tips_marquee_div">
     <p  class="tips_marquee_msg">注意：任何第三方机构或个人，以提额名义索要账号密码的，都是骗子，请勿透漏！</p>
    </div>
</div>```
left代表左侧图标外侧的壳
现在，我们来对样式进行处理

.tips_marquee {
background-color: #ffffff;
height: 80px;
width:100%;

    .tips_marquee_div{
      height:80px;
      overflow:hidden; //隐藏滚动条
      margin-right: 20px;
    }
    //左侧喇叭的框
    .left{
        display: inline-block;
        height: 80px;
        width: 40px;
        background:white;
        padding-left:20px;
        padding-right:20px;
        float:left; 

    }
    .tips_marquee_msg {
        background-color: #ffffff;
        font-size: 24px;
        color:#808080;
        display: inline-block;
        width:100%;
        white-space: nowrap;
        word-wrap: normal;
        animation: marquee 40s linear infinite;

    }

再来对动画进行完整定义

@keyframes marquee {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-180%);
}
}

实际上，相当于对整个框进行x轴的偏移，这种做法不需要对字符串进行处理，只需要控制好速度，最好是根据屏宽去计算速度。