在项目中，颜色，图片，等等数据都保存在数组中

 

动画

使元素从一种样式逐渐变化到另一种样式的

animation: name ;

无顺序要求，但是必须先写 持续时间 ，再写 延迟时间

  • 原理

人眼在看到画面的0.34 秒内，画面不会消失

在一幅画面还没消失之前，播放下一张画面

  • 关键帧 @keyframes
  •            /* 动画的名称 */
    @keyframes animationname {
    
    keyframes-selector {    /* （关键帧的选择器，动画持续时间的百分比，参照花费的总时间） 或者 （from 代表 0%，to 代表 100%%） */
    
        /* cssStyles; */
    
    }
    
}

/**** 实例 ****/
    #box {
        width: 200px;
        height: 200px;
        background-color: olive;

    animation-name: yidong;    /* 1. 动画的名称 */

    animation-duration: 10s;    /* 2. 动画持续时间 */

    animation-delay: 3s;    /* 4. 动画执行前等待的时间 */

    animation-fill-mode: both;    /* 8. 设置动画外的状态 ，① 动画执行前的状态 backwards
                                                            ② 动画执行完以后的 to 状态 forwards
                                                            ③ 元素开始时与 from 状态一致，结束与 to 状态一致 both */

    /* 检测的是关键帧的区间（0%-50%，50%-100%） */
        animation-timing-function: linear;    /* 3. 设置动画的类型
                                                    （默认值 ease， 
                                                      还有 linear，
                                                          贝塞尔曲线cubic-bezier(0.07, 1.4, 0.86, 1.47)，
                                                              1个区间跳2次 steps(2)） */
        animation-iteration-count: 2;    /* 5. 动画执行次数，无限次 infinite 或者 具体次数 */

    animation-direction: alternate;    /* 6. 设置对象动画运动方向，默认值正常 normal，
                                                                 相反方向，从结束向开始动画 reverse，
                                                                 先正常运动，再反向运动____钟摆动画 alternate 需配合 infinite，
                                                                 先反向运动，再正常运动 alternate-reverse 需配合 infinite*/
        animation-play-state: running;    /* 7. 设置对象状态： 运行 running / 暂停 paused */
    }

#box {
        animation-play-state: paused;    /* 当鼠标悬浮时，动画暂停 */
    }

@keyframes yidong {
        0% { transform: translateX(0px); }    /* 等同于 from {} */

    50% { transform: translateX(20px); }

    100% { transform: translateX(20px); }    /* 等同于 to {} */
    }

用来控制动画变化的关键位置（而非所有位置）

  • 编写位置
  • 帧函数 编写在 控制元素样式的 外面
  • animation 的属性 编写在 控制元素样式里面
    • animation-name: yidong;                  /* 1. 动画的名称 */
    • animation-duration: 10s;                   /* 2. 动画持续时间 */
    • animation-timing-function: linear;    /* 3. 设置动画的类型
            • ease    默认值
            • linear
            • cubic-bezier(0.07, 1.4, 0.86, 1.47)    贝塞尔曲线
            • steps(2)    1个区间跳2次
    • animation-delay: 3s;                          /* 4. 动画执行前等待的时间 */
    • animation-iteration-count: 2;            /* 5. 动画执行次数
            • infinite    无限次
            • 具体次数 */
    • animation-direction: alternate;         /* 6. 设置对象动画运动方向
          • normal    默认值正常
          • reverse    相反方向，从结束向开始动画
          • alternate    先正常运动，再反向运动____钟摆动画  需配合 infinite
          • alternate-reverse    先反向运动，再正常运动  需配合 infinite
    • animation-play-state: running;         /* 7. 设置对象状态
          • running    运行
          • paused    暂停
    • animation-fill-mode: both;                 /* 8. 设置动画外的状态
          • backwards    动画执行前的状态
          • forwards    动画执行完以后的 to 状态
          • both    元素开始时与 from 状态一致，结束与 to 状态一致
  • 动画执行完以后，立刻恢复原来状态。

兔斯基动画    （精灵图 steps infinite）

  • <!DOCTYPE html>
    
<html>
    
    <head>
    
        <meta charset="UTF-8" />
    
        <title>Crazy Rabbit</title>

        <style type="text/css">
    
            body {
    
                width: 100%;
    
                color: #000;
    
                background: #96b377;
    
                font: 14px Helvetica, Arial, sans-serif;
    
                padding-top: 300px;
    
                padding-left: 300px;
    
            }

            /**** rabbit ****/
    
            #running_box {
    
                width: 48px;
    
                height: 48px;
    
                background: url("./img/rabbit.png") no-repeat;
    
                background-position: 0px 0px;

                animation: crazyRabbit 340ms steps(12) 0s infinite alternate;
    
            }
    
            @keyframes crazyRabbit {
    
                from {
    
                    background-position-x: 0px;
    
                }
    
                to {
    
                    background-position-x: -576px;
    
                }
    
            }
    
            #running_box:hover {
    
                animation: paused;
    
            }
    
        </style>
    
    </head>

    <body>

        <div id="running_box"> 

        </div>

    </body>
    
