css3系列之animation实现逐帧动画
上面这个两个简单的动画，是用 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实现逐帧动画的更多相关文章
- css3 animation实现逐帧动画
css3里面的animation属性非常强大,但是自己用的比较少,最近有次面试就刚好被问到了,趁现在有时间就对animation做一个小总结.同时实现一个逐帧动画的demo作为练习 animation ...
- Android动画效果之Frame Animation（逐帧动画）
前言: 上一篇介绍了Android的Tween Animation(补间动画) Android动画效果之Tween Animation(补间动画),今天来总结下Android的另外一种动画Frame ...
- Android中的动画具体解释系列【1】——逐帧动画
逐帧动画事实上非常easy,以下我们来看一个样例: <?xml version="1.0" encoding="utf-8"?> <anima ...
- Android中的动画详解系列【1】——逐帧动画
逐帧动画其实很简单,下面我们来看一个例子: <?xml version="1.0" encoding="utf-8"?> <animation ...
- CSS3 animation属性中的steps实现GIF动图(逐帧动画)
相信 animation 大家都用过很多,知道是 CSS3做动画用的.而我自己就只会在 X/Y轴 上做位移旋转,使用 animation-timing-function 规定动画的速度曲线,常用到的 ...
- css3 实现逐帧动画
css3 实现逐帧动画 实现逐帧动画需要使用到的是Animation动画,该CSS3的Animation有八个属性:分别是如下:1: animation-name2: animation-durati ...
- animation中的steps()逐帧动画
在我们平时做宽高确定,需要背景图片切换的效果时,我如果用的是一张大的png图片.而且恰好是所有小图都是从左向右排列的,那么 我们只需测量出某一个小图距左侧有多少像素(x),然后我们banckgroun ...
- css3逐帧动画
写css3动画的时候,我们经常用到animation来实现,默认情况下,animation是属于连贯性的ease动画.我们熟悉的animation动画有ease.ease-in.ease-out.li ...
- Android笔记(六十三) android中的动画——逐帧动画（ frame-by-frame animation）
就好像演电影一样,播放实现准备好的图片,来实现动画效果. 逐帧动画需要用到AnimationDrawable类,该类主要用于创建一个逐帧动画,然后我们把这个动画设置为view的背景即可. androi ...
随机推荐
- 接口中字段的修饰符：public static final（默认不写） 接口中方法的修饰符：public abstract（默认不写）abstract只能修饰类和方法 不能修饰字段
abstract只能修饰类和方法 不能修饰字段
- 蓝桥杯2020 E：七段码
题解 正规解法是 dfs + 并查集,首先用 dfs 将其所有的情况枚举出来,再用并查集来判断是否在一个连通块上. 许多小伙伴计算的答案为76,主要是判断连通块这方面有问题,倘若不用并查集,直接枚举一 ...
- OpenCV(c++)-1 安装和配置OpenCV4.4（Windows+visual studio 2019）
@ 目录 安装OpenCV4 在Windows系统安装OpenCV4 配置visual studio 2019 配置包含路径 验证配置结果 安装OpenCV4 OpenCV是一个基于BSD许可(开源) ...
- Zeal（文档）安装使用
Zeal是一个为软件开发者提供的离线文档浏览器. 一.下载安装 下载地址:https://zealdocs.org/ 二.安装后下载自己需要的文档 1.通过Zeal原生源直接下载文档 Tools -& ...
- KVM虚拟化管理平台WebVirtMgr部署及使用
KVM虚拟化管理平台WebVirtMgr部署及使用 需求: 公司机房有一台2U的服务器(64G内存,32核),由于近期新增业务比较多,测试机也要新增,服务器资源十分有限.所以打算在这台2U服务器上 ...
- C语言基础-C简介
C语言简介 C 语言是一种通用的高级语言,最初是由丹尼斯·里奇在贝尔实验室为开发 UNIX 操作系统而设计的.C 语言最开始是于 1972 年在 DEC PDP-11 计算机上被首次实现. 在 19 ...
- 测试可变字符序列stringBuilder
测试可变字符序列 stringBuilder(线程不安全,效率高,一般用),stringBuffer(线程安全,效率低)stringBuilder,stringBuffer和string的区别前者可变 ...
- P5530 [BOI 2002]双调路径
题意描述 [BOI 2002]双调路径 题意描述的确实不是很清楚(出题人惜字如金). 给定一张有 \(n\) 个点,\(m\) 条边的无向图,每条边有两个权值,分别表示经过这个点的代价和时间. 同时给 ...
- 如何在Windows Server 2012及更高版本中将域控制器降级
如何在Windows Server 2012及更高版本中将域控制器降级 如果不降级就重装系统,会出问题,所以在将域控系统重装系统之前一定要先降级. 使用服务器管理器将 Windows Server 2 ...
- 一文搞懂后台高性能服务器设计的常见套路, BAT 高频面试系列
微信搜索「编程指北」,关注这个写干货的程序员,回复「资源」,即可获取后台开发学习路线和书籍 先赞后看,养成习惯~ 前言 金九银十,又是一年校招季. 经历过,才深知不易.最近,和作为校招面试官的同事聊了 ...