上面这个两个简单的动画，是用 animation-timing-function: steps();  这个属性实现的，具体如何实现，看下面：

这上面的图片，也就是我们的素材，

有些人，可能不是很理解 关键帧容器，和 steps 之间的关系，没关系，看下面的图解

下面做钟表

用到的素材，如上所示。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <style>
  10.         * {
  11.             padding: 0;
  12.             margin: 0;
  13.         }
  14.  
  15.         @keyframes secondRun {
  16.             0% {
  17.                 transform: rotate(180deg);
  18.             }
  19.                                                 /* 由于，我们只需要他 转一圈，所以，我们定义好一圈的角度即可 */
  20.             100% {
  21.                 transform: rotate(540deg);
  22.             }
  23.         }
  24.         .wra {
  25.             width: 200px;
  26.             height: 200px;
  27.             position: relative;
  28.             left: calc(50% - 100px);
  29.             top: 100px;                             /*父元素的 基本布局*/
  30.             background-image: url('./img/clock/clock.png');
  31.             background-size: 100% 100%;
  32.         }
  33.  
  34.         .hour {
  35.             position: absolute;
  36.             left: 95px;
  37.             top: 95px;          /*把时针，定位到 中间点*/
  38.             width: 10px;
  39.             height: 45px;
  40.             background-image: url('./img/clock/hour.png');
  41.             background-size: 100% 100%;
  42.             z-index: 2;
  43.         }
  44.  
  45.         .minute {
  46.             position: absolute;
  47.             left: 95px;
  48.             top: 95px;         /*把分针定位到中间点*/
  49.             width: 10px;
  50.             height: 66px;
  51.             background-image: url('./img/clock/minute.png');
  52.             background-size: 100% 100%;
  53.             animation: secondRun 3600s infinite steps(60, end); /*steps 把总时长分割成 60  3600/60 =60 所以需要运动 60步* 60s走一次   */
  54.             transform-origin: center 5px;   /*要旋转，就要有旋转的中心点， 设置旋转的中心点。*/
  55.             transform: rotate(180deg);  /*因为，默认的指针是指向 6   我们需要让他指向 12  所需要旋转 180度 */
  56.             z-index: 1;
  57.         }
  58.  
  59.         .second {
  60.             position: absolute;
  61.             left: 98px;
  62.             top: 77px;         /*把秒针定位到中间点*/
  63.             width: 5px;
  64.             height: 84px;
  65.             background-image: url('./img/clock/second.png');
  66.             background-size: 100% 100%;
  67.             animation: secondRun 60s infinite steps(60, end);    /*steps 把总时长分割成 1 60/60 = 1 所以需要运动 60步， 1s 走一次*/
  68.             transform-origin: center 23px;  /*要旋转，就要有旋转的中心点， 设置旋转的中心点。*/
  69.             transform: rotate(180deg);  /*因为，默认的指针是指向 6   我们需要让他指向 12  所需要旋转 180度 */
  70.             z-index: 3;
  71.         }
  72.     </style>
  73. </head>
  74.  
  75. <body>
  76.     <div class="wra">
  77.         <div class="hour"></div>
  78.         <div class="minute"></div>
  79.         <div class="second"></div>
  80.     </div>
  81. </body>
  82.  
  83. </html>

以下是素材，如何获取素材？ 右键 检查， 就能找到 该图片的url 了。

