zoukankan      html  css  js  c++  java
  • 记录弹幕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

  • 相关阅读:
    win10如何在局域网中设置一台电脑的固定ip地址
    智能电视软件安装(WIFI上网)
    路由器连接宽带(成功上网步骤方法)
    FastReport.Net使用:[5]主从表
    FastReport.Net使用:[4]分组
    FastReport.Net使用:[3]简单报表一
    FastReport.Net使用:[2]添加MSSQL数据源一
    FastReport.Net使用:[1]屏蔽打印对话框
    如何配置FastReport.Net环境
    如何安装使用FastReport
  • 原文地址:https://www.cnblogs.com/huanghuali/p/12559904.html
Copyright © 2011-2022 走看看