<!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. [POI2011]Meteors

    嘟嘟嘟 做了几道题之后,对整体二分有点感觉了. 整体二分的本质就是二分答案.所以这道题二分的就是次数. 然后就是套路了,把小于\(mid\)的操作都添加减去,然后查询,如果查询的值\(x\)比给定值大 ...

  2. java中Integer与int装箱拆箱一点收获

    示例代码: class BoxIntInteger { public static void main(String[] args) { Integer a = new Integer(10111); ...

  3. Scala学习之路 （四）Scala的数组、映射、元组、集合

    一.数组 1.定长数组和变长数组 import scala.collection.mutable.ArrayBuffer object TestScala { def main(args: Array ...

  4. 通过HttpClient调用服务

    /** * 通过HttpClient调用服务 * * @param url 路径 * data json数据 * @return */ //post请求方法public String sendItsm ...

  5. Shell学习心得（二）：传递参数、运算符

    1.传递参数 可以在执行 Shell 脚本时,向脚本传递参数,脚本内获取参数的格式为:$n.n 代表一个数字,1 为执行脚本的第一个参数,2 为执行脚本的第二个参数,以此类推…… 向脚本传递三个参数, ...

  6. [c.c.a.m.AgentManagerImpl] (AgentConnectTaskPool-39:ctx-c37090c5) Failed to handle host connection: java.lang.IllegalArgumentException: Can't add host: with h

    如果无法添加成功,/etc/redhat-release文件覆盖过去 cat /etc/redhat-release CentOS Linux release 7.1.1503 (Core)Red H ...

  7. python：'ascii' codec can't encode character

    python默认的编码是ascii,当程序中出现非ascii编码时,python的处理常常会报这样的错,python没办法处理非ascii编码的, 此时需要自己设置python的默认编码,一般设置为u ...

  8. 虚拟机-Debian服务器配置

    目的:用虚拟机中的Debian 8 操作系统作为web服务器 一.安装操作系统 首先要在vmware中安装一个debian操作系统,由于要让在局域网中的其他计算机能访问到此虚拟操作系统,因此在vmwa ...

  9. odoo返写数据

    #确认按钮 反写回合同页面,当前页面反写数据: def action_split_order_ht(self,cr,uid,ids,context=None): assert len(ids)==1 ...

  10. 林帆：Docker运行GUI软件的方法

    继上周的“Kubernetes v1.0特性解析”分享之后,本周我们邀请到ThoughtWorks咨询师林帆为大家带来主题为“Docker运行GUI软件的方法”的分享. 嘉宾简介:林帆,Thought ...