镜头效果，H5+JS+CSS3 实现圣诞情缘教程-慕课网

第1章效果预览与介绍
视频：1-1 课程简介(03:16)

第2章设计思路与蕴涵的知识点
视频：2-1 整体介绍(01:40)
视频：2-2 编程思路(02:15)

第8章最终效果与总结
编程：8-1 最终效果与总结

镜头效果

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

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

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; }
}

index.html
common.css

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>圣诞主题</title> <link rel='stylesheet' href='common.css' /> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body> <section class="container">  <section class="page-a bg-adaptive"> </section>  <section class="page-b bg-adaptive"> </section>  <section class="page-c bg-adaptive"> </section> </section> 选择页面： <select id="page"> <option value="page-a" selected="">1</option> <option value="page-b">2</option> <option value="page-c">3</option> </select> </body> <script type="text/javascript"> //切换切换 document.querySelector("#page").addEventListener("change", function(e) { //页面名称 var pageName = e.target.value; switch (pageName) { case "page-b": //切换到b页面，所以需要在当前a页面执行动画 //让元素慢慢放大，所以需呀控制a元素 $(".page-a").addClass("effect-out") break; case "page-c": //切换到c页面，所以需要在目标c页面执行动画 //因为让要c页面先放大，然后缩小 $(".page-c").addClass("effect-in") break; } }, false) /** * 自适应页面大小 * @param {[type]} doc [description] * @param {[type]} win [description] * @return {[type]} [description] */ var docEl = document.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { //自适应设置容器高度 var container = document.querySelector(".container") //原始比例 var proportion = 900 / 1440; container.style.height = container.clientWidth * proportion + "px"; }; window.addEventListener(resizeEvt, recalc, false); document.addEventListener('DOMContentLoaded', recalc, false); </script> </html>

*{ margin: 0; padding: 0; } /*body{ width: 100%; height: 100%; }*/ .container { width: 100%; height: 100%; position: relative; overflow: hidden; } .bg-adaptive { background-size: 100% 100%; } .container .page-a { width : 100%; height : 100%; background-image: url("http://img1.sycdn.imooc.com//565d07770001790814410901.png"); position: absolute; z-index: 5; } .container .page-b { width : 100%; height : 100%; background-image: url("http://img1.sycdn.imooc.com//565d09fa000145a614410901.png"); position: absolute; z-index: 4; } .page-c { width : 100%; height : 100%; background-image: url("http://img1.sycdn.imooc.com//565d0b280001788014410901.png"); position: absolute; z-index: 3; } /** * 页面切换 * 镜头方法 */ .effect-out{ -webkit-animation: effectOut 8s ease-in-out forwards; -webkit-transform-origin:71% 72%; -moz-animation: effectOut 8s ease-in-out forwards; -moz-transform-origin:71% 72%; } .effect-in{ z-index: 15; display: block; opacity:0; -webkit-transform: scale(8); -webkit-animation: effectIn 5s ease-in-out forwards; -webkit-transform-origin:58.5% 73.5%; -moz-transform: scale(8); -moz-animation: effectIn 5s ease-in-out forwards; -moz-transform-origin:58.5% 73.5%; } /*???*/

提问题

提交

其他问答

查看更多本节问答

写笔记

公开笔记

提交

全屏

请验证，完成请求

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

4-2 镜头效果

镜头效果

任务

提问题

其他问答

写笔记

您还未绑定服务号

收藏课程后，能更快找到我哦～

手记推荐

4-2 镜头效果

热搜

最近搜索清空

镜头效果

任务

提问题

其他问答

写笔记

您还未绑定服务号

收藏课程后，能更快找到我哦～

手记推荐