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

转身与logo效果

转身效果与慕课logo的效果都是通过css3的animation动画实现的

人物转身

具体代码调用部分:通过定时器模拟一个暂停的时间,这样感觉人物会有一个等待转身的效果

setTimeout(function() {
    girl.rotate();
    boy.rotate(function() {
        //开始logo动画
        logo.run()
    });
}, 1000)

girl与boy都增加一个rotate的方法。这是通过增加一个rotate的样式调用CSS3动画,我们在pageC文件中找到对应的rotate样式

-webkit-animation-name: girl-rotate;
-webkit-animation-duration: 850ms;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: step-start;
-webkit-animation-fill-mode: forwards;

定义了一个keyframes的规则,原理同样也是通过position不断更换帧图的坐标,这里会有一个animation-fill-mode的属性,forwards的意思就是保留在最终的状态,也就是我们转身后的最终状态

在转身以后还会继续执行其他的动画,那么转身动作到底多久可以完成?虽然这个动画是850ms的运行时间,但是为了保证精确,一般采用事件监听的方法处理

boy.rotate方法传递一个回调,内部通过jQuery.on方法监听一个动画结束的事件,转身动画结束后会调用这个回调函数

$boy.on(animationEnd, function() {
   callback()
   $(this).off();
})

慕课网Logo

loge动画处理的原理与rotate是一样的,区别就是logo是2组CSS3的animation动画组成。这里需要注意的,不能同时给一个元素增加2个CSS3的关键帧动画,所以需要一个结束后,在增加下一个,这里需要通过事件监听的方式处理

代码调用部分:

this.elem.addClass('logolightSpeedIn')
    .on(animationEnd, function() {
        $(this).addClass('logoshake').off();
    })

增加一个logolightSpeedIn的类执行一个动画,等待这个动画结束后,在增加一个logoshake的动画,具体的关键帧的写法,可以参考下源码部分

任务

在代码编辑器pageC.css样式文件中第370、374行补充代码,使慕课网logo出现左右晃动的效果。

0%, 100% {
    -moz-transform: translate3d(0, 0, 0);
}
10%,
30%,
50%,
70%,
90% {
    -moz-transform: translate3d(-5px, 0, 0);
}
20%,
40%,
60%,
80% {
    -moz-transform: translate3d(10px, 0, 0);
}
?不会了怎么办
||

提问题

写笔记

公开笔记
提交
||

请验证,完成请求

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

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

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

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

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

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?