</html>

自行车动画

  • <!DOCTYPE html>
    
<html>
    
    <head>
    
        <meta charset="UTF-8" />
    
        <title>Running Bike</title>

        <style type="text/css">
    
            body {
    
                width: 100%;
    
                color: #000;
    
                background: #96b377;
    
                font: 14px Helvetica, Arial, sans-serif;
    
                padding: 300px 0 0 300px;
    
            }

            /**** Running Bike  ****/
    
            #bike_box {
    
                width: 130px;
    
                height: 130px;
    
                background: url("./img/bike.png") no-repeat;

                animation: bike 1s steps(32) infinite;
    
            }
    
            @keyframes bike {
    
                from {background-position: 0px 0px}
    
                to {background-position: 0px -4160px}
    
            }
    
            #bike_box:hover {
    
                animation: paused;
    
            }
    
        </style>
    
    </head>

    <body>

        <div id="bike_box"> 

        </div>

    </body>
    
</html>

开机动画 

  • <!DOCTYPE html>
    
<html>
    
    <head>
    
        <meta charset="UTF-8"/>
    
        <title></title>

        <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    
        <meta name="viewport"
    
              content="user-scalable=no,
    
                       width=device-width,
    
                       initial-scale=1.0,
    
                       minimum-scale=1.0,
    
                       maximum-scale=1.0"/>

        <script type="text/javascript" src="./js/kjfFunctions.js"></script>

        <style rel="stylesheet" type="text/css">
    
            html, body, div, ul, li {
    
                margin: 0;
    
                padding: 0;
    
            }

            html, body {
    
                width: 100%;
    
                height: 100%;    /* 参照屏幕区域的高 */
    
                min-width: 600px;
    
                overflow: hidden;
    
            }

            #wrap {
    
                width: 100%;
    
                min-height: 100%;

                background: cadetblue;
    
            }

            #content {
    
                width: 100%;

                padding-bottom: 50px;

                font-size: 14px;
    
                background: darkgrey;
    
            }

            #footer {
    
                width: 100%;
    
                height: 50px;

                margin-top: -50px;

                background: chocolate;
    
                text-align: center;
    
                line-height: 50px;
    
            }

            #loading_animation {
    
                position: absolute;
    
                top: 50%;
    
                left: 50%;
    
                transform: translate(-50%, -50%);

                list-style: none;
    
                background-color: #bbb0;
    
            }

            #loading_animation li {
    
                float: left;

                margin-right: 10px;
    
                animation: jumpLetter 1s infinite alternate;
    
            }
    
            @keyframes jumpLetter {
    
                from {
    
                    transform: translateY(0px);
    
                }

                to {
    
                    transform: translateY(-15px);
    
                }
    
            }
    
        </style>
    
    </head>

    <body>

        <!-- 模拟屏幕区域 -->
    
        <div id="wrap">

            <!-- 内容区域 -->
    
            <div id="content">
    
                <ul id="loading_animation">
    
                    <li>L</li>
    
                    <li>o</li>
    
                    <li>a</li>
    
                    <li>d</li>
    
                    <li>i</li>
    
                    <li>n</li>
    
                    <li>g</li>
    
                </ul>
    
            </div>
    
        </div>

        <!-- 底部区域 -->
    
        <div id="footer">

        </div>

        <script type="text/javascript" src="./js/index.js"></script>
    
        <script type="text/javascript">
    
            var lis = document.querySelectorAll("#loading_animation li");

            var colorArr = ["red", "green", "blue"];
    
            var i = 0;
    
            for(i=0; i<lis.length; i++){
    
                lis[i].style.color = colorArr[i%3];

                lis[i].style.animationDelay = i*100+"ms";
    
            }
    
        </script>
    
    </body>
    
</html>

