您的位置:首页 > Web前端 > > 正文

html5长按动画效果(HTML5实现移动端弹幕动画效果)

更多 时间:2021-10-07 00:03:35 类别:Web前端 浏览量:2944

html5长按动画效果

HTML5实现移动端弹幕动画效果

思路

1.把单个内容编辑好,计算自身宽度,确定初始位置
 

2.移动的距离是屏幕宽度

3.js动态的添加css动画函数,将高度、动画移动时间、动画延迟时间都用随机数控制

代码:

html骨架结构

(以三个为例,如果觉得界面太长不友好,也可以js动态的生成)

  • <li class="cute-barrage">
        <li class="barrage-li">
            <img src="http://kw1-1253445850.file.myqcloud.com/static/image/stimg_7656dc02eb1cd13adbacbdd2695dc3a8.jpg"/>
            <span>一月一度的花呗还款期到啦<i>哈哈哈</i></span>
        </li>
        <li class="barrage-li">
            <img src="http://kw1-1253445850.file.myqcloud.com/static/image/stimg_632fecdcb52417cb8ab89fa283e07281.jpg"/>
            <span>坐等发工资<i>呵呵呵</i></span>
        </li>
        <li class="barrage-li">
            <img src="../../static/cutePresent/resource/avatar.png"/>
            <span>变有钱变有钱<i>耶耶耶</i></span>
        </li>
    </li>
    
    
    
  • css样式

    .cute-barrage是确定展示范围和位置,宽度为100%,高度自定,横向超出部分隐藏
    .barrage-li 内容部分,长度由内容决定,确定相对父级的位置

  • html,body{
        width:100%;
    }
    .cute-barrage{
        width: 100%;
        height: 4rem;  /*确定弹幕长度*/
        position: absolute;
        top: 1.5rem;   /*确定弹幕高度*/
        left: 0;
        overflow-x: hidden;  /*横向超出部分隐藏*/
        .barrage-li{
            position: absolute;
            top: 0;
            right: -100%;  /*保证一开始在界面外侧,从右向左就是right,从左向右就是left*/
            height: 0.6rem;
            background-color: rgba(255, 255, 255, 0.9);
            border-radius: 2rem;
            white-space: nowrap;   /*确保内容在一行显示,不然移动到最后会折行*/
            img{
                width: 0.5rem;
                height: 0.5rem;
                vertical-align: middle;  //内联块元素,居中对齐
                padding-left: 0.05rem;
                border-radius: 50%;
            }
            span{
                font-size: 14px;
                padding: 0 0.1rem;
                line-height: 0.6rem;    //内联块元素,居中对齐四个缺一不可
                height: 0.6rem;      //内联块元素,居中对齐四个缺一不可
                display: inline-block;       //内联块元素,居中对齐四个缺一不可
                vertical-align: middle;      //内联块元素,居中对齐四个缺一不可
                i{
                    color: #fe5453;
                    font-weight: 700;
                }
            }
        }
    }
    
  • js动态动画实现(zepto.js)

  • //弹幕
    var winWidth = $(window).width();  //获取屏幕宽度
    $(".barrage-li").each(function(index,value){   //遍历每条弹幕
        var width = $(value).width();   //获取当前弹幕的宽度
        var topRandom = Math.floor(Math.random() * 3) + 'rem';  //获取0,1,2的随机数  可根据情况改变
        $(value).css({"right":-width,"top":topRandom});  //将弹幕移动到屏幕外面,正好超出的位置
        //拼写动画帧函数,记得每个ani要进行区分,宽度从自己的负宽度移动一整个屏幕的距离    
        var keyframes = `\    
            @keyframes ani${index}{   
                form{
                    right:${-width}px;
                }
                to{
                    right:${winWidth}px;
                }
            }\    
            @-webkit-keyframes ani${index}{
                form{
                    right:${-width}px;
                }
                to{
                    right:${winWidth}px;
                }
            }`;      
        //添加到页面的head标签里面
        $("<style>").attr("type","text/css").html(keyframes).appendTo($("head"));      
        //定义动画速度列表
        var aniList = [3,5,7,9,11];
        //取数组的随机数,0,1,2,3,4
        var aniTime =Math.floor(Math.random() * 5);
        //给当全前弹幕添加animation的css
        //延迟的时间用每个的*1.5倍,这个可变
        $(value).css({"animation":`ani${index} ${aniList[aniTime]}s linear ${index * 1.5}s`,"-webkit-animation":`ani${index} ${aniList[aniTime]}s linear ${index * 1.5}s`});
    })
    
  • 总结

    以上所述是小编给大家介绍的HTML5实现移动端弹幕动画效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对开心学习网网站的支持!
    如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

    您可能感兴趣