移动端的 开机动画

  • <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  • height: 100%; overflow: hidden; 禁止滚动条
  • 初始包含块 为 #wrap ，即设置 position: relative;
  • 包裹设置 width 和 height，给 img 设置 width: 100%;
  • （相对来说）项目当前的进度 = 图片加载成功的个数 / 图片的总数  = 加载条的 进度

    • js，css，font，依赖包，都加载比较快 ， img 加载慢，近乎决定了项目加载速度（window.onload）
    • img 在使用的时候才会加载
    • 创建一个数组： 保存图片的路径
      • data.js

        • /**** data.js ****/
          
var imgPath = {
          
    logo:["./img/logo/logo1.png", "./img/logo/logo2.png"],
          
    pageBg:["./img/bg1.jpg", "./img/bg2.jpg"],
          
    loadIcon:["./img/load/ico1.png", "./img/load/ico2.png"]
          
};

// imgPath.logo[1]
          // imgPath[logo][1]
      • index.js 
        • <script type="text/javascript" src="./js/data.js"></script>

<script type="text/javascript">
          
    var imgArr = [];    // 保存项目的图片路径

    for(var attr in imgPath){
          
        // 每个数组 imgPath[attr];

        // 将 imgPath[attr] 的元素放入 imgArr 中
          
        // 合并 imgArr 和 imgPath[attr]
          
     imgArr = imgArr.concat(imgPath[atrr]);
          
    }
          
</script>

/**** 
              var arr1 = [1,2];
              var arr2 = [3,4,5];

    arr1.concat(arr2);    // arr1[1,2];    arr2[3,4,5];
              arr1 = arr1.concat(arr2);
          ****/
    • var img = new Image();        // 项目中，创建 <img src="" /> 的方式

      • // 只要 img 图片加载成功，就会触发 img.onload 事件
        
var imgCount;

// 项目进度 = 图片加载成功数 / 要加载的图片总数
        
for(var i=0; i<imgArr.length; i++){
        
    var img = new Image();
        
    img.src = imgArr[i];

    img.onload = function(){
        
        imgCount += 1;
        
        tips.innerHTML = "已加载"+
        
                          Math.round(imgCount/imgArr.length*100)+
        
                          "%";
        
    };
        
};
  • <!DOCTYPE html>
    
<html>
    
    <head>
    
        <meta charset="UTF-8"/>
    
        <title></title>

        <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    
        <meta name="viewport"
    
              content="user-scalable=no,
    
                       width=device-width,
    
                       initial-scale=1.0,
    
                       minimum-scale=1.0,
    
                       maximum-scale=1.0"/>

        <style rel="stylesheet" type="text/css">
    
            html, body, div, ul, li {
    
                margin: 0;
    
                padding: 0;
    
            }

            html, body {
    
                width: 100%;
    
                height: 100%;    /* 参照屏幕区域的高 */
    
                min-width: 600px;
    
                overflow: hidden;
    
            }

            #wrap {
    
                width: 100%;
    
                min-height: 100%;

                background: cadetblue;
    
            }

            #content {
    
                width: 100%;

                padding-bottom: 50px;

                font-size: 14px;
    
                background: darkgrey;
    
            }

            #footer {
    
                width: 100%;
    
                height: 50px;

                margin-top: -50px;

                background: chocolate;
    
                text-align: center;
    
                line-height: 50px;
    
            }

            /**** Loading Animation ****/
    
            #loading_box {
    
                position: absolute;
    
                top: 50%;
    
                left: 50%;
    
                transform: translate(-50%, -50%);
    
                transform-style: preserve-3d;
    
                perspective: 300px;

                background-color: #ccc0;
    
            }

            /**** Rotating Tips ****/
    
            #loading_tips {
    
                margin-bottom: 10px;

                font-size: 48px;
    
                text-align: center;
    
                animation: rotateLetter 3s infinite alternate;
    
            }
    
            @keyframes rotateLetter {
    
                from {
    
                    transform: rotateY(-30deg);
    
                }
    
                to {
    
                    transform: rotateY(30deg);
    
                }
    
            }

            /**** Floating Words ****/
    
            #loading_animation {
    
                list-style: none;
    
                background-color: #bbb0;
    
            }

            #loading_animation li:last-child {
    
                margin-right: 0px;
    
            }

            #loading_animation li {
    
                float: left;

                margin-right: 10px;
    
                animation: jumpLetter 3s infinite alternate;
    
            }
    
            @keyframes jumpLetter {
    
                from {
    
                    transform: translateY(0px);
    
                }

                to {
    
                    transform: translateY(-15px);
    
                }
    
            }
    
        </style>
    
    </head>

    <body>

        <!-- 模拟屏幕区域 -->
    
        <div id="wrap">

            <!-- 内容区域 -->
    
            <div id="content">
    
                <div id="loading_box">
    
                    <div id="loading_tips">
    
                    </div>
    
                    <ul id="loading_animation">
    
                        <li>L</li>
    
                        <li>o</li>
    
                        <li>a</li>
    
                        <li>d</li>
    
                        <li>i</li>
    
                        <li>n</li>
    
                        <li>g</li>
    
                    </ul>
    
                </div>
    
            </div>
    
        </div>

        <!-- 底部区域 -->
    
        <div id="footer">

        </div>

        <script type="text/javascript" src="./js/index.js"></script>
    
        <script type="text/javascript" src="./js/data.js"></script>
    
        <script type="text/javascript">
    
            var lis = document.querySelectorAll("#loading_animation li");

            var colorArr = ["red", "green", "blue"];
    
            var i = 0;
    
            for(i=0; i<lis.length; i++){
    
                lis[i].style.color = colorArr[i%3];

                lis[i].style.animationDelay = i*100+"ms";
    
            }

        var loadingTips = document.getElementById('loading_tips');

        //创建数组：保存项目的图片
    
        var imgArr = [];

        //保存图片加载成功的个数
    
        var index = 0;

        //把data中图片路径塞到imgArr中
    
        for(var i in imgData){    //枚举对象上的每一个属性
    
            imgArr = imgArr.concat(imgData[i])
    
        };

        //项目进度 = 图片加载成功的个数 / 图片总数
    
        for(var i=0;i<imgArr.length;i++){
    
            //创建img
    
            var img = new Image();//创建图片对象

            img.src = imgArr[i];

            //图片加载成功
    
            img.onload = function () {
    
                index++;

                console.log(Math.round(index/imgArr.length*100));
    
                loadingTips.innerHTML = Math.round(index/imgArr.length*100)+'%';
    
            };
    
        }
    
        </script>
    
    </body>
    
