CSS3 帧动画

2019-09-10 郑州网站建设  

前方出现一头牛!

CSS3 帧动画

没错,这是一个 gif,但这个 gif 也是从小妖的 Demo 页上录下来的,闻到了原滋原味的 CSS3 的味道了吗?Demo 见:

那怎么用 CSS3 实现这个帧动画呢?

准备素材

头儿经常说前端需要能做出炫酷的东西,但巧媳妇难为无米之炊,没有好的设计和素材,前端有时候还是只能徒唤奈何呀。本Demo素材来源于网络

CSS3 帧动画

如何让它动起来呢?

有同学已经想到了,把这张图片设为背景,不断修改 background-position 就可以了!对,其实就是这个道理

那有没有更优雅,而且不涉及 JS 的实现方式呢?

我们今天说的 CSS3 帧动画就是用来解决这个问题,上代码:

CSS3 帧动画

定义一个简单的 keyframes , 修改 background-position-x,从 0 到 -590(图片宽度)

animation: ox1 1s steps(6, start) 0ms infinite normal backwards

分别说一下各属性的涵义:

animation-name: ox1; /* 使用 keyframes ox1 */

animation-duration: 1s; /* 动画持续时间 1s */

animation-timing-function: steps(6, start); /* 动画函数,分6步执行,每一帧显示帧结束时的状态 */

animation-delay: 0ms; /* 延迟多长时间后开始执行动画 */

animation-iteration-count: infinite; /* 动画执行无限次 */

animation-direction: normal; /* 是否需要轮流反向播放动画 normal/alternate */

animation-fill-mode: backwards; /* 会在向元素应用动画样式时迅速应用动画的初始帧 */

不必计算每一帧具体的偏移,没有 JS!


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1678.html转载请标明出处,谢谢合作!
标签:
  • CSS3
  • 出现
  • 这是
  • 前方
  • 一头
  • 没错