課程
/前端開發
/CSS3
/css3實現網頁平滑過渡效果
section元素全都在,不能全屏啊
2015-04-17
源自:css3實現網頁平滑過渡效果 2-2
正在回答
body{ font-family:?georgia,serif; background:?#ddd; font-weight:?400; font-size:?15px; color:?#333; overflow:?hidden; -webkit-font-smoothing:?antialiased;/*常用于英文字體*/ } a{ text-decoration:?none; color:?#555; } .clr{ width:?0; height:?0; overflow:?hidden; clear:?both; padding:?0; margin:?0; } .st-container{ width:?100%; height:?100%; position:?absolute; left:?0; top:?0; font-family:?"Josefin?Slab","Myriad?Pro",arial,sans-serif; } .st-container?>?input, .st-container?>?a{ width:?20%; height:?34px; line-height:?34px; position:?fixed; bottom:?0; cursor:?pointer; } .st-container?>?input{ opacity:?0; z-index:?1000; } .st-container?>?a{ z-index:?10; font-weight:?700; font-size:?16px; background:?#e23a6e; text-align:?center; color:?#fff; text-shadow:?1px?1px?1px?rgba(151,24,64,0.2); } #st-control-1,#st-control-1?+?a{ left:?0%; } #st-control-2,#st-control-2?+?a{ left:?20%; } #st-control-3,#st-control-3?+?a{ left:?40%; } #st-control-4,#st-control-4?+?a{ left:?60%; } #st-control-5,#st-control-5?+?a{ left:?80%; } .st-container?input:checked?+?a, .st-container?input:checked:hover?+?a{ background:?#821134; } .st-container?input:checked?+?a:after{ content:?""; width:?0; height:?0; overflow:?hidden; border:?20px?solid?transparent; border-bottom-color:#821134?; position:?absolute; bottom:?100%; left:?50%; margin-left:?-20px; } .st-container?input:hover?+??a{ background:?#AD244F; } .st-scroll, .st-panel{ width:?100%; position:?relative; height:?100%; left:?0%; top:?0%; } .st-scroll{ left:?0; top:0; -webkit-transform:?translate3d(0,0,0);/*在移動端建議用3D變換,因為它可以開啟手機硬件加速*/ -moz-transform:?translate3d(0,0,0); -o-transform:?translate3d(0,0,0); -ms-transform:?translate3d(0,0,0); transform:?translate3d(0,0,0); -webkit-backface-visibility:?hidden; } .st-panel{ background:?#fff; overflow:?hidden; } #st-control-1:checked?~?.st-scroll{ transform:?translateY(0%); } #st-control-2:checked?~?.st-scroll{ transform:?translateY(-100%); } #st-control-3:checked?~?.st-scroll{ transform:?translateY(-200%); } #st-control-4:checked?~?.st-scroll{ transform:?translateY(-300%); } #st-control-5:checked?~?.st-scroll{ transform:?translateY(-400%); }
舉報
CSS3 打造頁面之間的平滑過渡效果,帶來神奇的體驗
3 回答不能全屏的看這里~
2 回答不能全屏的問題有答案了嗎?
3 回答菜鳥問為什么我的不能全屏!??!
7 回答這個貌似不能全屏,高度會自適應
5 回答不能全屏這個問題 ,看完了下面所有解決方法 一個一個試了怎么我是不能全屏呢
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2015-04-20