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

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

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

下面做钟表

用到的素材，如上所示。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        @keyframes secondRun {

            0% {

                transform: rotate(180deg);

            }

                                                /* 由于，我们只需要他 转一圈，所以，我们定义好一圈的角度即可 */

            100% {

                transform: rotate(540deg);

            }

        }

        .wra {

            width: 200px;

            height: 200px;

            position: relative;

            left: calc(50% - 100px);

            top: 100px;                             /*父元素的 基本布局*/

            background-image: url('./img/clock/clock.png');

            background-size: 100% 100%;

        }

        .hour {

            position: absolute;

            left: 95px;

            top: 95px;          /*把时针，定位到 中间点*/

            width: 10px;

            height: 45px;

            background-image: url('./img/clock/hour.png');

            background-size: 100% 100%;

            z-index: 2;

        }

        .minute {

            position: absolute;

            left: 95px;

            top: 95px;         /*把分针定位到中间点*/

            width: 10px;

            height: 66px;

            background-image: url('./img/clock/minute.png');

            background-size: 100% 100%;

            animation: secondRun 3600s infinite steps(60, end); /*steps 把总时长分割成 60  3600/60 =60 所以需要运动 60步* 60s走一次   */

            transform-origin: center 5px;   /*要旋转，就要有旋转的中心点， 设置旋转的中心点。*/

            transform: rotate(180deg);  /*因为，默认的指针是指向 6   我们需要让他指向 12  所需要旋转 180度 */

            z-index: 1;

        }

        .second {

            position: absolute;

            left: 98px;

            top: 77px;         /*把秒针定位到中间点*/

            width: 5px;

            height: 84px;

            background-image: url('./img/clock/second.png');

            background-size: 100% 100%;

            animation: secondRun 60s infinite steps(60, end);    /*steps 把总时长分割成 1 60/60 = 1 所以需要运动 60步， 1s 走一次*/

            transform-origin: center 23px;  /*要旋转，就要有旋转的中心点， 设置旋转的中心点。*/

            transform: rotate(180deg);  /*因为，默认的指针是指向 6   我们需要让他指向 12  所需要旋转 180度 */

            z-index: 3;

        }

    </style>

</head>

<body>

    <div class="wra">

        <div class="hour"></div>

        <div class="minute"></div>

        <div class="second"></div>

    </div>

</body>

</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. Vue (学习第四部 前端项目搭建流程 )

    目录 客户端项目搭建 创建项目目录 初始化项目 安装路由 Vue-router 下载安装路由组件 配置路由 初始化路由对象 注册路由信息 在视图函数中显示路由对应的内容 路由对象提供的操作 页面跳转 ...

  2. mysql一些使用函数（不断更新）

    1.中文转拼音码,多用于将姓名转成拼音(例如:刘德华:liudehua) /*建立拼音码表*/ CREATE TABLE IF NOT EXISTS `t_base_pinyin` ( `pin_yi ...

  3. GO-字符串处理Stings包

    目录 常用的字符串处理函数 (1) Contains (2) Join (3) Index (4) Repeat (5) Replace (6) Split (7) Trim (8) Fields 字 ...

  4. python 作业 批量读取excel文件并合并为一张excel

    1 #!/usr/bin/env python 2 # coding: utf-8 3 4 def concat_file(a,b): 5 #如何批量读取并快速合并文件夹中的excel文件 6 imp ...

  5. 使用Azure静态Web应用部署Blazor Webassembly应用

    上一次演示了如何使用Azure静态web应用部署VUE前端项目(使用 Azure静态web应用+Github全自动部署VUE站点).我们知道静态web应用支持VUE,react,angular等项目的 ...

  6. C#+Arduino Uno 实现声控系统完全实施手册

    话不多说先上视频,一看就懂 另外可参考这里:https://www.cnblogs.com/dehai/p/4285749.html ,这个近6年前的帖子 程序结构 程序分成上位机(PC端)与下位机( ...

  7. 做Java开发7年，今年9个月时间圆梦饿了么P7

    前言 工作拧螺丝,面试造火箭.我想这是每个程序员比较头疼的事情吧!但是,又必须要经历一个面试流程,尤其是摸不清面试官问的问题,导致面试的时候不知道如何回答.本文是工作7年Java程序员从几十次面试中挑 ...

  8. Apache Kylin远程代码执行漏洞复现（CVE-2020-1956）

    Apache Kylin远程代码执行(CVE-2020-1956) 简介 Apache Kylin 是美国 Apache 软件基金会的一款开源的分布式分析型数据仓库.该产品主要提供 Hadoop/Sp ...

  9. 2Git分支问题

    1,查看所有分支: git branch *号在哪表明当前分支在哪. 2,新建一个分支: git branch featureq(分支名) 转到该分支下: git checkout featureq ...

  10. 前端性能优化之 gzip+cache-control

    刚刚在Node.js环境下使用gzippo模块进行了测试. 使用gzip的压缩率惊人的好,达到了50%以上. 再加上express的staticCache,配合cache-control max-ag ...