1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <meta name="viewport" content="width=device-width initial-scale=1.0 user-scalable=no"/>
  6.         <title></title>
  7.         <style type="text/css">
  8.             *{
  9.                 padding: 0;
  10.                 margin: 0;
  11.             }
  12.             body,html{
  13.                 height: 100%;
  14.                 overflow: hidden;
  15.             }
  16.             #wrap{
  17.                 height: 100%;
  18.                 position: relative;
  19.                 perspective: 200px;
  20.             }
  21.             #wrap > .inner{
  22.                 height: 100%;
  23.                 position: relative;
  24.                 transform-style: preserve-3d;
  25.             }
  26.             #wrap > .inner > img{
  27.                 height: 30%;
  28.                 margin-top: -60px;
  29.                 animation: move 1s infinite;
  30.  
  31.             }
  32.             @keyframes move{
  33.                 from{transform: translate3d(-50%,-50%,0) rotateY(0deg);}
  34.                 to{transform: translate3d(-50%,-50%,0) rotateY(360deg);}
  35.             }
  36.             #wrap > .inner > img,#wrap > .inner > p{
  37.                 position: absolute;
  38.                 left: 50%;
  39.                 top: 50%;
  40.                 transform: translate3d(-50%,-50%,0);
  41.             }
  42.  
  43.         </style>
  44.     </head>
  45.     <body>
  46.         <div id="wrap">
  47.             <div class="inner">
  48.                 <img src="img/load/logo2.png"/>
  49.                 <p>已加载0%</p>
  50.  
  51.             </div>
  52.         </div>
  53.     </body>
  54.     <script src="../2D变换/js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
  55.     <script src="js/data.js" type="text/javascript" charset="utf-8"></script>
  56.     <script type="text/javascript">
  57.  
  58.         $(function(){
  59.             var $pNode = $("p");
  60.             var flag = 0;
  61.             var images = [];
  62.  
  63.             for (item in imgData) {
  64.                 images = images.concat(imgData[item])
  65.             }
  66.  
  67.             for (var i = 0 ; i<images.length;i++) {
  68.                 //实现图片的预加载，然后实现loading的百分比
  69.                 var img = new Image();
  70.                 img.src = images[i];
  71.                 img.onload = function(){
  72.                     flag++;
  73.                     $pNode.html("已加载"+(Math.round(flag/images.length*100))+"%")
  74.                     console.log(Math.round(flag/images.length*100))
  75.                 }
  76.                 img.onerror = function(){
  77.                     alert('地址有问题')
  78.                 }
  79.             }
  80.  
  81.         })
  82.  
  83.     </script>
  84. </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. Android开发之自定义局部导航菜单

    如今,要实现导航功能方案有很多.比如: 1.用3.0+自带的Toolbar + Fragment导航. 2.用Tabhost实现导航.小弟学浅,就只用过这两种方案实现导航. 但是这两种方案都有一个很明 ...

  2. Node.js实战(一)之概述

    , 一.Node.js介绍 Node.js是一个Javascript运行环境(runtime environment),发布于2009年5月,由Ryan Dahl开发,实质是对Chrome V8引擎进 ...

  3. 转自：strcmp函数实现及详解

    strcmp函数是C/C++中基本的函数,它对两个字符串进行比较,然后返回比较结果,函数形式如下:int strcmp(constchar*str1,constchar*str2);其中str1和st ...

  4. 经常使用命令 echo、@、call、pause、rem

    经常使用命令 echo.@.call.pause.rem(小技巧:用::取代rem)是批处理文件最经常使用的几个命令,我们就从他们開始学起. 首先, @ 不是一个命令, 而是DOS 批处理的一个特殊标 ...

  5. Junit测试中找不到junit.framework.testcase

    在使用Junit进行测试时,出现如下问题: 找不到junit.framework.testcase 解决方法: 选中项目->属性->Java构建路径->库->添加外部jar 在 ...

  6. Java基础—常用类之String类

    一.String类是什么 public final class String implements java.io.Serializable, Comparable<String>, Ch ...

  7. Exp8 web基础

    20155332<网络对抗>Exp5 MSF基础应用 1.实验环境搭建 1.apache的安装与配置 安装:sudo apt-get install apache2 开启:service ...

  8. C# 获取汉字拼音首字母/全拼

    最近悟出来一个道理,在这儿分享给大家:学历代表你的过去,能力代表你的现在,学习代表你的将来. 十年河东十年河西,莫欺少年穷 学无止境,精益求精   本节探讨C#获取汉字拼音首字母的方法: 代码类东西, ...

  9. Javascript与后台相互访问

    (1)Javascript访问C#后台变量或函数 A.通过<%=%>的形式访问 var str = "<%=GetStr() %>"; var str = ...

  10. idea 迁移maven项目出现导入仓库半天没反应的问题解决

    可以先参考: https://www.cnblogs.com/kinome/p/10289212.html 然后再看看maven配置文件是否正确,项目进行迁移时,如果环境不同,比如一个是使用的自定义m ...