章节
问答
课签
笔记
评论
占位
占位

精灵动画的实现

CSS Sprites在国内很多人叫CSS精灵,其实这个技术不新鲜,原理就是:靠不断的切换图片让人感觉视觉上不断在变化,例如gif动画之类的效果

那么前端如何实现精灵效果?

传统的就是靠定时器不断去改变一个元素的background-image属性了,简单的来说就是靠不断的替换图片,但是值得注意的问题就是图片如果很多,加载会比较慢,会占用大量网络资源

大多数的做法就是把图片都合成一张大图再利用CSS的以下属性

background-image
background-repeat
background-position

组合进行背景定位,background-position可以用数字精确的定位出背景图片的位置

这里我将采用最新的CSS3的动画实现。通过 CSS3我们能够创建动画,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

新增一个class类slowWalk,在这个类中定义一个animation,通过关键帧keyframes定义一些规则,就是如何取图片坐标

  • slowWalk样式,用于定义一些动画参数,比如执行的时间、方式、算法、次数等等
  • @keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果

右边代码区域所示,为方便理解,解读一下样式的slowWalk类定义规则:

定义一个名为person-slow的@keyframes规则,@keyframes用百分比来规定变化发生的时间, 0% 是动画的开始,100% 是动画的完成,规则中有4个百分比值的变化,每个比值分别通过position获取一张图片,分别是0%,25%,50%,75%,100%。在950毫米内从0%-100%发生4次变化,采用的算法是steps(1, start)一帧一帧的切换,通过设置infinite参数每950毫秒不断循环

通过点击开始动画按钮,我们可以看到最终效果,完全靠CSS实现,非常nice!!!!

任务

打开index.html文件,在代码的23行填入相应代码,通过定义个CCS3的样式规则,让人物开始进行帧动画切换

    /*规定 @keyframes 动画的名称。*/
    -webkit-animation-name: person-slow; 
    /*规定动画完成一个周期所花费的秒或毫秒。默认是 0*/
    -webkit-animation-duration: 950ms;
    /*规定动画被播放的次数。默认是 1。 infinite(循环播放)*/
    -webkit-animation-iteration-count: infinite;
    /*动画切换的方式是一帧一帧的改变*/
    -webkit-animation-timing-function: steps(1, start);
    -moz-animation-name: person-slow;
    -moz-animation-duration: 950ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: steps(1, start)
?不会了怎么办
||

提问题

写笔记

截图
提交
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

举报

0/150
提交
取消
全部 精华 我要发布
全部 我要发布
最新 点赞
只看我的

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?