记录弹幕css3写法

弹幕写法：

放在样式之前：加这个js才不会出现加载到结尾的时候闪一下问题

<script>
        //在需要展示动画前，动态生成一个style，根据当前屏幕宽度定义好keyframes。
        let style = document.createElement('style');
        document.head.appendChild(style);
        let width = window.innerWidth;
        let from = `from { visibility: visible; -webkit-transform: translateX(${width}px); }`;
        let to = `to { visibility: visible; -webkit-transform: translateX(-100%); }`;
        style.sheet.insertRule(`@-webkit-keyframes barrage { ${from} ${to} }`, 0);
    </script>

html：

<div class="m_box">
    <ul class="index_barrage">
        <li class="index_barrage_li barrage1">
            <div class="ibl_box_w">
                <div class="ibl_box">
                    <span class="ibl_pic"><img src="/statics/ffsm/app/wnl/bzzsy/1/images/user/1.png?v=5ba5963" /></span>
                    <span class="ibl_txt">不错的分析，您的观点很独到，十分喜欢，而且分析说得很多很细！</span>
                </div>
            </div>
            <div class="ibl_box_w">
                <div class="ibl_box">
                    <span class="ibl_pic"><img src="/statics/ffsm/app/wnl/bzzsy/1/images/user/7.png?v=cadef3f" /></span>
                    <span class="ibl_txt">价格每年都没变还是这么便宜，非常超值！</span>
                </div>
            </div>
            <div class="ibl_box_w">
                <div class="ibl_box">
                    <span class="ibl_pic"><img src="/statics/ffsm/app/wnl/bzzsy/1/images/user/13.png?v=12c32a3" /></span>
                    <span class="ibl_txt">大师的提醒给了我很大的启发。</span>
                </div>
            </div>
        </li>
        <li class="index_barrage_li barrage2">
            <div class="ibl_box_w">
                <div class="ibl_box">
                    <span class="ibl_pic"><img src="/statics/ffsm/app/wnl/bzzsy/1/images/user/2.png?v=a47ed75" /></span>
                    <span class="ibl_txt">经常看胡老师的视频，受益良多。这次来算终身运势，也令我很满意</span>
                </div>
            </div>
            <div class="ibl_box_w">
                <div class="ibl_box_w">
                    <div class="ibl_box">
                        <span class="ibl_pic"><img src="/statics/ffsm/app/wnl/bzzsy/1/images/user/8.png?v=f24816e" /></span>
                        <span class="ibl_txt">算出来现在是我人生的黄金时期，我一定会按老师说的好好把握！</span>
                    </div>
                </div>
            </div>
            <div class="ibl_box_w">
                <div class="ibl_box_w">
                    <div class="ibl_box">
                        <span class="ibl_pic"><img src="/statics/ffsm/app/wnl/bzzsy/1/images/user/14.png?v=39d020f" /></span>
                        <span class="ibl_txt">算过张老师的很多测算，从没让人失望过，终身运测算也同样让人非常满意！</span>
                    </div>
                </div>
            </div>
        </li>
        <li class="index_barrage_li barrage3">
            <div class="ibl_box_w">
                <div class="ibl_box">
                    <span class="ibl_pic"><img src="/statics/ffsm/app/wnl/bzzsy/1/images/user/3.png?v=5fc0d16" /></span>
                    <span class="ibl_txt">这次把所有的大运都算了一遍，对未来人生如何规划完全有底了。</span>
                </div>
            </div>
            <div class="ibl_box_w">
                <div class="ibl_box">
                    <span class="ibl_pic"><img src="/statics/ffsm/app/wnl/bzzsy/1/images/user/9.png?v=263b15c" /></span>
                    <span class="ibl_txt">里面的内容正是我想看的，指出的问题也正是我过去所忽略了的，相信未来会变得更好。</span>
                </div>
            </div>
            <div class="ibl_box_w">
                <div class="ibl_box">
                    <span class="ibl_pic"><img src="/statics/ffsm/app/wnl/bzzsy/1/images/user/15.png?v=ea29247" /></span>
                    <span class="ibl_txt">很好，谢谢大师指点，看到了自己客观存在的问题，今后我会努力克服。</span>
                </div>
            </div>
        </li>
        <li class="index_barrage_li barrage4">
            <div class="ibl_box_w">
                <div class="ibl_box">
                    <span class="ibl_pic"><img src="/statics/ffsm/app/wnl/bzzsy/1/images/user/4.png?v=a4be062" /></span>
                    <span class="ibl_txt">提前知道自己的运势，会遇到什么机会和要注意哪些问题，让自己在新的一年里更加顺利。</span>
                </div>
            </div>
            <div class="ibl_box_w">
                <div class="ibl_box">
                    <span class="ibl_pic"><img src="/statics/ffsm/app/wnl/bzzsy/1/images/user/10.png?v=52f94fa" /></span>
                    <span class="ibl_txt">对未来没有信心，看看觉得安心很多</span>
                </div>
            </div>
            <div class="ibl_box_w">
                <div class="ibl_box">
                    <span class="ibl_pic"><img src="/statics/ffsm/app/wnl/bzzsy/1/images/user/16.png?v=3f9b06c" /></span>
                    <span class="ibl_txt">说得很有道理，而且说得太对了，真的把我的性格转变给算出来了，非常神奇。 </span>
                </div>
            </div>
        </li>
        <li class="index_barrage_li barrage5">
            <div class="ibl_box_w">
                <div class="ibl_box">
                    <span class="ibl_pic"><img src="/statics/ffsm/app/wnl/bzzsy/1/images/user/5.png?v=0e54076" /></span>
                    <span class="ibl_txt">观点独到，一语中的，老师的运势同样也给我醍醐灌顶的指导，点赞！</span>
                </div>
            </div>
            <div class="ibl_box_w">
                <div class="ibl_box">
                    <span class="ibl_pic"><img src="/statics/ffsm/app/wnl/bzzsy/1/images/user/11.png?v=8e24299" /></span>
                    <span class="ibl_txt">整体都说了，说的有道理，基本吻合</span>
                </div>
            </div>
        </li>
        <li class="index_barrage_li barrage6">
            <div class="ibl_box_w">
                <div class="ibl_box">
                    <span class="ibl_pic"><img src="/statics/ffsm/app/wnl/bzzsy/1/images/user/6.png?v=ce0624d" /></span>
                    <span class="ibl_txt">全面又彻底的了解了自己的命和运，相信未来会越来越顺！</span>
                </div>
            </div>
            <div class="ibl_box_w">
                <div class="ibl_box">
                    <span class="ibl_pic"><img src="/statics/ffsm/app/wnl/bzzsy/1/images/user/12.png?v=6635291" /></span>
                    <span class="ibl_txt">公司刚刚起步，通过十年大运，让我明白了未来在事业上将会有怎样的发展，我该如何规划。</span>
                </div>
            </div>
        </li>
    </ul>