</html>

CSS3_移动端_开机动画的更多相关文章

  1. 开机logo以及两种修改开机动画方法

    Android开机画面总共有三屏 一.第一屏:开机logo 1.选张png格式的图片,在Linux任意下执行(安装工具): sudo apt-get install pnmtoplainpm 2.在所 ...

  2. 安卓修改开机logo和开机动画的方法

    第一种和第二种方法亲测可用,安卓版本是4.2和安卓5.1均可.第二种方法待验证 以下三种方法 Android 开机其实总共会出现3个画面: 1.第一个就是 linux 系统启动,出现Linux小企鹅画 ...

  3. 设置安卓开机动画、开机logo

    我们要修改的是system>media文件夹下的bootanimation.zip(手机开机动画)这个文件 先来讲讲这个文件结构:该zip解压后得到两个文件, 第一个目录存放了开机时播放的图片( ...

  4. Android开机动画、logo、字样的定制过程【转】

    本文转载自:http://blog.csdn.net/yinhaide/article/details/43668401 Android开机画面总共有三屏 一.第一屏:开机logo 1.选张png格式 ...

  5. Android开机动画

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

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

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

  7. 理论制作 Windows 开机动画

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

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

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

  9. 纯css做的安卓开机动画

    随着css3的发展,越来越多的负责绚丽的效果可以由纯css来完成了.用css3实现的动画效果丝毫不必js实现的逊色,而且浏览器对css渲染的速度远比js快,大多数时候css的体积也不js小.其中css ...

随机推荐

  1. SpringCloud笔记一：扫盲

    目录 前言 什么是微服务? 微服务的优缺点是什么? 微服务之间是如何通讯的? SpringCloud和Dubbo有哪些区别? SpringCloud和SpringBoot的关系? 什么是服务熔断?什么 ...

  2. 第十二节: 总结Quartz.Net几种部署模式(IIS、Exe、服务部署【借助TopSelf、服务类】）

    一. IIS部署 比如在MVC框架中集成了Quartz.Net定时调度,此时该调度系统会随着MVC框架被挂在IIS下,IIS会进程回收,所以大部分开发都会遇到Quartz挂在IIS下一段时间不好用. ...

  3. 第六节：深入研究Task实例方法ContinueWith的参数TaskContinuationOptions

    一. 整体说明 揭秘: 该章节的性质和上一个章节类似,也是一个扩展的章节,主要来研究Task类下的实例方法ContinueWith中的参数TaskContinuationOptions. 通过F12查 ...

  4. $A,B$ 实对称 $\ra\tr((AB)^2)\leq \tr(A^2B^2)$

    设 $A,B$ 是 $n$ 阶实对称矩阵. 试证: $\tr((AB)^2)\leq \tr(A^2B^2)$. 又问: 等号何时成立? 证明:  由  $$\bex  \sum_i \sez{\su ...

  5. 运维工作笔记-------nginx的反向代理

    1.nginx的反向代理意义 一般来说,我们在项目中,不会直接让项目服务器ip与外网做直接映射,这样一则是不安全,二是客户直接去访问项目服务器,对项目服务器带来的压力太大,从而导致项目运行速度变慢,程 ...

  6. 使用系统用户登录Oracle

    如果数据库安装不在本机上,@后面加的是服务名或IP地址 如果是sys用户的话,它具有管理员的权限,要使用sysdba或sysoper权限来登录oracle工具.

  7. MS SQL Server NULL处理

    -- 首先在用户表中插入数据如下 TRUNCATE TABLE UserInfo ; INSERT INTO userinfo(UserName,UserLogin,UserPassword,User ...

  8. 【原创】运维基础之Nginx（1）简介、安装、使用

    官方:http://nginx.org nginx [engine x] is an HTTP and reverse proxy server, a mail proxy server, and a ...

  9. HDU 2196 Compute --树形dp

    Computer Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Su ...

  10. fs.inotify.max_user_watches默认值太小，导致too many open files

    运行环境:centos7.5 linux 打开文件数 too many open files 解决方法fs.inotify.max_user_watches默认值太小,导致too many open ...