日韩精品资源2025,伊人久久大香线蕉av网站

4-2 鏡頭效果
收藏

第1章效果預(yù)覽與介紹
視頻：1-1 課程簡介(03:16)

第2章設(shè)計(jì)思路與蘊(yùn)涵的知識點(diǎn)
視頻：2-1 整體介紹(01:40)
視頻：2-2 編程思路(02:15)

第8章最終效果與總結(jié)
編程：8-1 最終效果與總結(jié)

鏡頭效果

在圣誕主題中切換方式上采用了鏡頭式的拉伸方式

看似高大上其實(shí)原理很簡單，無非就是把頁面給縮小方法，然后附帶一些改變透明度的效果

CSS3增加了很多新的屬性，其中有一個(gè)變形（transform）的scale屬性可以針對元素進(jìn)行縮放

例如：讓一個(gè)元素放大2倍，注意瀏覽器兼容加前綴

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

就這樣簡單的給元素賦予css屬性就可以了

變化的方式有了，如果讓其運(yùn)動呢？

特別注意：transform只是一個(gè)靜態(tài)屬性，它并不能讓元素進(jìn)行運(yùn)動變化

這里繼續(xù)引入css3的animation動畫，通過animation與transform配合就能達(dá)到鏡頭的效果，參考代碼區(qū)域common.css

一般來說都會通過對元素增加樣式的方式來調(diào)用css3動畫。在css文件中定義2個(gè)樣式，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中定義一條規(guī)則，8秒的時(shí)間運(yùn)行keyframes ，將元素透明度從1變成0，同時(shí)還要讓元素放大20倍，反之亦然

然后還要注意縮放默認(rèn)情況下是按照元素的中心位置的，有時(shí)候需要改掉這個(gè)中心x(50%) y(50%)參考點(diǎn)可以單獨(dú)設(shè)置

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

最終通過給元素element.addClass("effect-out") 讓元素產(chǎn)生鏡頭的切換效果

具體的animation與transform使用可以查閱相關(guān)資料，實(shí)際的鏡頭切換下請參考右邊的代碼的實(shí)現(xiàn)

任務(wù)

鏡頭拉伸的樣式實(shí)現(xiàn)，請?jiān)谟疫卌ommon.css代碼區(qū)域補(bǔ)充effect-out與effect-in的css3關(guān)鍵幀實(shí)現(xiàn)

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頁面，所以需要在當(dāng)前a頁面執(zhí)行動畫 //讓元素慢慢放大，所以需呀控制a元素 $(".page-a").addClass("effect-out") break; case "page-c": //切換到c頁面，所以需要在目標(biāo)c頁面執(zhí)行動畫 //因?yàn)樽屢猚頁面先放大，然后縮小 $(".page-c").addClass("effect-in") break; } }, false) /** * 自適應(yīng)頁面大小 * @param {[type]} doc [description] * @param {[type]} win [description] * @return {[type]} [description] */ var docEl = document.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { //自適應(yīng)設(shè)置容器高度 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%; } /*???*/

提問題

提交

其他問答

查看更多本節(jié)問答

寫筆記

公開筆記

提交

||

全屏

請驗(yàn)證，完成請求

由于請求次數(shù)過多，請先驗(yàn)證，完成再次請求

打開微信掃碼自動綁定

您還未綁定服務(wù)號

綁定后可得到

· 粉絲專屬優(yōu)惠福利
· 大咖直播交流干貨
· 課程更新,問題答復(fù)提醒
· 賬號支付安全提醒

使用 Ctrl+D 可將網(wǎng)站添加到書簽

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

4-2 鏡頭效果

鏡頭效果

任務(wù)

提問題

其他問答

寫筆記

您還未綁定服務(wù)號

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

手記推薦

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

4-2 鏡頭效果

熱搜

最近搜索清空

鏡頭效果

任務(wù)

提問題

其他問答

寫筆記

您還未綁定服務(wù)號

收藏課程后，能更快找到我哦～

手記推薦

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