<!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. java字节码的工具(含IDEA插件)

    转:https://blog.csdn.net/qq_34039315/article/details/78561493 javap方式 最基础的方式,此处不做介绍 windows下的工具jclass ...

  2. 漫画：高并发下的HashMap

    这一期我们来讲解高并发环境下,HashMap可能出现的致命问题. HashMap的容量是有限的.当经过多次元素插入,使得HashMap达到一定饱和度时,Key映射位置发生冲突的几率会逐渐提高. 这时候 ...

  3. Docker实战(二)之操作Docker容器

    容器是Docker的另外一个核心概念.简单来说,容器是镜像的一个运行实例.所不同的是,镜像是静态的只读文件,而容器带有运行时需要的可写文件层.如果认为虚拟机是模拟运行的一整套操作系统系统(包括内核,应 ...

  4. java读写properties配置文件方法

    1.Properties类 Properties类表示了一个持久的属性集.Properties可保存在流中或从流中加载,属性列表中的key和value必须是字符串. 虽然Properties类继承了j ...

  5. lua-resty-gearman模块

    粘贴一段百度对gearman的解释: Gearman是一个用来把工作委派给其他机器.分布式的调用更适合做某项工作的机器.并发的做某项工作在多个调用间做负载均衡.或用来在调用其它语言的函数的系统. lu ...

  6. 理解JavaScript中的作用域链

    理解了作用域链,闭包就不难理解了,所以本文主要谈一谈我对作用域链的理解.   关于JavaScript中变量的作用域,全局变量在程序中始终都有定义.局部变量在声明它的函数体内以及其内部所嵌套的函数内始 ...

  7. eclipse 格式化快捷键（Ctrl+shift+f）不起作用的解决办法

    eclipse格式化快界面Ctrl+Shift+f不起作用一般是键位冲突所导致的,一般是搜狗输入法的“繁体与简体”中文切换快界面冲突. 把它禁用掉就可以了. 下面是禁用步骤: 点击sougou输入法右 ...

  8. java中extends和implements的区别

    implements:接口 1.实现一个接口就是要实现该接口中的所有方法(抽象类除外) 2)接口中的方法都是抽象的 多个无关的类可以实现同一个接口,一个类可以实现多个无关的接口 extends:继承父 ...

  9. Mike的农场 BZOJ4177

    分析: 最小割,不选则割的建模题...(然而一开始我当成了费用流,简直丧心病狂...最后想到了最小割...) 对于条件一,直接建一条双向边就可以了,并且不计入sum中,因为这是作为费用的存在,让它跑出 ...

  10. springboot mybatis 后台框架平台 集成代码生成器 shiro 权限

    1.代码生成器: [正反双向](单表.主表.明细表.树形表,快速开发利器)freemaker模版技术 ,0个代码不用写,生成完整的一个模块,带页面.建表sql脚本.处理类.service等完整模块2. ...