在圣誕主題中切換方式上采用了鏡頭式的拉伸方式
看似高大上其實原理很簡單，無非就是把頁面給縮小方法，然后附帶一些改變透明度的效果
CSS3增加了很多新的屬性，其中有一個變形（transform）的scale屬性可以針對元素進行縮放
例如：讓一個元素放大2倍，注意瀏覽器兼容加前綴
-webkit-transform: scale(2); -moz-transform: scale(2);
就這樣簡單的給元素賦予css屬性就可以了
變化的方式有了，如果讓其運動呢？
特別注意：transform只是一個靜態(tài)屬性，它并不能讓元素進行運動變化
這里繼續(xù)引入css3的animation動畫，通過animation與transform配合就能達到鏡頭的效果，參考代碼區(qū)域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中定義一條規(guī)則，8秒的時間運行keyframes ，將元素透明度從1變成0，同時還要讓元素放大20倍， 反之亦然
然后還要注意縮放默認情況下是按照元素的中心位置的，有時候需要改掉這個中心x(50%) y(50%)參考點可以單獨設置
-webkit-transform-origin:71% 72%;
最終通過給元素element.addClass("effect-out") 讓元素產生鏡頭的切換效果
具體的animation與transform使用可以查閱相關資料，實際的鏡頭切換下請參考右邊的代碼的實現(xiàn)
鏡頭拉伸的樣式實現(xiàn)，請在右邊common.css代碼區(qū)域補充effect-out與effect-in的css3關鍵幀實現(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; }
}
請驗證，完成請求
由于請求次數(shù)過多，請先驗證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報