CSS3 animation属性中的steps实现GIF动图(逐帧动画)
相信 animation 大家都用过很多，知道是 CSS3做动画用的。而我自己就只会在 X/Y轴 上做位移旋转，使用 animation-timing-function 规定动画的速度曲线，常用到的 贝塞尔曲线。但是这些动画效果都是连续性的。
今天发现个新功能 animation-timing-function 的另外个属性值 steps()功能符，可以让动画不连续，就是制作逐帧动画。
steps(n,start/end)
第一个参数 number 为把动画分为 n 步阶段性展示，表示把我们的动画分成了多少段；
第二个参数默认为 end，设置最后一步的状态，start 为结束时的状态，end 为开始时的状态。
第二个参数具体说就是，emmmm.....................我寄几也没详细看（没理解），附上传送门你们看下张鑫旭大神的讲解 CSS3 animation属性中的steps功能符深入介绍
这里只需要第一个参数就好了
这张素材宽高：2128*241、总共为8帧，故 steps(8)
<!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>CSS3 animation属性中的steps实现GIF动图(逐帧动画)</title>
<style>
.main {
margin: 100px auto;
width: 266px;
height: 241px;
background: url(./test.jpg);
background-size: 2128px;
animation: sprite5 1s steps(8) infinite
} @keyframes sprite5 {
0% {
background-position: 0 0
} 100% {
background-position: -2128px 0;
}
}
</style>
</head> <body>
<div class="main"></div>
</html>
ok，大功告成，效果预览，当然这张GIF来的
CSS3 animation属性中的steps实现GIF动图(逐帧动画)的更多相关文章
- css3 animation 属性众妙
转自:凹凸实验室(https://aotu.io/notes/2016/11/28/css3-animation-properties/) 本文不会详细介绍每个 css3 animation 属性(需 ...
- animation中的steps()逐帧动画
在我们平时做宽高确定,需要背景图片切换的效果时,我如果用的是一张大的png图片.而且恰好是所有小图都是从左向右排列的,那么 我们只需测量出某一个小图距左侧有多少像素(x),然后我们banckgroun ...
- css3 animation实现逐帧动画
css3里面的animation属性非常强大,但是自己用的比较少,最近有次面试就刚好被问到了,趁现在有时间就对animation做一个小总结.同时实现一个逐帧动画的demo作为练习 animation ...
- Android笔记(六十三) android中的动画——逐帧动画（ frame-by-frame animation）
就好像演电影一样,播放实现准备好的图片,来实现动画效果. 逐帧动画需要用到AnimationDrawable类,该类主要用于创建一个逐帧动画,然后我们把这个动画设置为view的背景即可. androi ...
- css3 实现逐帧动画
css3 实现逐帧动画 实现逐帧动画需要使用到的是Animation动画,该CSS3的Animation有八个属性:分别是如下:1: animation-name2: animation-durati ...
- css3逐帧动画
写css3动画的时候,我们经常用到animation来实现,默认情况下,animation是属于连贯性的ease动画.我们熟悉的animation动画有ease.ease-in.ease-out.li ...
- Android动画效果之Frame Animation（逐帧动画）
前言: 上一篇介绍了Android的Tween Animation(补间动画) Android动画效果之Tween Animation(补间动画),今天来总结下Android的另外一种动画Frame ...
- 过渡与动画 - 逐帧动画&steps调速函数
写在前面 上一篇中我们熟悉五种内置的缓动曲线和(三次)贝塞尔曲线,并且基于此完成了缓动效果. 但是如果我们想要实现逐帧动画,基于贝塞尔曲线的调速函数就显得有些无能为力了,因为我们并不需要帧与帧之间的过 ...
- Android中实现一个简单的逐帧动画(附代码下载)
场景 Android中的逐帧动画,就是由连续的一张张照片组成的动画. 效果 注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 ...
随机推荐
- C#操作注册表(简单方便,兼容X32和X64)
C#操作注册表(简单方便,兼容X32和X64) 大家好,我在这里给大家介绍本人实现的操作注册表的类,简单方便,兼容32位系统和64位系统. 一般大家用C#操作注册的方法是使用命名空间Microsoft ...
- 为QLabel增加Clicked信号
QT为QLabel添加Click事件(如果我们使用组件,我们关心的是信号槽:如果我们自定义组件,我们关心的是事件) 其实就是改写了一个函数:mouseReleaseEvent,当在QLabel放开鼠标 ...
- 【DPDK】【CPU usage】DPDK应用如何计算当前系统的压力
[前言] 使用DPDK开发的朋友应该都了解使用dpdk的fwd线程的工作模式是polling模式,即100%轮询的方式去加速网络IO,这样我们在操作系统层面上来观察目标processer会发现usag ...
- 0x80070035找不到网络路径
如果这个报错发生:自己的网络正常,其他人可以正常访问服务器,而自己无法访问服务器.原因就是TCP/IP NetBIOS Helper服务被停止. 打开services.msc,启动此服务即可. 该服务 ...
- 与drawable的较量（一）
前言 在android ui中drawable 是一个非常关键的要点,因为我们现在使用的花里胡哨的APP,都在胡里花哨的drawable 构建的. drawable,英文翻译为可拖拽的.说白了就是自己 ...
- 通过ArcGIS将数据存储到SQL Server2012中
一．软件安装: ARCGIS 10.3安装 SQLserver2012安装 ARCGIS 10.3 安装(注意ARCGIS10.3并不用安装配置ARCSDE). https://wenku.baidu ...
- CDH安装详细测试正确
1. CDH简介 简单来说,Cloudera Manager是一个拥有集群自动化安装.中心化管理.集群监控.报警功能的一个工具(软件),使得安装集群从几天的时间缩短在几个小时内,运维人员从数十人降低到 ...
- moco响应中文乱码
moco版本为:moco-runner-standalone-0.11.1.jar 在一次使用moco框架的时候,浏览器查看响应时,发现返回来的中文是乱码. 按照网上的操作,在响应结果中加上heade ...
- [洛谷P4097] [HEOI2013] Segment
Description 要求在平面直角坐标系下维护两个操作: 1.在平面上加入一条线段.记第 \(i\) 条被插入的线段的标号为 \(i\) 2.给定一个数 \(k\) ,询问与直线 \(x = k\ ...
- SSM框架整合中，不报错，数据库只能存ID进去问题解决
嗯,这个错误其实不能算错误,是粗心造成的,在配置文件中对于传递的参数没有写#字符,直接写的的属性名.居然错了两次,哎!!! 嗯,还有一个问题,在动态SQL中,if标签中test属性中判断时,不能用大写 ...