记录弹幕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
