                        課程
                    
                        /前端開發(fā)
                        
                            /CSS3
                        
                        /css3實現(xiàn)網(wǎng)頁平滑過渡效果

為什么我給st_panel加入背景色，他把底部的導航給覆蓋掉了，按理說給底部導航加了z-index不可能被覆蓋啊，又遇到這種情況的嗎？希望大神來知道，很急

@charset "utf-8";

/* CSS Document */

@font-face{

font-family:"Raphaelicons";

src:url(../fonts/raphaelicons-webfont.eot) format('eot'),

url(../fonts/raphaelicons-webfont.svg) format('svg'),

url(../fonts/raphaelicons-webfont.ttf) format('ttf'),

url(../fonts/raphaelicons-webfont.woff) format('woff');

}

body,ul,li,p,h1,h2,h3,h4{ margin:0; padding:0}

body{ font-family:Georgia, serif; font-size:15px; font-weight:400; color:#333; overflow:hidden;font-smoothing:anitialiased/*消除鋸齒*/}?

a{ color:#CCC; text-decoration:none}

.st_containner{

width:100%;?

height:100%;

position:absolute;

left:0;

bottom:0;

font-family:Georgia, "Times New Roman", Times, serif;

}

.st_containner > input,.st_containner > a{?

float:left;?

width:20%;?

height:35px;?

line-height:35px;

position:fixed;

bottom:0;

}

.st_containner input{?

z-index:1000;

opacity:0;

cursor:pointer;

}

.st_containner input ~ a{?

background-color:#F36;?

color:#fff;

font-weight:bold;?

font-size:16px;

text-align:center;

text-shadow:1px 1px 1px rgba(0,0,0,0.3);

}

.st_containner input:checked + a,.st_containner input:checked:hover + a{/* ?'+'號只匹配緊跟在元素之后的內(nèi)容 ?比如：input和a，a只在input的后面這是候給a加樣式時可以用‘+’號 */

background-color:#C03;

}

.st_containner input:checked + a:after{

content:"";

width:0;

height:0;

overflow:hidden;

border:20px solid transparent;

border-bottom-color:#C03;/*本行與上面一行制作出一個三角形*/

position:absolute;

left:50%;

bottom:100%;

margin-left:-20px;

}

.st_containner input:hover + a{

background-color:#b32045;

}

#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%;

}

/*內(nèi)容*/

.st_scroll,

.st_panel{

width:100%;

height:100%;

position:relative;

z-index:1;

}

.st_scroll{

left:0;

top:0;

-webkit-transform:translate3d(0,0,0);

-o-transform:translate3d(0,0,0);

-ms-transform:translate3d(0,0,0);

-mos-transform:translate3d(0,0,0);

transform:translate3d(0,0,0);

-webkit-backface-visibility:hidden;/*不面向屏幕時讓他隱藏*/

-webkit-transition:all 0.6s ease-in-out ;

-moz-transition:all 0.6s ease-in-out ;

-o-transition:all 0.6s ease-in-out ;

-ms-transition:all 0.6s ease-in-out ;

transition:all 0.6s ease-in-out ;

}

.st_panel{

overflow:hidden;

zoom:1;

}

#st_control_1:checked ~ .st_scroll{

-webkit-transform:translateY(0%);

-moz-transform:translateY(0%);

-o-transform:translateY(0%);

-ms-transform:translateY(0%);

transform:translateY(0%);

}

#st_control_2:checked ~ .st_scroll{

-webkit-transform:translateY(-100%);

-moz-transform:translateY(-100%);

-o-transform:translateY(-100%);

-ms-transform:translateY(-100%);

transform:translateY(-100%);

}

#st_control_3:checked ~ .st_scroll{

-webkit-transform:translateY(-200%);

-moz-transform:translateY(-200%);

-o-transform:translateY(-200%);

-ms-transform:translateY(-200%);

transform:translateY(-200%);

}

#st_control_4:checked ~ .st_scroll{

-webkit-transform:translateY(-300%);

-moz-transform:translateY(-300%);

-o-transform:translateY(-300%);

-ms-transform:translateY(-300%);

transform:translateY(-300%);

}

#st_control_5:checked ~ .st_scroll{

-webkit-transform:translateY(-400%);

-moz-transform:translateY(-400%);

-o-transform:translateY(-400%);

-ms-transform:translateY(-400%);

transform:translateY(-400%);

}

.st_desc{

width:200px;?

height:200px;

background-color:#F36;

position:absolute;

left:50%;

top:0px;

margin-left:-100px;

-webkit-transform:translateY(-50%) rotate(45deg) ;/*位置移動要放在旋轉(zhuǎn)的后面，*/

-moz-transform:translateY(-50%) rotate(45deg) ;

-o-transform:translateY(-50%) rotate(45deg) ;

-ms-transform:translateY(-50%) rotate(45deg) ;

transform:translateY(-50%) rotate(45deg) ;

text-shadow:1px 1px 1px rgba(0,0,0,0.5);

}/*大三角區(qū)域*/

.st_color{ }

[data-icon]:after{

content:attr(data-icon);/*設置*/

width:200px;

height:200px;

position:absolute;

left:50%;

top:50%;

text-align:center;

line-height:200px;

font-size:90px;

color:#fff;

-webkit-transform:rotate(-45deg) translateY(-40%);

-moz-transform:rotate(-45deg) translateY(-40%);

-o-transform:rotate(-45deg) translateY(-40%);

-ms-transform:rotate(-45deg) translateY(-40%);

transform:rotate(-45deg) translateY(-40%);

font-family:"Raphaelicons";

}

.st_panel h2{

padding:10px 0;?

font-size:40px;

text-align:center;

color:#F36;

width:80%;

position:absolute;

left:10%;

top:30%;

font-size:54px;

font-weight:bold;

text-shadow:1px 1px 1px rgba(0,0,0,0.6);

}

