<!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. C#实现的协同过滤算法

    using System;using System.Collections.Generic;using System.Linq;using System.Text; namespace SlopeOn ...

  2. linux下apache中httpd.conf的ServerAdmin 是设置的什么？

    <VirtualHost 127.0.0.1:80> ServerAdmin ******@****.com DocumentRoot /home/aaa/sss ServerName s ...

  3. Linux之Vim学习

    Linux之Vim学习 一般模式 光标移动 按键 作用 j或down方向键 向下移动一个字符 k或up方向键 向上移动一个字符 h或left方向键 向左移动一个字符 l或right方向键 向右移动一个 ...

  4. Mac 下搭建服务器

    1.开启服务器 Apache. sudo apachectl -k start 打开浏览器,在地址栏输入 localhost,如果出现 It works! 那么第一步已经成功了,如果没成功---出门左 ...

  5. Web安全基础实践

    Web安全基础实践 标签(空格分隔): <> 目录 基础问题回答 WebGoat下载安装 SQL注入攻击 - SQL字符串注入(String SQL Injection) - 数字型SQL ...

  6. 使用fddb的测试工具测试自己的检测器

    本文是在linux下测试的,首先编译,并安装gnuplot 按照程序给定,将文件放置到对应的文件夹下 #runEvaluate.pl # where gnuplot ismy $GNUPLOT = & ...

  7. R绘图 第八篇：绘制饼图（ggplot2）

    geom_bar()函数不仅可以绘制条形图,还能绘制饼图,跟绘制条形图的区别是坐标系不同,绘制饼图使用的坐标系polar,并且设置theta="y": coord_polar(th ...

  8. Java和C#基本类库的区别

    java.lang java .net Boolean System.Boolean Byte System. Byte Character System.Char Class System.Type ...

  9. 第一次软件工程作业（One who wants to wear the crown, Bears the crown.）

    回顾你过去将近3年的学习经历 1.当初报考的时候,是真正的喜欢计算机这个专业吗? 报考时对于计算机专业只能说不讨厌,也可以认为对其没有任何的感觉. 有一个比我自己还注意我未来的老妈,我的报考只能通过一 ...

  10. 一个web应用的诞生(3)--美化一下

    经过上一章的内容,其实就页面层来说已结可以很轻松的实现功能了,但是很明显美观上还有很大的欠缺,现在有一些很好的前端css框架,如AmazeUI,腾讯的WeUI等等,这里推荐一个和flask集成很好的b ...