html跑马灯

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

跑马灯

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

marquee被废弃

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

 

注意:任何第三方机构或个人,以提额名义索要账号密码的,都是骗子,请勿透漏!

``` 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轴的偏移,这种做法不需要对字符串进行处理,只需要控制好速度,最好是根据屏宽去计算速度。

你可能感兴趣的:(html跑马灯)