zoukankan      html  css  js  c++  java
  • 深入理解CSS3 animation的steps

    在应用 CSS3 渐变/动画时,有个控制时间的属性 <timing-function> 。它的取值中除了常用到的 三次贝塞尔曲线 以外,还有个让人比较困惑的 steps() 函数。

    steps() 第一个参数 number 为指定的间隔数(必须是正整数),即把动画分为 n 步阶段性展示,第二个参数默认为 end,设置最后一步的状态,start 为结束时的状态,end 为开始时的状态。

    那么有了这个steps(),我们就可以实现web中常见的Sprite 精灵动画了,见demo:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <title>spirit动画</title>
            <link rel="stylesheet" href="">
            <style>
            .bird{background: url(http://www.china-pub.com/static/alltype_zt/060710flash_1/market_1_9.jpg);width: 140px;height:85px;animation: bird 0.8s steps(4) infinite;  }
            @keyframes bird{
                from {
                background-position: 0 0;
                }
                to {
                background-position: -400% 0px;
                }
            }
            </style>
        </head>
        <body>
            <div class="bird"></div>
        </body>
    </html>

    其原理是:使用一张含有多帧静态画面的图片,通过切换 background-position 使其变为连续的动画。上面例子中steps(4),表示让整个动画在4个关键帧之间切换。这个飞翔的鸟的图片中包含了4帧,所以这里设置了4;

  • 相关阅读:
    最长回文子序列---DP
    最长回文子串(暴力破解)
    两数相加
    多数元素
    MPI集群搭建
    字符串截取子串(Java substring , indexOf)
    JDK和环境配置,eclipse安装与使用
    ubantu上面 NFS服务器安装
    Django中间件的应用
    Django的url路由系统简介
  • 原文地址:https://www.cnblogs.com/jone-chen/p/5306351.html
Copyright © 2011-2022 走看看