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

镜头效果

在圣诞主题中切换方式上采用了镜头式的拉伸方式

看似高大上其实原理很简单,无非就是把页面给缩小方法,然后附带一些改变透明度的效果

CSS3增加了很多新的属性,其中有一个变形(transform)的scale属性可以针对元素进行缩放

例如:让一个元素放大2倍,注意浏览器兼容加前缀

-webkit-transform: scale(2);
-moz-transform: scale(2);

就这样简单的给元素赋予css属性就可以了

变化的方式有了,如果让其运动呢?

特别注意:transform只是一个静态属性,它并不能让元素进行运动变化

这里继续引入css3的animation动画,通过animation与transform配合就能达到镜头的效果,参考代码区域common.css

一般来说都会通过对元素增加样式的方式来调用css3动画。在css文件中定义2个样式,effect-out与effect-in

.effect-out{
    animation: effectOut 8s ease-in-out forwards;
}
@keyframes effectOut{
    0% { opacity:1; }
    100% {transform: scale(20); opacity:0; }
}

在effect-out中定义一条规则,8秒的时间运行keyframes ,将元素透明度从1变成0,同时还要让元素放大20倍, 反之亦然

然后还要注意缩放默认情况下是按照元素的中心位置的,有时候需要改掉这个中心x(50%) y(50%)参考点可以单独设置

 -webkit-transform-origin:71% 72%;

最终通过给元素element.addClass("effect-out") 让元素产生镜头的切换效果

具体的animation与transform使用可以查阅相关资料,实际的镜头切换下请参考右边的代码的实现

任务

镜头拉伸的样式实现,请在右边common.css代码区域补充effect-out与effect-in的css3关键帧实现

effectOut: 0-1%%变化中透明度从1-0变化,并且图片要放大20倍

effect-in: 0-1%%变化中透明度从0-1变化,并且图片还原到原始尺寸

?不会了怎么办

@-webkit-keyframes effectOut{
    0% { opacity:1; }
    100% { -webkit-transform: scale(20); opacity:0; }
}
@-moz-keyframes effectOut{
    0% { opacity:1; }
    100% { -moz-transform: scale(20); opacity:0; }
}

 

@-webkit-keyframes effectIn{
    100% { -webkit-transform: scale(1); opacity:1; }
}
@-moz-keyframes effectIn{
    100% { -moz-transform: scale(1); opacity:1; }
}

||

提问题

写笔记

公开笔记
提交
||

请验证,完成请求

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

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

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

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

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

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

举报

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

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?