<!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. Spring Boot 扩展点应用之工厂加载机制

    Spring 工厂加载机制,即 Spring Factories Loader,核心逻辑是使用 SpringFactoriesLoader 加载由用户实现的类,并配置在约定好的META-INF/spr ...

  2. 1207. [HNOI2004]打鼹鼠【线性DP】

    Description 鼹鼠是一种很喜欢挖洞的动物,但每过一定的时间,它还是喜欢把头探出到地面上来透透气的.根据这个特点阿Q编写了一个打鼹鼠的游戏:在一个n*n的网格中,在某些时刻鼹鼠会在某一个网格探 ...

  3. Java学习笔记--Java开发坏境搭建

    一.安装JDK http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 根据自己系统选择 ...

  4. ip、ifconfig命令与IP（转）

    Q:问题的要求就是在linux下不重新情况下,如何临时增加一个IP及临时删除一个IP ? A:该问题除了可以通过ifconfig命令完成外,也可以通过ip命令完成,不过两者是有区别的.ifconfig ...

  5. day07--字符编码、文件处理

    今日内容: 字符编码 文件处理 字符编码: 把字符编码成二进制 各个国家拥有各自的字符编码,这样会导致交流产生问题.所以后面推出了内存使用unicode,硬盘使用UTF-8这个模式 unicode有两 ...

  6. Found more than one concrete type for given DbContext Type (xxx.xxxx.xxx) define MultiTenancySideAttribute with Tenant

    错误提示: Found more than one concrete type for given DbContext Type (Abp.Zero.EntityFramework.AbpZeroCo ...

  7. linux系统分析工具续-SystemTap和火焰图（Flame Graph）

    本文为网上各位大神文章的综合简单实践篇,参考文章较多,有些总结性东西,自认暂无法详细写出,建议读文中列出的参考文档,相信会受益颇多.下面开始吧(本文出自 “cclo的博客” 博客,请务必保留此出处ht ...

  8. THUSC 2017 D1T2 杜老师

    这是个非常有趣的数学题啦... 其实大概推一推式子就能得到一个信息,就是答案一定是$2$的整数次幂,并且其实答案就是$2^{R-L+1-sum}$,其中$sum$表示有多少个数不能用$L-i-1$的数 ...

  9. AndroidStudio怎样导入library项目开源库 - 转

    https://jingyan.baidu.com/article/1974b2898917aff4b1f77415.html

  10. Python实现随机读取文本N行数据

    工作中需要判断某个文本中的URL是否能正常访问,并且随机获取其中N行能正常访问的URL数据,我的思路是:读取文本每一行数据,用urlopen访问,将返回状态码为200的URL保存到一个列表,获得列表长 ...