移动端的 开机动画

  • <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. Docker下安装rabbitmq

    拉取镜像 docker pull rabbitmq:-management 启动镜像(默认用户名密码),默认guest 用户,密码也是 guest docker run -d --: -p : rab ...

  2. 应用留数定理计算实积分 $\dps{I(x)=\int_{-1}^1\frac{\rd t}{\sqrt{1-t^2}(t-x)}\ (|x|>1,x\in\bbR)}$ [华中师范大学2010年复变函数复试试题]

    应用留数定理计算实积分 $\dps{I(x)=\int_{-1}^1\frac{\rd t}{\sqrt{1-t^2}(t-x)}\ (|x|>1,x\in\bbR)}$ [华中师范大学2010 ...

  3. UIWebView代码注入时机与姿势

    一个奇怪的业务场景,引发的胡乱思考 问题其实不难解决,只是顺着这个问题,发散出了一些有意思的东西 本文旨在讨论UIWebView,WKWebView有自己的机制,不用这么费劲 我们的业务最大的最重要的 ...

  4. 四十四、Linux 线程——线程同步之死锁以及线程和信号

    44.1 死锁 死锁: 两个线程试图同时占有两个资源,并按不同的次序锁定相应的共享资源 解决方式: 按相同的次序锁定相应的共享资源 使用函数 pthread_mutex_trylock(),它是函数 ...

  5. NBIOT经典回答【转】

    转自:https://blog.csdn.net/pan0755/article/details/70145936 该部分分享的是物联网各垂直应用领域里,NB-IoT技术的部署,看看适合NB-IoT技 ...

  6. JdbcTemplate中queryForObject方法返回空结果或不正确结果数量的解决方法

    在使用Spirng提供的JdbcTemplate中名为queryForObject API进行数据库查询时有时会抛出如下异常: org.springframework.dao.EmptyResultD ...

  7. 题解 P5065 【[Ynoi2014]不归之人与望眼欲穿的人们】

    出现了一篇跑得炒鸡慢的题解! noteskey 无 fuck 说,好像就是整个数列分块然后合并区间...什么的吧 对于每块内部就是算一下前缀信息.后缀信息(就是以 第一个点/最后一个点 为一个边界,不 ...

  8. jenkins结合gitlab实现提交代码自动构建

    jenkins可以说是现在非常流行的一个继续集成工具,几乎所有的公司都在用,并且它也基本是devops的连接者,是一个比较核心的工具. 主要记录以下两个: 利用jenkins和gitlab的webho ...

  9. echarts tree 树型图层级距离设置

    网上找了半天,没有找到设置层级距离的属性,默认是自动适应的,无奈只能改源码,分享出来希望可以帮到有相同需求的... 上github下载echarts源码包,打开src=>chart=>tr ...

  10. linuxDNS

    getenforce   查询状态 setenforce 0  临时关闭 永久关闭vim /etc/selinux/configlinux配置文件内容SELINUC=disabled关闭重启系统生效 ...