为了账号安全，请及时绑定邮箱和手机立即绑定

课程

/前端开发

/CSS3

/css3实现网页平滑过渡效果

为什么我给st_panel加入背景色，他把底部的导航给覆盖掉了，按理说给底部导航加了z-index不可能被覆盖啊，又遇到这种情况的吗？希望大神来知道，很急

http://img1.sycdn.imooc.com//553898f30001243c09280713.jpg

@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{/*  '+'号只匹配紧跟在元素之后的内容  比如：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%;

}



/*内容*/

.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) ;/*位置移动要放在旋转的后面，*/

-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);

}/*大三角区域*/


.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实现网页平滑过渡效果  2-3

关注问题 我要回答
1472
操作
收起

正在回答

2 回答

qq_o朩孒雪o_0
2017-05-09

我也是这个问题，你解决了吗？

0 回复 有任何疑惑可以回复我~
收起回答
慕设计2377779
2016-04-06

可能你div的层次没弄对

0 回复 有任何疑惑可以回复我~
收起回答

举报

0/150
提交
取消
css3实现网页平滑过渡效果
  • 参与学习       54371    人
  • 解答问题       372    个

CSS3 打造页面之间的平滑过渡效果，带来神奇的体验

进入课程

本课相似问答

2 回答把导航给盖住怎么回事？急急急急急急。。

1 回答底部导航栏

2 回答底部导航问题？

1 回答底部导航设置

1 回答我已经设置了bottom:0;为什么我的导航栏不能放到底部？
搜索更多本课相关问答

为什么我给st_panel加入背景色，他把底部的导航给覆盖掉了，按理说给底部导航加了z-index不可能被覆盖啊，又遇到这种情况的吗？希望大神来知道，很急

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信