Aniamtion加载动画

Posted 2022-09-20 lufei910

css新增样式Animation的运用

希望可以通过这个案例加深对Animation以及Transform 两大api的认识

效果图如下：

 

 

 

在这里需要注意的是：理应通过发送服务器请求来获取图片，从而达到这种动态加载的效果 通过node和ajax

　　　　　　　　　　但本文采取了另一种本地动态加载的办法来展现：即 通过本地获取图片路径，利用图片的onload方法来判断加载成功与失败

 

模拟效果需要使用Chrome的开发者工具里的上网环境：

 

 

 

 

 

 

html代码如下：

<div id="wrap">
        <div class="inner">
        <img src="load/logo2.png" >
        <p>已加载0%</p>
                
        </div>
            
            
</div>

 

　　

css代码如下：

@keyframes move
                from
                    /* top: 0px; */
                    /* debugger; */
                    transform: rotateY(0deg);
                
                to
                    /* top: 40px; */
                    transform: rotateY(360deg);
                
            
            *
                padding: 0;
                margin: 0;
            
            /* 解决滚动条 */
            html,body
                height: 100%;
                overflow: hidden;
            
            /* 位置高宽  垂直水平居中方案 */
            #wrap
                height: 100%;
                position: relative;
                background: gray;
                
            
            #wrap>.inner
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate3d(-50%,-50%,0);
                text-align: center;
                white-space: nowrap;
                perspective: 200px;
                transform-style: preserve-3d;
                
            
            #wrap>.inner>img
                font-size: 50px;
                position: relative;
                animation: move 1s linear infinite normal;
                
            

 

 

javascript代码如下：

window.onload=function()
            var pNode=document.querySelector("#wrap > .inner > p");
            var flag=1;
            // var img=document.querySelector("#wrap > .inner > img");
            // 1.首先需要一个数组把js对象遍历出来  都添加到数组中  此时没有使用ajax 和node  模拟使用请求数据库数据
            var arr =[];
            for(arrNode in imgData)
                arr=arr.concat(imgData[arrNode]);
                            
            
            // 2.再把图片添加到浏览器中
            for(i=0;i<arr.length;i++)
                var img=new Image();
                img.src=arr[i];
                
                img.onload = function()
                    flag++;
                    // 3.此时要计算p标签的内容
                    pNode.innerHTML="已加载"+Math.round(flag/arr.length*100)+"%";
                
                img.onerror=function()
                    console.log("图片加载失败");