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

3D开窗效果

当圣诞雪橇飞到窗户前时,在设计上窗户会开打了。在圣诞中采用了"开门式","开门式"可以营造一个3d的感觉

"开门式"的效果:

左右2片窗户需要慢慢的向内打开,门在变化的过程中是需要有个3d的视角变化的,门内需要有一个背景图

简单的说下原理:

在"开门式"中需要用到rotateY与scale,通过对rotateY角度的变化,从而产生开门的视角,这里需要引入一些3d属性设置,具体在之前就已经学习过了,如果不记得了请看3D变换的梳理那一节

整个效果是JS+CSS结合处理的,分别定义在pageA.js中的openWindow方法,在pageA.css中,窗户的底边与阴影是采用的before与after伪元素增加的,减少了html结构

在openWindow方法中,动态的通过JS对"门"增加对应的样式,从而执行动画

this.$leftWin.addClass("window-transition").addClass("hover")
this.$rightWin.addClass("window-transition").addClass("hover")

window-transition:定义的一个transition过渡动画,

hover:定义了一个transform过渡动画执行的变换 scale(0.95) rotateY(60deg)

通过增加2个CSS样式后,“门”自然就会开了。

还要注意:为了衔接后续的动作,所以需要针对这个动画做监听,这样才能能确保动画之后执行之后的动作,这里监听transitionend事件

element.one("transitionend webkitTransitionEnd", function(event) {
     complete()
})

注意必须要等2个动画都结束后才能执行后续的动作,是需要监听2个开门动作的动画完成了

 var complete = function() {
        ++count
        if (count === 2) {
            callback && callback();
        }
 }

任务

请在pageA.css代码143,147行处填入css样式,执行3d开窗的样式效果

左边:

缩放0.95倍,rotateY角度是60,top=0.1rem left= - 0.25rem

右边:

缩放0.95倍,rotateY角度是-60,top=0.1rem left= -0.25rem

?不会了怎么办

.window-left.hover {
    -webkit-transform: scale(0.95) rotateY(60deg);
    -moz-transform: scale(0.95) rotateY(60deg);
    margin-top: 0.1rem;
    margin-left: -0.25rem;
}

.window-right.hover {
    -webkit-transform: scale(0.95) rotateY(-60deg);
    -moz-transform: scale(0.95) rotateY(-60deg);
    margin-top: 0.1rem;
    margin-right: -0.25rem;
}

||

提问题

写笔记

公开笔记
提交
||

请验证,完成请求

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

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

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

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

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

举报

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

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?