</div>

css:

.index_barrage{ position: relative; height: 2.8rem; overflow: hidden;}
@keyframes barrage{
    from{
      left:100%;
      transform:translateX(0);
    }
    to{
      left:0;
      transform:translateX(-100%);
    }
 }
.index_barrage_li{position:absolute;left:0;top:0;visibility: hidden;height:.34rem;line-height:.34rem;border-radius:.2rem;white-space:nowrap;padding-left:.05rem;
animation:barrage 35s linear infinite;}
.ibl_box_w{ display: inline-block; margin-right: .2rem;}
.ibl_box{
    display: flex;
    justify-content: space-between;
}
.ibl_pic{margin-right:.05rem;display:inline-block;width:.32rem;height:.32rem;border: 2px solid #fff; border-radius: 50%;}
.ibl_pic img{ display: block; width: 100%; border-radius: 50%;}
.ibl_txt{ background-color: #e2bbb3;border-radius:.2rem; border-top-left-radius: 0; padding: 0 .05rem 0 .1rem; height: .3rem; line-height: .3rem; margin-top: .02rem;}
.index_barrage_li:nth-child(2) .ibl_txt{ background-color: #dabd9c;}
.index_barrage_li:nth-child(2n+1) .ibl_txt{ background-color: #fdc57a;}
.index_barrage_li:nth-child(4n+1) .ibl_txt{ background-color:#9dbcd8}
.barrage2{ top:.6rem;animation:barrage 20s linear infinite;}
.barrage3{ top:1.2rem;animation:barrage 33s linear infinite;}
.barrage4{top:1.8rem;animation:barrage 16s linear infinite;}
.barrage5{top:2.4rem;animation:barrage 19s linear infinite;}
.barrage6{top:3rem;animation:barrage 15s linear infinite;}

参考链接：

https://www.cnblogs.com/coderL/p/7647738.html