animation steps属性实现帧动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<style type="text/css">
.test{
width: 140px;
height: 150px;
background: url(img/sprites.png) no-repeat;
animation: lily 0.6s steps(12) infinite;
}
@keyframes lily{
0%{
background-position: 0 0;
}
100%{
background-position: -1680px 0;
}
}
</style>
</head>
<body>
<div class="test"> </div>
</body>
</html>
参考说明文档：https://idiotwu.me/understanding-css3-timing-function-steps/
animation steps属性实现帧动画的更多相关文章
- 用animation的steps属性制作帧动画
昨天火急火燎地接到一个任务,说是要做一个掷骰子的游戏,关于掷骰子期间的过渡动画,我本来是想用css 3d制作一个立体的骰子,然后叫UI给6张平面图贴上去.再用translate3d来操作.然而UI考虑 ...
- CSS3使用Animation steps属性实现指针时钟效果
本篇文章由:http://xinpure.com/css3-animation-steps-properties-for-analogue-effects/ animation 默认以 ease 方式 ...
- css3逐帧动画
写css3动画的时候,我们经常用到animation来实现,默认情况下,animation是属于连贯性的ease动画.我们熟悉的animation动画有ease.ease-in.ease-out.li ...
- CSS3 animation属性中的steps实现GIF动图(逐帧动画)
相信 animation 大家都用过很多,知道是 CSS3做动画用的.而我自己就只会在 X/Y轴 上做位移旋转,使用 animation-timing-function 规定动画的速度曲线,常用到的 ...
- CSS3 Animation 帧动画 steps()
@keyframes fn{ 0%{} 100%{} } CSS3的Animation有八个属性 animation-name :动画名 fn animation-duration:时间 1s ani ...
- 深入理解CSS3 Animation 帧动画 ( steps )
作者:Aaron的博客 网址:http://www.cnblogs.com/aaronjs/p/4642015.html --------------------------------------- ...
- animation中的steps()逐帧动画
在我们平时做宽高确定,需要背景图片切换的效果时,我如果用的是一张大的png图片.而且恰好是所有小图都是从左向右排列的,那么 我们只需测量出某一个小图距左侧有多少像素(x),然后我们banckgroun ...
- Android动画主要包含补间动画（Tween）View Animation、帧动画（Frame）Drawable Animation、以及属性动画Property Animation
程序运行效果图: Android动画主要包含补间动画(Tween)View Animation.帧动画(Frame)Drawable Animation.以及属性动画Property Animatio ...
- Android动画总结#补间动画(Tween Animation/View Animation) #帧动画(Frame Animation/Drawable Animation)#属性动画(PropertyAnimation)
1.共有三种动画,英文名字多种叫法如下 第一种动画:补间动画(Tween Animation/View Animation) 四个:RotateAnimation旋转. AlphaAnimation透 ...
随机推荐
- HDU 5726 GCD（ST&RMQ）
题目链接 GCD 先ST倍增预处理,f[i][j]表示从i开始(包含第i个数)的连续2^j个数的最大公约数. 这样就可以在O(1)内询问得到a[l]到a[r]之间的所有数的最大公约数的值. 然后对于每 ...
- Zab算法详解
Zookeeper使用了一种称为Zab(Zookeeper Atomic Broadcast)的协议作为其一致性复制的核心,据其作者说这是一种新发算法,其特点是充分考虑了Yahoo的具体情况:高吞吐量 ...
- BZOJ3295动态逆序对
一道比较傻的CDQ分治 CDQ: 主要用于解决三位偏序的问题 #include<cstdio> #include<cctype> #include<algorithm&g ...
- 【redis】4.spring boot集成redis，实现数据缓存
参考地址:https://spring.io/guides/gs/messaging-redis/ ================================================== ...
- 8.【nuxt起步】-vue组件之间数据交互
那么现在问题来了,我现在是在index.vue获取了服务端的数据,怎么传值到maincontent.vue?当然你也可以把获取数据放在maincontent.vue,但假如有些数据同时在header, ...
- Hive UDF开发-简介
Hive进行UDF开发十分简单,此处所说UDF为Temporary的function,所以需要hive版本在0.4.0以上才可以. Hive的UDF开发只需要重构UDF类的evaluate函数即可.例 ...
- redis主从连接不成功错误
redis主从连接不成功错误 学习了:https://blog.csdn.net/wzqzhq/article/details/64919133 需要增加 masterauth password.. ...
- G 全然背包
<span style="color:#3333ff;">/* /* _________________________________________________ ...
- nyoj 1077 小博弈 【另类巴什博奕】
分析:分析当整除(a+b)的时候肯定是后者胜利,假设余数不等于0的时候.假设余数大于b肯定是前者胜利,否则后者胜利. 代码: import java.math.*; import java.util. ...
- Solidworks安装完成提示failed to load slderresu.dll怎么办
安装完成出现下面的一系列错误提示 进入到语言包,重新安装中文语言包即可 可以正常打开和运行了