• 工信部:17年12批新能源车推荐车型目录 2019-05-11
  • 美国再挑贸易战,中方强力回击,全球市场跌声一片 2019-05-11
  • 四川都江堰再现野生大熊猫踪迹 比3月拍到的更肥 2019-05-10
  • 坚持和发展马克思主义的宣言书 2019-05-10
  • 解析视频播控平台黑产链 20元看12家网站VIP会员视频 2019-04-26
  • 众星云集 “欧洲红魔”能否用战绩兑现黄金一代的天赋 2019-04-26
  • 比如最高检的12309检查服务中心,原来还有显示信访处理进程,不过没有几天就取消了。[上火][上火] 也就是说办与不办也没有人知道,下边省事了,上边也就轻松了。 2019-04-16
  • 男女差别有多大?河北省首次公开发布分性别统计分析报告 2019-04-05
  • 菲律宾媒体和网民热议"中国剧场"开播 2019-04-05
  • 坚持和完善我国基本经济制度的两条新经验 2019-04-02
  • 5月份61城房价环比反弹 多地调控政策或再加码 ——凤凰网房产济南 2019-04-02
  • [洞见]草榴死了 欲望还活着草榴性 2019-04-02
  • 回顾:五年来习近平的“两会金句” 2019-04-02
  • 云南省2018年度国家社科基金项目申报工作的几点做法 2019-04-01
  • 地理君的专栏作者中国国家地理网 2019-04-01

    2o选5河北今日开奖结果:CSS3 animation逐帧动画

    燕赵风采20选5走势图 www.fllv.net 2018-11-22 14:51| 作者: admin| 查看: 1311| 评论: 0|来自: 蚂蚁部落

    关于animation属性的基本用法可以参阅CSS3 animation一章节。

    使用animation实现逐帧动画:

    熟悉了animation的属性之后,得找个简单的小项目实现下。

    思路很简单,就是给元素一个雪碧图的背景,然后添加的帧动画更改background-position。

    关键代码如下:

    [CSS] 纯文本查看 复制代码
    @keyframes run{
      from{
        background-position: 0 0;
      }
      to{
        background-position: -1540px 0 ;
      }
    }
    div{
      width:140px;
      height:140px;
      background: url(run.png) ;
      animation-name:run;
      animation-duration:1s;
      animation-iteration-count:infinite;
    }

    a:3:{s:3:\"pic\";s:43:\"portal/201811/22/145435gd6kj6l8ce8ccb4n.gif\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

    但是跑起来后我们发现,每帧动画之间帧动画都是滑动,并不是我们要的效果,为什么呢?

    原来animation默认以ease方式过渡,它会在每个关键帧之间插入补间动画,所以动画效果是连贯性的

    知道原因就好办了,解决思路就是:

    [CSS] 纯文本查看 复制代码
    @keyframes run{
      0%, 8%{  /*动作一*/  }
      9.2%, 17.2%{  /*动作二*/  }
        ...
    }

    step1:动作之间停留8帧,0%设置动作一,动作一结束在8%

    step2:动作之间过渡1.2帧,9.2%设置动作二,动作二结束在17.2%

    完整代码:

    [HTML] 纯文本查看 复制代码运行代码
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="author" content="//www.fllv.net/" />
    <title>蚂蚁部落</title>
    <style>
    @keyframes run{
      0%, 8%{  background-position: 0 0;  }
      9.2%, 17.2%{  background-position: -140px 0;  }
      18.4%, 26.4%{  background-position: -280px 0 ;  }
      27.6%, 35.6%{  background-position: -420px 0 ;  }
      36.8%, 44.8%{  background-position: -560px 0 ;  }
      46%, 54%{  background-position: -700px 0 ;  }
      55.2%, 63.2%{  background-position: -840px 0 ;  }
      64.4%, 72.4%{  background-position: -980px 0 ;  }
      73.6%, 81.6%{  background-position: -1120px 0 ;  }
      82.8%, 90.8%{  background-position: -1400px 0 ;  }
      92%, 100%{  background-position: -1540px 0 ;  }
    }
    @-webkit-keyframes run{
      0%, 8%{  background-position: 0 0;  }
      9.2%, 17.2%{  background-position: -140px 0;  }
      18.4%, 26.4%{  background-position: -280px 0 ;  }
      27.6%, 35.6%{  background-position: -420px 0 ;  }
      36.8%, 44.8%{  background-position: -560px 0 ;  }
      46%, 54%{  background-position: -700px 0 ;  }
      55.2%, 63.2%{  background-position: -840px 0 ;  }
      64.4%, 72.4%{  background-position: -980px 0 ;  }
      73.6%, 81.6%{  background-position: -1120px 0 ;  }
      82.8%, 90.8%{  background-position: -1400px 0 ;  }
      92%, 100%{  background-position: -1540px 0 ;  }
    }
    div{
      width:140px;
      height:140px;
      background: url(demo/CSS/img/run.png) ;
      animation:run 1s infinite;
      -webkit-animation:run 1s infinite;
      animation-fill-mode : backwards;
      -webkit-animation-fill-mode : backwards;
    }
    </style>
    </head>
    <body>
    <div></div>
    </body>
    </html>

    还有另外一个实现方法,就是利用steps(),就是帧之间的阶跃动画,这个在w3c里面没有写,先贴个图:

    a:3:{s:3:\"pic\";s:43:\"portal/201811/22/145448elzil8945htu7xh7.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

    由上图可知:

    steps(1,start):动画一开始就跳到 100% 直到这一?。ú皇钦鲋芷冢┙崾?。

    steps(1,end):保持 0% 的样式直到这一?。ú皇钦鲋芷冢┙崾?。

    另外也可以直接设置 animation-timing-function:step-start/step-end。

    step-start效果等同于steps(1,start),step-end效果等同于steps(1,end)。

    最终效果,因为录制的问题可能有点卡顿,有兴趣的同学可以直接复制代码去跑下:

    a:3:{s:3:\"pic\";s:43:\"portal/201811/22/145442m4ozsjiiq5tqgc15.gif\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

    完整代码:

    [HTML] 纯文本查看 复制代码运行代码
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="author" content="//www.fllv.net/" />
    <title>蚂蚁部落</title>
    <style>
    @keyframes run{
      0%{
        background-position: 0 0;
      }
      8.333%{
        background-position: -140px 0;
      }
      16.666%{
        background-position: -280px 0 ;
      }
      25.0%{
        background-position: -420px 0 ;
      }
      33.333%{
        background-position: -560px 0 ;
      }
      41.666%{
        background-position: -700px 0 ;
      }
      50.0%{
        background-position: -840px 0 ;
      }
      58.333%{
        background-position: -980px 0 ;
      }
      66.666%{
        background-position: -1120px 0 ;
      }
      75.0%{
        background-position: -1260px 0 ;
      }
      83.333%{
        background-position: -1400px 0 ;
      }
      91.666%{
        background-position: -1540px 0 ;
      }
      100%{
        background-position: 0 0 ;
      }
    }
    @-webkit-keyframes run{
      0%{
        background-position: 0 0;
      }
      8.333%{
        background-position: -140px 0;
      }
      16.666%{
        background-position: -280px 0 ;
      }
      25.0%{
        background-position: -420px 0 ;
      }
      33.333%{
        background-position: -560px 0 ;
      }
      41.666%{
        background-position: -700px 0 ;
      }
      50.0%{
        background-position: -840px 0 ;
      }
      58.333%{
        background-position: -980px 0 ;
      }
      66.666%{
        background-position: -1120px 0 ;
      }
      75.0%{
        background-position: -1260px 0 ;
      }
      83.333%{
        background-position: -1400px 0 ;
      }
      91.666%{
        background-position: -1540px 0 ;
      }
      100%{
        background-position: 0 0 ;
      }
    }
    div{
      width:140px;
      height:140px;
      background: url(demo/CSS/img/run.png) ;
      animation:run 1s steps(1, start) infinite;
      -webkit-animation:run 1s steps(1, start) infinite;
    }
    </style>
    </head>
    <body>
    <div></div>
    </body>
    </html>

    最新评论

    返回顶部
  • 工信部:17年12批新能源车推荐车型目录 2019-05-11
  • 美国再挑贸易战,中方强力回击,全球市场跌声一片 2019-05-11
  • 四川都江堰再现野生大熊猫踪迹 比3月拍到的更肥 2019-05-10
  • 坚持和发展马克思主义的宣言书 2019-05-10
  • 解析视频播控平台黑产链 20元看12家网站VIP会员视频 2019-04-26
  • 众星云集 “欧洲红魔”能否用战绩兑现黄金一代的天赋 2019-04-26
  • 比如最高检的12309检查服务中心,原来还有显示信访处理进程,不过没有几天就取消了。[上火][上火] 也就是说办与不办也没有人知道,下边省事了,上边也就轻松了。 2019-04-16
  • 男女差别有多大?河北省首次公开发布分性别统计分析报告 2019-04-05
  • 菲律宾媒体和网民热议"中国剧场"开播 2019-04-05
  • 坚持和完善我国基本经济制度的两条新经验 2019-04-02
  • 5月份61城房价环比反弹 多地调控政策或再加码 ——凤凰网房产济南 2019-04-02
  • [洞见]草榴死了 欲望还活着草榴性 2019-04-02
  • 回顾:五年来习近平的“两会金句” 2019-04-02
  • 云南省2018年度国家社科基金项目申报工作的几点做法 2019-04-01
  • 地理君的专栏作者中国国家地理网 2019-04-01
  • 哪有二八杠app 好运快3开奖 浙江体彩20选5开奖信息 重庆时时彩宝宝计划 北京赛车pk10预测 福彩3d太湖字谜 重庆时时彩开奖视频 山东福彩群英会开奖 幸运农场走势图官方网 浙江快乐12开奖结果 北京28官网开奖结果 生肖时时彩的购买 老时时彩开奖历史记录 365足彩胜负彩 新时时彩五星遗漏 江苏时时彩预测软件