css3系列之animation实现逐帧动画的更多相关文章

  1. css3 animation实现逐帧动画

    css3里面的animation属性非常强大,但是自己用的比较少,最近有次面试就刚好被问到了,趁现在有时间就对animation做一个小总结.同时实现一个逐帧动画的demo作为练习 animation ...

  2. Android动画效果之Frame Animation（逐帧动画）

    前言: 上一篇介绍了Android的Tween Animation(补间动画) Android动画效果之Tween Animation(补间动画),今天来总结下Android的另外一种动画Frame ...

  3. Android中的动画具体解释系列【1】——逐帧动画

    逐帧动画事实上非常easy,以下我们来看一个样例: <?xml version="1.0" encoding="utf-8"?> <anima ...

  4. Android中的动画详解系列【1】——逐帧动画

    逐帧动画其实很简单,下面我们来看一个例子: <?xml version="1.0" encoding="utf-8"?> <animation ...

  5. CSS3 animation属性中的steps实现GIF动图(逐帧动画)

    相信 animation 大家都用过很多,知道是 CSS3做动画用的.而我自己就只会在 X/Y轴 上做位移旋转,使用 animation-timing-function 规定动画的速度曲线,常用到的 ...

  6. css3 实现逐帧动画

    css3 实现逐帧动画 实现逐帧动画需要使用到的是Animation动画,该CSS3的Animation有八个属性:分别是如下:1: animation-name2: animation-durati ...

  7. animation中的steps()逐帧动画

    在我们平时做宽高确定,需要背景图片切换的效果时,我如果用的是一张大的png图片.而且恰好是所有小图都是从左向右排列的,那么 我们只需测量出某一个小图距左侧有多少像素(x),然后我们banckgroun ...

  8. css3逐帧动画

    写css3动画的时候,我们经常用到animation来实现,默认情况下,animation是属于连贯性的ease动画.我们熟悉的animation动画有ease.ease-in.ease-out.li ...

  9. Android笔记(六十三) android中的动画——逐帧动画（ frame-by-frame animation）

    就好像演电影一样,播放实现准备好的图片,来实现动画效果. 逐帧动画需要用到AnimationDrawable类,该类主要用于创建一个逐帧动画,然后我们把这个动画设置为view的背景即可. androi ...

随机推荐

  1. git常见操作和指令

    1.指令集 1.1 本地与远程操作 创建文件 echo > README.md(文件名) 创建文件时输入信息 echo "(message)" >> README ...

  2. javascript常见面试题之一：数组的冒泡排序；

    var arr=[32,2,7,78,90,10]; //外层循环控制轮数: for (var i = 0; i < arr.length; i++) { //内层循环控制次数: for (va ...

  3. Spring Boot学习笔记（一）——Eclipse安装STS插件

    一.简介 Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式进行配置,从而使开发人员不再需要定义样板化的配 ...

  4. 二叉树、平衡二叉树、B-Tree、B+Tree 说明

    背景 一般说MySQL的索引,都清楚其索引主要以B+树为主,此外还有Hash.RTree.FullText.本文简要说明一下MySQL的B+Tree索引,以及和其相关的二叉树.平衡二叉树.B-Tree ...

  5. Linux小项目/rhel-基于同步官网yum仓库数据搭建本地yum服务器

    本文的实验环境:aws上的Redhat 7.x , 同样也适用于Centos 7.x 简单说主要分为三步: (1) 向官网同步yum数据,可以根据具体情况,创建脚本及配置周期例行任务  (2) 搭建w ...

  6. 原生JS结合cookie实现商品评分组件

    开发思路如下: 1.利用JS直接操作DOM的方式开发商品评分组件,主要实现功能有:显示评价评分的样式以及将用户操作后对应的数据返回到主页面 2.主页面引入商品评分组件的js文件并根据规定格式的数据,生 ...

  7. Java创建二叉树、二叉树的遍历

    创建二叉树: public class Node {     // 左子节点     public Node leftNode;     // 右子节点     public Node rightNo ...

  8. Java Web中解决乱码的方式

    Java Web中解决乱码的方式 方式一:添加编码过滤器 package com.itmacy.dev.filter; import javax.servlet.*; import javax.ser ...

  9. SQL Server双机热备之发布、订阅实现实时同步

    一.复制的功能概述 SQL Server 复制功能实现了主从库的分离,从而将主库的压力分解掉,主库就主要负责数据的更改等,而主库主要负责查询ji.另外,有了主.从库,则从另一个方面,也了一层安全性,即 ...

  10. Linux 系统编程 学习：01-进程的有关概念 与 创建、回收

    Linux 系统编程 学习:01-进程的有关概念 与 创建.回收 背景 上一讲介绍了有关系统编程的概念.这一讲,我们针对 进程 开展学习. 概念 进程的身份证(PID) 每一个进程都有一个唯一的身份证 ...