提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  工具

当前栏目

HTML 动画（一）[通俗易懂]

动画HTML 通俗易懂
2023-06-13 09:12:07 时间

大家好，又见面了，我是你们的朋友全栈君。

动画（一）

图片从左至右逐渐消失

  1. 实现逻辑： a: 将遮罩分割为数个div,多个div通过图片定位拼接成一张图片; b: 运用requestAnimationFrame + animation实现动画； c: 遮罩层网格状逐步消失设置background-position: 0；
  2. 效果图：
  1. 代码： 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        #maskBox {
            width: 800px;
            height: 600px;
            overflow: hidden;
            position: absolute;
            top: 0;
            left: 0;
        }
        /* 精灵图 */
        #maskBox .parentBox {
            width: 100%;
            height: 100px;
            overflow: hidden;
        }
        .parentBox div {
            width: 100px;
            height: 100px;
            float: left;
            background: url("https://img-blog.csdnimg.cn/20210308163835396.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzgwMzEx,size_16,color_FFFFFF,t_70#pic_center") no-repeat left center;
            background-size: 800px 600px;
            overflow: hidden;
            border: 1px solid #ccc;
            box-sizing: border-box;
        }
        .opacity{
            animation:opacity 5s ease-in-out 0s 1 alternate forwards; /*循环完成保留最后一帧画面*/
            -webkit-animation:opacity 5s ease-in-out 0s 1 alternate forwards; /*Safari and Chrome*/
        }

        /* 去掉 background-position 无图片折叠效果 */
        @keyframes opacity{
            from {opacity:1;}
            to {opacity:0;background-position: 0;}
        }
    </style>
</head>
<body>
    <!-- 内容 -->
    <div style=" width: 800px;height: 600px;background: #efa925;font-size: 50px;">内容。。。</div>
    <!-- 遮罩 -->
    <div id="maskBox"></div>

    <script  type="text/javascript">
        function Render() {
            let r_this = this;
            let lowNum = 48,colNum = 9; // 宽800/100 = 8;高 600/100=6; 个数 8*6 =48；
            let p_box = document.getElementById('maskBox');
            let pDiv = null,cDiv = null,dX = 0,dY = 0,divHidden = null;
            let index = 0,childernArr = [];
            //  创建DIV css精灵拼接图片
            r_this.createDiv = () => {
                for (let i=0;i<colNum;i++) {
                    pDiv = document.createElement("div"); // 创建父Div
                    p_box.appendChild(pDiv);
                    pDiv.setAttribute('class','parentBox');
                    for (let a=0;a<lowNum;a++) {
                        cDiv = document.createElement("div"); // 创建子div
                        pDiv.appendChild(cDiv);
                        dX = cDiv.offsetLeft;
                        dY = cDiv.offsetTop;
                        cDiv.style['background-position']=''+(-dX)+'px '+(-dY)+'px'; // 每个div都贴上图片
                        cDiv.setAttribute('class','div_'+a);
                    }
                }
            }
            // 动画 将div 逐步消失
            r_this.animation = () =>{
                childernArr = document.querySelectorAll("div.div_"+index);
                for(let i=0;i<childernArr.length;i++) {
                    childernArr[i].setAttribute('class','opacity')
                }
                index ++
                // 关闭动画 
                if (index >= lowNum) {
                    p_box.remove(); // 清除遮罩
                    window.cancelAnimationFrame(divHidden);
                    divHidden = null;
                    return;
                }

                divHidden = window.requestAnimationFrame(function( callback ){
                    window.setTimeout(r_this.animation, 1000 / 20);//定义每秒执行60次动画
                });     
            }
        }
       // 创建方法
       var render = new Render();
       
       // 创建遮罩div图片
       render.createDiv();


       // 让遮罩先停留一秒开始动画
        setTimeout(function(){
            render.animation();
        },1000)
    </script>
</body>
</html>

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/148011.html原文链接：https://javaforall.cn

相关文章