<!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. [USACO2004OPEN]Cave Cows 3

    嘟嘟嘟 看完题后突然想起jf巨佬的话:"看到曼哈顿距离就想转切比雪夫距离." 于是我就转换了一下. 然后问题变成了求 \[max_{i, j \in n} \{ max \{ |x ...

  2. 随手练——HDU 1078 FatMouse and Cheese（记忆化搜索）

    http://acm.hdu.edu.cn/showproblem.php?pid=1078 题意: 一张n*n的格子表格,每个格子里有个数,每次能够水平或竖直走k个格子,允许上下左右走,每次走的格子 ...

  3. css里颜色的那些事儿(合法颜色值)

    css中主要有六种方法指定颜色: 1.十六进制颜色 2.RGB颜色 3.RGBA颜色 4.HSL色彩 5.HSLA颜色 6.预定义/跨浏览器的颜色名称 前三种是我们最常见的,也是用的最多的,而后三种对 ...

  4. ICC 常用命令

    1. 列出当前design 用到的 db 库: list_libs 2. 列出当前design 用到的 reference 库: report_mw_lib   -mw_referenc_librar ...

  5. JS省市区联动

    JS省市区使用文档 一:服务器返回JSON格式要求如下网址里面data的格式:(拿KISSY组件data格式来做的) http://gallery.kissyui.com/cityselector/d ...

  6. 自己设计一个日期类,可以输入年月日作为构造时的参数,如果不使用参数,则设定为1900年1月1日;编写一个方法equals判断两个日期是否相等;另一个方法compareTo可以进行日期之间的比较,返回两个日期之间相差的天数.

    import java.util.*; import java.lang.Math; class Date1{ private int year; private int month; private ...

  7. CAN2.0A 和CAN2.0B

    CAN2.0A 和CAN2.0B 原创 2015年08月03日 16:03:08 3969 CAN2.0A 是CAN协议的PART A部分,此部分定义了11bit的标识区 .CAN2.0B 是CAN协 ...

  8. [Jsoi2016]最佳团体 BZOJ4753 01分数规划+树形背包/dfs序

    分析: 化简一下我们可以发现,suma*ans=sumb,那么我们考虑二分ans,之后做树形背包上做剪枝. 时间复杂度证明,By GXZlegend O(nklogans) 附上代码: #includ ...

  9. vi学习

    刚开始学习vi,所以,一步一步开始 先贴出一个相关的学习链接https://www.cnblogs.com/ranjiewen/p/5901181.html 这个学习链接里面的东西还是比较详细的,但是 ...

  10. Linux服务-openssh

    目录 1. 使用 SSH 访问远程命令行 1.1 OpenSSH 简介 1.2 SSH 版本 1.3 SSH 认证方式 1.4 openSSH 的工作模式 1.5 Secure Shell 示例 1. ...