Aniamtion加载动画

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:;

                margin:;

            }

            /* 解决滚动条 */

            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("图片加载失败");

                }

            }

        }

巴特西

Aniamtion加载动画

最新文章

热门文章