HTML——steps 奔跑的白熊

利用H5和C3制作奔跑的白熊

本次需要用到的素材图片：

一、概念

steps 函数是 animation-timing-function 属性的一个值，steps函数接收两个参数： number 和position 。
number： number 表示动画被分成了多少段；position： position 参数可选，默认为 end 。

二、效果

视觉效果上一只熊从电脑屏幕左侧跑到中间停止向前原地奔跑。

三、思路

先设置一个盒子，大小刚好能显示白熊奔跑的一张图片，放上白熊的图片
白熊奔跑需要用到动画@keyframes实现，注意最后重复奔跑的动作，要用到animation-iteration-count：infinite
白熊盒子从屏幕左侧移动到中间，也需要设置新的动画，最后停在屏幕中间，需要用到animation-fill-mode：forwards
一个元素可以引用多个动画，之间用逗号隔开
※※※※※※※※※※※※重头戏：为了能够实现这种在逐帧动画效果，需要引出3D动画新的属性——steps（）。在括号内输入数字，他会按照数字实现分步效果。

四、实践

在body区设置个div盒子

<div></div>

为盒子赋予绝对定位（因为本案例只涉及一个盒子，其父盒子是body，因此不用设置相对定位），使其位于屏幕中间，再设置白熊背景图片

CSS

div {position: absolute;top: 50%;left: 0;width: 200px;height: 100px;background: url(image/熊大.png);
}

设置白熊奔跑的动画，需要用到background-position参数：background-position 属性设置背景图像的起始位置，通过变换不同的位置达成白熊在奔跑的效果。

CSS

div{animation: bear .8s steps(8) infinite
}

*由于图片共有8张，因此设置steps(8)，最后设置infinite让动画循环*

@keyframes bear {0% {/* background-position是背景图片起始位置，通过变换背景图片的位置让熊看起来像奔跑 */background-position: 1600px 0;}100% {background-position: 0 0;}}

奔跑做好了来做向前跑的效果，再设置一个新的动画，0%时不变，100%时左移动50%

CSS

div{animation: bear .8s steps(8) infinite, move 2.5s forwards;}

*元素可以调用多个动画，用逗号隔开；forward指动画结束后停留，不返回最先位置*

@keyframes move {0% {left: 0;}100% {left: 50%;}}

四、小结

逐帧动画效果用到steps()，括号内输入数字
元素可以调用多个动画，用逗号隔开
background-position是背景图片起始位置，通过变换背景图片的位置让熊看起来像奔跑

HTML——steps 奔跑的白熊相关推荐

好用的css3特性-动画和3d变换
上一篇文章总结了过渡和2D变化,这一篇来总结一下动画和3D变换,动画可用的场景也很多,比如在加载的页面的时候,可以放置一个gif图,也可以自定义小动画来缓解用户等待的焦虑感,比如以下三个小圆圈转圈圈的 ...
steps animation，极光下奔跑的熊
先在body中写入div样式 <div id="main"><div id="stage"><div id="space ...
纯CSS3实现动画—奔跑的北极熊
纯CSS3实现动画-奔跑的北极熊代码如下:直接复制粘贴即可食用(注意背景图片路径) <!DOCTYPE html> <html lang="en">< ...
[练习]利用CSS steps 实现逐帧动画
网页逐帧动画的实现方式网页中的逐帧动画,大致可分为两大类的实现方式, 分别是使用JS控制,和单纯使用CSS实现,两者的优劣总体概括来说就是: JS动画可控性更强,但开销大,实现复杂. CSS动画实现 ...
通过css3制作熊在冰川奔跑效果（animation、精灵图）
需要注意的是后面的黑冰川我用的是前伪元素来实现的,有半透明效果. html <section class="wrap"><div class="bear ...
python做flash帧动画_[练习]利用CSS steps 实现逐帧动画
网页逐帧动画的实现方式网页中的逐帧动画,大致可分为两大类的实现方式, 分别是使用JS控制,和单纯使用CSS实现,两者的优劣总体概括来说就是: JS动画可控性更强,但开销大,实现复杂. CSS动画实现 ...
【CSS3动画】利用CSS3制作“百度浏览器”官网奔跑的北极熊效果（不含背景移动）
本期带大家制作百度浏览器官网(目前官网已经注销)中奔跑的北极熊的动画效果. 动画原理奔跑的北极熊动画原理是将北极熊奔跑的各个片段整合在一起,形成一张背景图片,然后设置一个盒子,将背景图片放入,通过设 ...
如何用CSS实现百度浏览器官网的北极熊奔跑动画
效果图: 背景图是自己另外找的,北极熊在奔跑的同时,背景图也在向它身后移动. 素材: 实现思路: 1 先定义一个盒子来"装"北极熊,因为素材是 1600 x 100 px,包含8张 ...
利用CSS3动画制作“百度浏览器”官网奔跑的北极熊
现在各大浏览器的官网是越做越炫酷了.比如百度浏览器官网,虽然我不用这个浏览器呢(只用原版Chrome,不为其他,只因国内换壳的浏览器内核版本太低,跟Chrome官方始终有差距).但是不得不佩服百度的设 ...

HTML——steps 奔跑的白熊

利用H5和C3制作奔跑的白熊

HTML——steps 奔跑的白熊相关推荐

最新文章

热门文章