CSS3_动画 animation的更多相关文章

  1. 动画animation的三个应用(漂浮的白云、旋转的星球、正方体合成)

    × 目录 [1]漂浮的白云 [2]旋转的星球 [3]正方体合成 前面的话 前面介绍过动画animation的详细用法,本文主要介绍动画animation的三个效果 漂浮的白云 [效果演示] [简要介绍 ...

  2. CSS3的变形transform、过渡transition、动画animation学习

    学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.- ...

  3. 精灵动画Animation对话框组成Idle动画的各精灵

    精灵动画Animation对话框组成Idle动画的各精灵 1.3  精灵动画 场景中已经添加了精灵,现在是时候让让它动起来了.读者也许已经从精灵图集中,各精灵的命名中看出来了,这个精灵一共有两种动画状 ...

  4. Qt-4.6动画Animation快速入门三字决

    Qt-4.6动画Animation快速入门三字决 Qt-4.6新增了Animation Framework(动画框架),让我们能够方便的写一些生动的程序.不必像以前的版本一样,所有的控件都枯燥的呆在伟 ...

  5. css3 动画(animation)-简单入门

    css3之动画(animation) css3中我们可以使用动画,由于取代以前的gif图片,flash动画,以及部分javascript代码(相信有很多同学都用过jquery中的animate方法来做 ...

  6. Android 动画animation 深入分析

    转载请注明出处:http://blog.csdn.net/farmer_cc/article/details/18259117 Android 动画animation 深入分析 前言:本文试图通过分析 ...

  7. View 动画 Animation 运行原理解析

    这次想来梳理一下 View 动画也就是补间动画(ScaleAnimation, AlphaAnimation, TranslationAnimation...)这些动画运行的流程解析.内容并不会去分析 ...

  8. CSS3动画属性：动画(animation)

    一:动画(animation)的参数详解 由于上面用到了animation动画,这里详细介绍下这个animation的参数. 简介 CSS动画(Animations)简单说就是在一段固定的动画时间内暗 ...

  9. 《The Cg Tutorial》阅读笔记——动画 Animation

    这段时间阅读了英文版的NVidia官方的<The Cg Tutorial>,借此来学习基本的图形学知识和着色器编程. 在此做一个阅读笔记. 本文为大便一箩筐的原创内容,转载请注明出处,谢谢 ...

随机推荐

  1. LFYZ-OJ ID: 1019 位数问题

    位数问题 问题描述 在所有的N位数中,有多少个数中有偶数个数字3?由于结果可能很大,你只需要输出这个答案对12345取余的值. INPUT 输入一个数N(1<=N<=1000),输入以0结 ...

  2. [再寄小读者之数学篇](2014-06-26 Logarithmical Sobolev inequality using BMO space)

    $$\bex q>3\ra \sen{\n f}_{L^\infty} \leq C(q)\sez{ 1+\sen{\n f}_{BMO} \ln^\frac{1}{2}\sex{e+\sen{ ...

  3. Jasmine

    Jasmine https://www.npmjs.com/package/jasmine The Jasmine Module The jasmine module is a package of ...

  4. TCP-IP详解学习笔记2

    TCP-IP详解学习笔记2 链路层 链路层的目的是为IP模块发送和接收IP数据报: TCP/IP支持多种不同的链路层,依赖于使用网络硬件类型:有线局域网(以太网,城域网(MAN),有线语音网络).无线 ...

  5. centos 搭建 leanote

    centos 搭建leanote(蚂蚁笔记) 至于蚂蚁笔记是什么可以看官网的介绍,https://leanote.com/  ,我只能说 nice,你值得拥有. 开始搭建(源码安装,安装路径在 /et ...

  6. ROS-十步完成ROS-indigo安装

    Ubuntu 版本是14.04.5.(这个版本的ubuntu的内核是V4.4的内核,长期维护到2019年,是14代比较稳定的,反正用这个安装就没有什么依赖的头疼的问题,安装ROS很方便,可以去清华的网 ...

  7. LabVIEW--使用云端编译器编译多个vi

    使用ni 云服务器编译vi 详细请看链接: https://users.niwsc.com/compilecloud/#/ http://www.ni.com/white-paper/52328/en ...

  8. 51nod--1079 中国剩余定理

    题目: 1079 中国剩余定理 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 收藏 关注 一个正整数K,给出K Mod 一些质数的结果,求符合条件的最小的K.例如,K ...

  9. Python-Django-Ajax进阶3

    1 中间件 -是什么? 中间件顾名思义,是介于request与response处理之间的一道处理过程,相对比较轻量级,并且在全局上改变django的输入与输出.因为改变的是全局,所以需要谨慎实用,用不 ...

  10. __name__的意义与作用

    首先定义了一个test.py的文件,然后再定义一个函数,并在函数定义后直接运行: test.py def HaveFun():  if __name__ == '__main__':  print(' ...