課程
/前端開發(fā)
/CSS3
/css3實(shí)現(xiàn)網(wǎng)頁平滑過渡效果
section元素全都在,不能全屏啊
2015-04-17
源自:css3實(shí)現(xiàn)網(wǎng)頁平滑過渡效果 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);/*在移動(dòng)端建議用3D變換,因?yàn)樗梢蚤_啟手機(jī)硬件加速*/ -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%); }
舉報(bào)
CSS3 打造頁面之間的平滑過渡效果,帶來神奇的體驗(yàn)
3 回答不能全屏的看這里~
2 回答不能全屏的問題有答案了嗎?
3 回答菜鳥問為什么我的不能全屏?。?!
7 回答這個(gè)貌似不能全屏,高度會(huì)自適應(yīng)
5 回答不能全屏這個(gè)問題 ,看完了下面所有解決方法 一個(gè)一個(gè)試了怎么我是不能全屏呢
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號(hào)-11 京公網(wǎng)安備11010802030151號(hào)
購課補(bǔ)貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動(dòng)學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號(hào)
2015-04-20