#st_control_1:checked ~ .st_scroll #st_panel_1 ?h2,

#st_control_2:checked ~ .st_scroll #st_panel_2 ?h2,

#st_control_3:checked ~ .st_scroll #st_panel_3 ?h2,

#st_control_4:checked ~ .st_scroll #st_panel_4 ?h2,

#st_control_5:checked ~ .st_scroll #st_panel_5 ?h2{

-webkit-animation:moveDown 0.6s ease-in-out 0.2s backwards;/*backwords=停留在當前位置 */

-o-animation:moveDown 0.6s ease-in-out 0.2s backwards;

-moz-animation:moveDown 0.6s ease-in-out 0.2s backwards;

-ms-animation:moveDown 0.6s ease-in-out 0.2s backwards;

animation:moveDown 0.6s ease-in-out 0.2s backwards;

}

@-webkit-keyframes moveDown{

0%{ -webkit-transform:translateY(-40px);

opacity:0;}

100%{

-webkit-transform:translateY(0px);

opacity:1;}

}

@-moz-keyframes moveDown{

0%{ -moz-transform:translateY(-40px);

opacity:0;}

100%{

-moz-transform:translateY(0px);

opacity:1;}

}

@-o-keyframes moveDown{

0%{ -o-transform:translateY(-40px);

opacity:0;}

100%{

-o-transform:translateY(0px);

opacity:1;}

}

@-ms-keyframes moveDown{

0%{ -ms-transform:translateY(-40px);

opacity:0;}

100%{

-ms-transform:translateY(0px);

opacity:1;}

}

@keyframes moveDown{

0%{ transform:translateY(-40px);

opacity:0;}

100%{

transform:translateY(0px);

opacity:1;}

}

.st_panel p{ width:50%;

position:absolute;

left:25%;

top:45%;

text-align:center;

color:#666;

text-shadow:1px 1px 1px rgba(0,0,0,0.2)}

#st_control_1:checked ~ .st_scroll #st_panel_1 ?p,

#st_control_2:checked ~ .st_scroll #st_panel_2 ?p,

#st_control_3:checked ~ .st_scroll #st_panel_3 ?p,

#st_control_4:checked ~ .st_scroll #st_panel_4 ?p,

#st_control_5:checked ~ .st_scroll #st_panel_5 ?p{

-webkit-animation:moveUp 0.6s ease-in-out 0.2s backwards;/*backwords=停留在當前位置 */

-o-animation:moveUp 0.6s ease-in-out 0.2s backwards;

-moz-animation:moveUp 0.6s ease-in-out 0.2s backwards;

-ms-animation:moveUp 0.6s ease-in-out 0.2s backwards;

animation:moveUp 0.6s ease-in-out 0.2s backwards;

}

@-webkit-keyframes moveUp{

0%{-webkit-transform:translateY(40px);

opacity:0;}

100%{-webkit-transform:translateY(0);

opacity:1}

}?

@-moz-keyframes moveUp{

0%{-moz-transform:translateY(40px);

opacity:0;}

100%{-moz-transform:translateY(0);

opacity:1}

}?

@-o-keyframes moveUp{

0%{-o-transform:translateY(40px);

opacity:0;}

100%{-o-transform:translateY(0);

opacity:1}

}?

@-ms-keyframes moveUp{

0%{-ms-transform:translateY(40px);

opacity:0;}

100%{-ms-transform:translateY(0);

opacity:1}

}?

@keyframes moveUp{

0%{transform:translateY(40px);

opacity:0;}

100%{transform:translateY(0);

opacity:1}

}?

慕的地9598177

2015-04-23

源自：css3實現(xiàn)網(wǎng)頁平滑過渡效果 2-3

關注問題我要回答

1504

操作

收起

2 回答

qq_o朩孒雪o_0
2017-05-09

我也是這個問題，你解決了嗎？

0 回復有任何疑惑可以回復我~

收起回答

慕設計2377779
2016-04-06

可能你div的層次沒弄對

0 回復有任何疑惑可以回復我~

收起回答

舉報

0/150

提交

取消

css3實現(xiàn)網(wǎng)頁平滑過渡效果

參與學習 54370 人
解答問題 388 個

CSS3 打造頁面之間的平滑過渡效果，帶來神奇的體驗

進入課程

本課相似問答

2 回答把導航給蓋住怎么回事？急急急急急急。。

1 回答底部導航欄

2 回答底部導航問題？

1 回答底部導航設置

1 回答我已經(jīng)設置了bottom:0;為什么我的導航欄不能放到底部？

搜索更多本課相關問答

為什么我給st_panel加入背景色，他把底部的導航給覆蓋掉了，按理說給底部導航加了z-index不可能被覆蓋啊，又遇到這種情況的嗎？希望大神來知道，很急

我要回答關注問題

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

微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號

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

熱搜

最近搜索清空

為什么我給st_panel加入背景色，他把底部的導航給覆蓋掉了，按理說給底部導航加了z-index不可能被覆蓋啊，又遇到這種情況的嗎？希望大神來知道，很急

2 回答

本課相似問答

為什么我給st_panel加入背景色，他把底部的導航給覆蓋掉了，按理說給底部導航加了z-index不可能被覆蓋啊，又遇到這種情況的嗎？希望大神來知道，很急

為什么我給st_panel加入背景色，他把底部的導航給覆蓋掉了，按理說給底部導航加了z-index不可能被覆蓋啊，又遇到這種情況的嗎？希望大神來知道，很急

為什么我給st_panel加入背景色，他把底部的導航給覆蓋掉了，按理說給底部導航加了z-index不可能被覆蓋啊，又遇到這種情況的嗎？希望大神來知道，很急