利用 CSS animation 和 CSS sprite 制作动画
CSS3 大大强化了制作动画的能力,但是如果要做出图案比较复杂的动画,选择 GIF 依然是一个不错的选择。今天给大家介绍一个使用 CSS animation 配合雪碧图(CSS sprite)来制作动画的方法,可以做出类似于 GIF 动画的效果。
CSS3 Animation steps函数
首先看看,CSS3 animation的兼容性。可以看到基本上主流浏览器都支持了 animation 属性,chrome、safari、opera和移动端的浏览器带上前缀就可以支持。
利用雪碧图来制作动画使用了 CSS3 Animation 里面的一个重要的函数 steps
。
animation 本身是一个复合的属性,它包含了 animation-name,animation-timing-function,animation-iteration-count,animation-direction,animation-play-state,animation-fill-mode 六个属性。
steps
就是属于 animation-timing-function 中的一个函数。
animation-timing-function 平时我们用的比较多的是默认的一些动画曲线值 ease
、ease-in
等等。而 steps
则可以由我们控制动画被分成多少个部分进行。
steps(n,[start|end])
传入一到两个参数,第一个参数意思是把动画分成 n 等分,然后动画就会平均地运行。第二个参数 start 表示从动画的开头开始运行,相反,end 就表示从动画的结尾开始运行,默认值为 end。
因此,我们利用雪碧图和 steps
函数制作动画的原理就是,雪碧图包含了动画图片的每一帧,然后利用 steps
函数确定固定时间内动画运行的部分等于动画的帧数,从而实现动画效果。
动画实例
用猥琐的兔斯基做例子╮( ̄▽ ̄")╭
首先我们要切图,把动画的每一帧切成这样的图:
切图如果大家不想折腾,推荐在线合并雪碧图的工具。
然后写 keyframes
@-webkit-keyframes tuski {
0% {
background-position:0;
}
100% {
background-position: -576px 0;
}
}
@-moz-keyframes tuski {
0% {
background-position:0;
}
100% {
background-position: -576px 0;
}
}
@keyframes tuski {
0% {
background-position:0;
}
100% {
background-position: -576px 0;
}
}
调用动画
#tuski {
-webkit-animation: tuski .5s steps(12) infinite;
-moz-animation: tuski .5s steps(12) infinite;
animation: tuski .5s steps(12) infinite;
}
与 GIF 相比,这种动画可以让我们手动调整动画运行的速度。
点这里看完整的代码。
利用 CSS animation 和 CSS sprite 制作动画的更多相关文章
- 安卓Animation类与xml制作动画
有时要对控件添加一点动画效果,在安卓中,动画效果也是一个类,也就是Animation类.把动画效果这个类弄好后,在与控件类关联到一起,就可以实现控件有一些动作特效这样的效果了.动画效果的定义,要在xm ...
- css animation & animation-fill-mode
css animation & animation-fill-mode css animation effect https://developer.mozilla.org/en-US/doc ...
- 百度前端技术学院2018笔记 之 利用 CSS animation 制作一个炫酷的 Slider
前言 题目地址 利用 CSS animation 制作一个炫酷的 Slider 思路整理 首先页面包含三种东西 一个是type为radio的input其实就是单选框 二是每个单选框对应的label 三 ...
- No.6 - 利用 CSS animation 制作一个炫酷的 Slider
*{ margin:; padding:; } div{ margin: auto; width: 800px; height: 681px; position: relative; overflow ...
- No.3 - CSS transition 和 CSS transform 配合制作动画
课程概述 作业提交截止时间:09-01 任务目的 深度理解掌握 transition-timing-function 以及它的意义 学会配合使用 CSS transform 和CSS transiti ...
- 纯CSS制作加<div>制作动画版哆啦A梦
纯CSS代码加上<div>制作动画版哆啦A梦(机器猫) 哆啦A梦(机器猫)我们大家一定都很熟悉,今天给大家演示怎么用纯CSS代码,来做一个动画版的哆啦A梦. 效果图: ###下面代码同学可 ...
- css animation @keyframes 动画
需求:语音播放动态效果 方案:使用如下图片,利用 css animation @keyframes 做动画 html <span class="horn" :class=& ...
- 谈谈一些有趣的CSS题目(十四)-- 纯 CSS 方式实现 CSS 动画的暂停与播放!
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 纯 CSS 方式实现 CSS 动画的暂停与播放!
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
随机推荐
- 论文笔记:目标追踪-CVPR2014-Adaptive Color Attributes for Real-time Visual Tracking
基于自适应颜色属性的目标追踪 Adaptive Color Attributes for Real-Time Visual Tracking 基于自适应颜色属性的实时视觉追踪 3月讲的第一篇论文,个人 ...
- android自己定义之 5.0 风格progressBar
近期做项目,用到了ProgressBar .就想到了要使用Android5.0 的效果,就随手实现了一下. 效果图: 大概的思路: 1. 圆圈通过Canvas去绘制 2.圆圈的动画通过Animator ...
- Android抽屉菜单DrawerLayout的实现案例
(1)项目布局文件 activity_main.xml <android.support.v4.widget.DrawerLayout xmlns:android="http://sc ...
- Boost Replaceable by C++11 language features or libraries
Replaceable by C++11 language features or libraries Foreach → Range-based for Functional/Forward → P ...
- mac关闭和开启启动声
1 关闭 sudo nvram SystemAudioVolume=%01 2 开启 sudo nvram -d SystemAudioVolume
- 0x0118消息就是WM_SYSTIMER
http://social.msdn.microsoft.com/Forums/vstudio/en-US/c0f9bac9-d211-4b8b-ba99-f5a0ed0d2e0a/what-is-w ...
- oc78--NSFileManager
// main.m // NSFileManager #import <Foundation/Foundation.h> int main(int argc, const char * a ...
- oc68--NSString
// // main.m // 字符串截取 #import <Foundation/Foundation.h> int main(int argc, const char * argv[] ...
- What is an ISAPI Extension?
https://www.codeproject.com/Articles/1432/What-is-an-ISAPI-Extension Introduction Unless you have be ...
- bzoj 1935 Tree 园丁的烦恼
题目大意: 一些点,每次查询一个矩形内有多少个点 思路: 因为空间太大 所以不能用什么二维树状数组 需要把这些点和所有查询的矩阵的左下和右上离线下来 先离散化 然后每个子矩阵像二维前缀和那样查询 按照 ...