CSS3 timing-function: steps()介绍_html/css_WEB-ITnose

企鹅博客
企鹅博客
企鹅博客
25193
文章
0
评论
2020年10月13日00:28:40 评论 7 views

在应用 CSS3 渐变/动画时,有个控制时间的属性 。它的取值中除了常用到的三次贝塞尔曲线以外,还有个steps() 函数。

steps 函数指定了一个阶跃函数,第一个参数指定了时间函数中的间隔数量(必须是正整数);第二个参数可选,接受 start 和 end 两个值,指定在每个间隔的起点或是终点发生阶跃变化,默认为 end。

#demo { animation-iteration-count: 2;//动画重复两次 animation-duration: 3s;//每次动画持续时间为3s }

我们分别对它应用 steps(3, start) 和 steps(3, end),做出阶跃函数曲线如下:

1.取steps(3, start)

第一个参数将动画划分为了三个部分。第二个参数“start”,指定在每个部分的开始发生阶跃变化,即图中实心圆处。动画的过程就是:1/3时的状态→2/3时状态→最后的状态。

这里写了个最简单的demo,将一个盒子分5步从红色变为白色。在这个demo中你可以看到最后的状态为白色:http://runjs.cn/detail/mqbdpite

2.取 steps(3, end)

与steps(3, start)不同的是,动画的过程是:初始状态→1/3时状态→2/3状态。也就是说定义的最终状态并不会显示出来,而是显示结束前1/3时间段的状态。我们同样通过demo来观察:http://runjs.cn/detail/77frfllv。同样是由红色变为白色,但是最后的状态并不是白色。

附件中的demo是结合“雪碧图”(见链接http://km.oa.com/group/23033/articles/show/226032)和steps()实现一个小男孩奔跑的动画。

@keyframes animate {  to { background-position: -3420px; }}.kai.animate { animation: animate 0.75s steps(19) infinite; }

动画完整的效果是将这幅图在0.75s内,分19次(雪碧图上刚好有小男孩19个动作),水平方向向左移动3420px(图像的宽度)。

快去下附件,让你的男孩跑起来。

版权声明:本文为博主原创文章,未经博主允许不得转载。

继续阅读
css的一些小技巧!页面视觉差!_html/css_WEB-ITnose html教程

css的一些小技巧!页面视觉差!_html/css_WEB-ITnose

相当长的一段时间,现在网站与所谓的“视差”效果一直很受欢迎。 万一你没有听说过这种效果,不同的图像,在不同的方向移动或层主要包括。这导致了一个很好的光学效应,使参观者的注意。 在网页设计中,为了实现这...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: