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

            }

            #wrap > .inner{

                text-align: center;

                position: absolute;

                left: 50%;

                top: 50%;

                transform: translate3d(-50%,-50%,0);

                /*设置不回车*/

                white-space: nowrap;

            }

            #wrap > .inner > span{

                /*如果是absolute就会提升一层，都会重叠在一块了因为变成了浮动元素*/

                position:relative;

            }

            @keyframes move{

                from{top: 0;}

                to{top: -10px;}

            }

        </style>

    </head>

    <body>

        <div id="wrap">

            <div class="inner">

                <span>中</span>

                <span>华</span>

                <span>人</span>

                <span>民</span>

                <span>共</span>

                <span>和</span>

                <span>国</span>

                <span>共</span>

                <span>产</span>

                <span>党</span>

                <span>万</span>

                <span>岁</span>

            </div>

        </div>

    </body>

    <script src="../2D变换/js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript">

        $(function(){

            var colors = ["red","orange","yellow","green","blue","pink","red","orange","yellow","green","blue","pink"]

            $span = $("#wrap > .inner > span");

            $span.each(function(i){

                $(this).css("animation","move .3s "+(i*50)+"ms infinite alternate")

                $(this).css("color",colors[i])

            })

        })

    </script>

</html>

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

  1. Android开机动画

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

  2. 时光煮雨 Unity3D实现2D人物动画② Unity2D 动画系统&资源效率

    系列目录 [Unity3D基础]让物体动起来①--基于UGUI的鼠标点击移动 [Unity3D基础]让物体动起来②--UGUI鼠标点击逐帧移动 时光煮雨 Unity3D让物体动起来③—UGUI DoT ...

  3. 时光煮雨 Unity3D实现2D人物动画① UGUI&Native2D序列帧动画

    系列目录 [Unity3D基础]让物体动起来①--基于UGUI的鼠标点击移动 [Unity3D基础]让物体动起来②--UGUI鼠标点击逐帧移动 时光煮雨 Unity3D让物体动起来③—UGUI DoT ...

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

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

  5. 理论制作 Windows 开机动画

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

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

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

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

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

  8. Spine（2D骨骼动画）

    点击进入Spine官网 Spine 是一款针对游戏的 2D 骨骼动画编辑工具. Spine 旨在提供更高效和简洁 的工作流程,以创建游戏所需的动画. 功能: 1.摄影表 Dopesheet 在动画制作 ...

  9. Android 开机动画源码分析

    Android系统在启动SystemServer进程时,通过两个阶段来启动系统所有服务,在第一阶段启动本地服务,如SurfaceFlinger,SensorService等,在第二阶段则启动一系列的J ...

随机推荐

  1. openfalcon agent 监控数据

    [root@nginx1 ~]# cat /proc/sys/fs/file-nr 791435 已分配文件句柄的数目  已使用文件句柄的数目  文件句柄的最大数目  [root@nginx1 ~]# ...

  2. Linux设置口令复杂度和口令定期更换策略

    Linux 密码复杂度设置pam_pwquality.pam_passwdqc(centos7) 1.Linux对应的密码策略模块有:pam_passwdqc 和 pam_pwquality . 其中 ...

  3. UML类图简单学习 各种对象、关系UML表示法

    <大话设计模式>上面的UML类图: 类的UML表示 动物 的矩形框 表示是一个类. 类图分为三层,第一层显示类的名称,如果是抽象类,则用斜体表示:第二层是类的特性,通常就是类的字段和属性: ...

  4. $\rm{NOIp}$板子整理

    怎么说呢,整理这个的目的就是为了有个简约的\(list\),方便以后查阅,复习起来不至于太吃力. 并且--好像重温一遍所有,会更有一些新的认识.这也算是对我所学的一点整理了吧. 一.并查集的两种方式 ...

  5. Advanced Electronic Engineer

    Job Title Advanced Electronic Engineer Job Description In this role, you have the opportunity to Be ...

  6. ORACLE官网下载登陆账号能够使用

    username: responsecool@sina.com password: abc123ABC http://www.oracle.com/index.html

  7. Python3入门（十一）——IO编程

    一.文件读写 python的文件操作和C是兼容的 1.读文本文件 读文件操作如下: f = open("F:/1.txt", "r") data = f.rea ...

  8. Android应用安全之第三方SDK安全

    第三方sdk的包括广告.支付.统计.社交.推送,地图等类别,是广告商.支付公司.社交.推送平台,地图服务商等第三方服务公司为了便于应用开发人员使用其提供的服务而开发的工具包,封装了一些复杂的逻辑实现以 ...

  9. 《网络对抗》Exp7 网络欺诈防范

    20155336<网络对抗>Exp7 网络欺诈防范 实验内容 本实践的目标理解常用网络欺诈背后的原理,以提高防范意识,并提出具体防范方法.具体实践有 简单应用SET工具建立冒名网站 (1分 ...

  10. 20155339 Exp3 免杀原理与实践

    20155339 Exp3 免杀原理与实践 基础问题 (1)杀软是如何检测出恶意代码的? 基于特征码的检测(杀软的特征库中包含了一些数据或者数据段,杀软会尽可能的更新这个特征库,以包括尽可能多的恶意代 ...