3D开机动画

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width initial-scale=1.0 user-scalable=no"/>
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            body,html{
                height: 100%;
                overflow: hidden;
            }
            #wrap{
                height: 100%;    
                position: relative;
                perspective: 200px;
            }
            #wrap > .inner{
                height: 100%;
                position: relative;
                transform-style: preserve-3d;
            }
            #wrap > .inner > img{
                height: 30%;
                margin-top: -60px;
                animation: move 1s infinite;
                
            }
            @keyframes move{
                from{transform: translate3d(-50%,-50%,0) rotateY(0deg);}
                to{transform: translate3d(-50%,-50%,0) rotateY(360deg);}
            }
            #wrap > .inner > img,#wrap > .inner > p{
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate3d(-50%,-50%,0);
            }
            
            
            
        </style>
    </head>
    <body>
        <div id="wrap">
            <div class="inner">
                <img src="img/load/logo2.png"/>
                <p>已加载0%</p>
        
            </div>
        </div>
    </body>
    <script src="../2D变换/js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/data.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        
        $(function(){
            var $pNode = $("p");
            var flag = 0;
            var images = [];
            
            for (item in imgData) {
                images = images.concat(imgData[item])
            }
            
            for (var i = 0 ; i<images.length;i++) {
                //实现图片的预加载,然后实现loading的百分比
                var img = new Image();
                img.src = images[i];
                img.onload = function(){
                    flag++;
                    $pNode.html("已加载"+(Math.round(flag/images.length*100))+"%")
                    console.log(Math.round(flag/images.length*100))
                }
                img.onerror = function(){
                    alert('地址有问题')
                }
            }
            
            
        })
        
    </script>
</html>

 

posted @ 2018-09-20 17:38  你若精彩,蝴蝶自来  阅读(599)  评论(3编辑  收藏  举报