动画实例 —— 奔跑的熊大

emmmmmm，这是今天的第一个案例。

这个案例，有一个亮点，巧用steps()实现动画。

steps()是animation-timing-function属性的属性值，意思是分为几步完成动画的。在这个例子中，这个熊有8种状态，如果再使用常规的动画速度ease、ease-in等就达不到效果了。这里使用steps()是最好的，分8步完成，连贯起来就完成了一次的奔跑。

看下代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>奔跑的熊大</title><style>body {background-color: #999;}div {position: absolute;/* 每个图片的尺寸是固定的 */width: 200px;height: 100px;margin: 10px;/* 这个背景图有点像精灵图 ：熊的不同状态*//* 熊不同的状态 组合在一起就是熊的运动状态 */background: url(img/bear.png) no-repeat;/* steps(8) 是动画的形式 几步完成动画*//* run 是熊奔跑的动画 多个动画同时使用时  使用逗号隔开 */animation: bear .7s steps(8) infinite, run 5s forwards;}@keyframes bear {0% {background-position: 0 0;}/* 移动背景图，以步长为单位  */100% {background-position: -1600px 0;}}@keyframes run {0% {left: 0;}100% {/* 跑到中间 */left: 50%;transform: translate(-50%);}}</style>
</head><body><div></div>
</body></html>

背景图是这个

效果嘛，是个动态的，有兴趣的童靴可以去试试。

动画实例 —— 奔跑的熊大相关推荐

奔跑的熊大案例（CSS3动画）
跟着pink老师后面学习 <!DOCTYPE html> <html lang="en"><head><meta charset=&quo ...
html5 游戏动画设计,HTML5 Canvas 动画实例
原标题:HTML5 Canvas 动画实例在开发在线游戏时,绘制动画是非常重要的.本节介绍一个使用 Canvas API 实现的动画实例--游戏人物的跑步动画. 动画的概念及原理 1．动画动画是通 ...
html中如何实现放大动画,CSS3实现点击放大的动画实例
这次给大家带来CSS3实现点击放大的动画实例,CSS3实现点击放大动画实例的注意事项有哪些,下面就是实战案例,一起来看一下. 前言最近在工作中遇到一个需求,实现的效果是当点击商品图片右上的收藏按钮触 ...
css拉伸动画,CSS3 matrix双板划水、拉伸、打板动画实例animation
matrix 在 CSS3 中用于制作对象的矩阵效果,把处于不同的状态的矩阵连接起来就变成了动画.单用 matrix 制作动画尽管变化形式不多,但组合合理一样可以制作出新颖的动画. 以下就用 matr ...
html 纯css设置转圈,CSS3 转圈彩色文字动画实例及animation-play-state属性规则
网页中的动画通常是当鼠标移到上面,动画立即停止,便于用户阅读:CSS3新增的制作动画属性也考虑到这个问题,只要作了相应的设置,鼠标移到上面,动画也会停止,移开鼠标,动画继续运动:这主要通过animat ...
css 延时几秒代码,CSS3 会聚展开文字动画实例及animation-delay属性规则
CSS3中制作动画有两个控制时间的属性,一个是动画持续时间,另一个是动画延迟时间,也就是本篇要讨论的animation-delay属性,它用于控制动画延迟多长时间,也就是打开网页后等待多久动画才开始, ...
实现太阳系行星公转动画实例（CSS+HTML5 源码）
实现太阳系行星公转动画实例(CSS+HTML5 源码) 效果图源代码(CSS+HTML5) 效果图源代码(CSS+HTML5) <html> <head> <styl ...
python制作简单动画_Python通过matplotlib简单绘制动画实例
Matplotlib是一个Python的2D绘图库,它以各种硬拷贝格式和跨平台的交互式环境生成出版质量级别的图形.通过Matplotlib,开发者可以仅需要几行代码,便可以生成绘图,直方图,功率谱,条 ...
html5动画在线示例,精妙无比 8款HTML5动画实例及源码
本文作者html5tricks,转载请注明出处新的一周开始了,我们分享 1.基于HTML5 Canvas的图表插件Chart.js chart.js是一款基于HTML5 Canvas的图表插件,ch ...

动画实例 —— 奔跑的熊大

动画实例 —— 奔跑的熊大相关推荐

最新文章

热门文章