4-2 镜头效果
本节编程练习不计算学习进度，请电脑登录imooc.com操作

镜头效果

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

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

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变化，并且图片还原到原始尺寸

index.htmlcommon.css 
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  6.     <title>圣诞主题</title>
  7.     <link rel='stylesheet' href='common.css' />
  8.     <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
  9. </head>
  10.  
  11. <body>
  12.     <section class="container">
  13.         <!-- 第一幅画面 -->
  14.         <section class="page-a bg-adaptive">
  15.         </section>
  16.         <!-- 第二幅画面 -->
  17.         <section class="page-b bg-adaptive">
  18.         </section>
  19.         <!-- 第三幅画面 -->
  20.         <section class="page-c bg-adaptive">
  21.         </section>
  22.     </section>
  23.     选择页面：
  24.     <select id="page">
  25.         <option value="page-a" selected="">1</option>
  26.         <option value="page-b">2</option>
  27.         <option value="page-c">3</option>
  28.     </select>
  29. </body>
  30. <script type="text/javascript">
  31.  
  32.  
  33. //切换切换
  34. document.querySelector("#page").addEventListener("change", function(e) {
  35.     //页面名称
  36.     var pageName =  e.target.value;
  37.     switch (pageName) {
  38.         case "page-b":
  39.             //切换到b页面，所以需要在当前a页面执行动画
  40.             //让元素慢慢放大，所以需呀控制a元素
  41.             $(".page-a").addClass("effect-out")
  42.             break;
  43.         case "page-c":
  44.             //切换到c页面，所以需要在目标c页面执行动画
  45.             //因为让要c页面先放大，然后缩小
  46.             $(".page-c").addClass("effect-in")
  47.             break;
  48.     }
  49.  
  50. }, false)
  51.  
  52.  
  53.  
  54. /**
  55.  * 自适应页面大小
  56.  * @param  {[type]} doc [description]
  57.  * @param  {[type]} win [description]
  58.  * @return {[type]}     [description]
  59.  */
  60. var docEl = document.documentElement,
  61.     resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
  62.     recalc = function() {
  63.         //自适应设置容器高度
  64.         var container = document.querySelector(".container")
  65.             //原始比例
  66.         var proportion = 900 / 1440;
  67.         container.style.height = container.clientWidth * proportion + "px";
  68.     };
  69. window.addEventListener(resizeEvt, recalc, false);
  70. document.addEventListener('DOMContentLoaded', recalc, false);
  71.  
  72.  
  73.  
  74. </script>
  75.  
  76. </html>
  77.  
  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4. }
  5.  
  6. /*body{
  7.     width: 100%;
  8.     height: 100%;
  9. }*/
  10.  
  11. .container {
  12.     width: 100%;
  13.     height: 100%;
  14.     position: relative;
  15.     overflow: hidden;
  16. }
  17.  
  18. .bg-adaptive {
  19.     background-size: 100% 100%;
  20. } 
  21.  
  22. .container .page-a {
  23.     width  : 100%;
  24.     height : 100%;
  25.     background-image: url("http://img1.sycdn.imooc.com//565d07770001790814410901.png");
  26.     position: absolute;
  27.     z-index: 5;
  28. }
  29.  
  30. .container .page-b {
  31.     width  : 100%;
  32.     height : 100%;
  33.     background-image: url("http://img1.sycdn.imooc.com//565d09fa000145a614410901.png");
  34.     position: absolute;
  35.     z-index: 4;
  36. }
  37.  
  38. .page-c {
  39.     width  : 100%;
  40.     height : 100%;
  41.     background-image: url("http://img1.sycdn.imooc.com//565d0b280001788014410901.png");
  42.     position: absolute;
  43.     z-index: 3;
  44. }
  45.  
  46.  
  47.  
  48.  
  49. /**
  50.  * 页面切换
  51.  * 镜头方法
  52.  */
  53. .effect-out{
  54.     -webkit-animation: effectOut 8s ease-in-out forwards;
  55.     -webkit-transform-origin:71% 72%;
  56.     -moz-animation: effectOut 8s ease-in-out forwards;
  57.     -moz-transform-origin:71% 72%;
  58. }
  59.  
  60. .effect-in{
  61.     z-index: 15;
  62.     display: block;
  63.     opacity:0;
  64.     -webkit-transform: scale(8); 
  65.     -webkit-animation: effectIn 5s ease-in-out forwards;
  66.     -webkit-transform-origin:58.5% 73.5%;
  67.     -moz-transform: scale(8); 
  68.     -moz-animation: effectIn 5s ease-in-out forwards;
  69.     -moz-transform-origin:58.5% 73.5%;
  70. }
  71. /*???*/
  72.  
  73.  
  74.  
下一节