<!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>

3D开机动画的更多相关文章

  1. 8套迷人精致的CSS3 3D按钮动画

    1.纯CSS3 3D按钮 按钮酷似牛奶般剔透 CSS3按钮一般都可以设计的非常漂亮,利用投影.渐变等CSS3属性特效可以把按钮渲染的十分动感.今天分享的这款CSS3按钮外观非常特别,它看上去酷似晶莹剔 ...

  2. 透过HT for Web 3D看动画Easing函数本质

    http://www.hightopo.com/guide/guide/plugin/form/examples/example_easing.html 50年前的这个月诞生了BASIC这门计算机语言 ...

  3. Android开机动画

    Android系统的开机动画可分为三个部分,kernel启动,init进程启动,android系统服务启动.这三个开机动画都是在一个叫做 帧缓冲区(frame buffer)的硬件设备上进行渲染绘制的 ...

  4. css3之3D魔方动画（小白版）

      在这里分享一下3D魔方动画,html5+CSS3即可完成~无图无真相,先上效果图 第一步非常简单,就是先将魔方的结构画出来.大家都玩过魔方,知道魔方是一个有六个面的正方体.这里我们先写一个大的di ...

  5. 透过WebGL 3D看动画Easing函数本质

    50年前的这个月诞生了BASIC这门计算机语言,回想起自己喜欢上图形界面这行,还得归功于当年在win98下用QBASIC照葫芦画瓢敲了一段绘制奥运五环的代码,当带色彩的奥运五环呈现在自己面前时我已知道 ...

  6. Android隐藏虚拟按键，关闭开机动画、开机声音

    /*********************************************************************** * Android隐藏虚拟按键,关闭开机动画.开机声音 ...

  7. 理论制作 Windows 开机动画

    第一次接触 Windows 开机动画是 2012 年,那时候魔方的版本号还是 3.12,魔方里面有个很酷炫狂霸拽的功能就是替换 Windows 7 的开机动画.一开始我是在IT之家论坛里下载开机动画, ...

  8. 9个超绚丽的HTML5 3D图片动画特效

    在Web 1.0时代,我们的网页中图片数量非常少,而且都是以静态图片为主.HTML5的出现,推动了Web 2.0的发展,同时也催生出了很多绚丽的HTML5图片动画特效,特别是有些还有3D的动画效果.本 ...

  9. Android 开机动画启动过程详解

    Android 开机会出现3个画面: 1. Linux 系统启动,出现Linux小企鹅画面(reboot)(Android 1.5及以上版本已经取消加载图片): 2. Android平台启动初始化,出 ...

随机推荐

  1. Netty入门（十）解码分隔符和基于长度的协议

    我们需要区分不同帧的首尾,通常需要在结尾设定特定分隔符或者在首部添加长度字段,分别称为分隔符协议和基于长度的协议,本节讲解 Netty 如何解码这些协议. 一.分隔符协议 Netty 附带的解码器可以 ...

  2. BZOJ5102:[POI2018]Prawnicy(贪心,堆)

    Description 定义一个区间(l,r)的长度为r-l,空区间的长度为0. 给定数轴上n个区间,请选择其中恰好k个区间,使得交集的长度最大. Input 第一行包含两个正整数n,k(1<= ...

  3. Android Studio运行找不到Genymotion虚拟机

    如图: 在Genymotion->Settings下ADB选项卡下选择使用SDK工具: 完成后试试吧

  4. Android Studio中新建和引用assets文件

    从eclipse转过的朋友们应该不太习惯AS中新建assets文件和对文件内容的引用.我也查找了网上很多资料发现很少有这样的解决答案,于是便把自己解决的方法总结在这里. 1.一般新建project后这 ...

  5. 【转】使用Chrome Frame，彻底解决浏览器兼容问题

    本文转自http://www.ryanbay.com/?p=269,感谢该作者的总结 X-UA-Compatible是自从IE8新加的一个设置,对于IE8以下的浏览器是不识别的. 通过在meta中设置 ...

  6. jupyter中添加conda环境

    安装完Anaconda利用conda创建了虚拟环境,但是启动jupyter notebook之后却找不到虚拟环境. 实际上是由于在虚拟环境下缺少kernel.json文件,解决方法如下: 首先安装ip ...

  7. 矿难让显卡压了那么多货咋办？NV如是说

    在苏州 GTC 开幕的几天前,英伟达刚刚遭遇了一次股价的腰斩. 近来加密货币的热度渐低,受到挖矿热潮照顾许多的英伟达「矿机」销量受到打击,甚至出现了严重的库存危机,加上近来刚刚发的 RTX20 系列显 ...

  8. IP数据库

    免费的IP数据库,qqwry.dat文件:通过读文件来获取ip地址的地区信息: QQWry.Dat的格式如下: +----------+| 文件头 | (8字节)+----------+| 记录区 | ...

  9. 20155218 《网络对抗技术》 MAL_恶意代码分析

    20155218 <网络对抗技术> MAL_恶意代码分析 实验内容: 1.使用schtasks指令监控系统运行 1.在C盘下新建一个文本文档,输入一下内容后,更名为netstatlog.b ...

  10. Exp7

    实验内容 简单应用SET工具建立冒名网站 kali IP: 192.168.1.160 (原198) win7 IP: 192.168.1.199 1.开启本机Apache服务 (1)查看80端口是否 ...