課程
/前端開(kāi)發(fā)
/CSS3
/css3實(shí)現(xiàn)網(wǎng)頁(yè)平滑過(guò)渡效果
代碼看著沒(méi)問(wèn)題,不知道為什么不能切換
2016-10-27
源自:css3實(shí)現(xiàn)網(wǎng)頁(yè)平滑過(guò)渡效果 2-3
正在回答
</div>
body,div,input,a{padding: 0;margin: 0}
body{
font-size: 15px;
font-weight: 400;
color: #333;
overflow: hidden;
font-smoothing:antialiased;
}
body,html{
height: 100%;
width: 100%
.containt{
width: 100%;
.head{
.head > input,.head >a{
width: 20%;
height: 40px;
line-height: 40px;
position: fixed;
bottom: 0;
text-align: center;
cursor: pointer
.head > input{
z-index: 99;
opacity: 0;
position: absolute;
.head > a{
? ? position: absolute;
z-index: 10;
font-size: 20px;
background: #e23a6e;
text-decoration: none;
color:#fff;
font-weight: 700;
text-shadow: 1px 1px 1px rgba(151,24,64,0.2)
#sub1,#sub1+a{
? ?left: 0%;
#sub2,#sub2+a{
left: 20%;
#sub3,#sub3+a{
left: 40%;
#sub4,#sub4+a{
left: 60%;
#sub5,#sub5+a{
left: 80%;
.head input:checked + a{
background: #821134
/*動(dòng)態(tài)生成小三角*/
.head input:checked + a:after{
content: "";
height: 0;
width: 0;
border: 20px solid transparent;
border-bottom-color:#821134;?
bottom:100%;
left: 50%;
margin-left: -20px
.panelct,.panel{
? ? width: 100%;
? ? height: 100%;
? ? position: relative;
.panelct{
left: 0;
top:0;
-webkit-transform: translate3d(0,0,0);
-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;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
.panel{
background: #fff;
#sub1:checked ~ .panelct{
-webkit-transform: translateY(0%);
-moz-transform: translateY(0%);
-o-transform: translateY(0%);
-ms-transform: translateY(0%);
transform: translateY(0%);
#sub2:checked ~ .panelct{
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-o-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
#sub3:checked ~ .panelct{
-webkit-transform: translateY(-200%);
-moz-transform: translateY(-200%);
-o-transform: translateY(-200%);
-ms-transform: translateY(-200%);
transform: translateY(-200%);
#sub4:checked ~ .panelct{
-webkit-transform: translateY(-300%);
-moz-transform: translateY(-300%);
-o-transform: translateY(-300%);
-ms-transform: translateY(-300%);
transform: translateY(-300%);
#sub5:checked ~ .panelct{
-webkit-transform: translateY(-400%);
-moz-transform: translateY(-400%);
-o-transform: translateY(-400%);
-ms-transform: translateY(-400%);
transform: translateY(-400%);
代碼了??
慕運(yùn)維4918896 提問(wèn)者
舉報(bào)
CSS3 打造頁(yè)面之間的平滑過(guò)渡效果,帶來(lái)神奇的體驗(yàn)
1 回答為什么我的不能切換??
2 回答不能切換!!
1 回答為什么切換的時(shí)候這樣寫(xiě)不能實(shí)現(xiàn)
2 回答為什么360瀏覽器不能切換,在谷歌里面切換沒(méi)有那個(gè)滑動(dòng)效果
9 回答為什么我的沒(méi)有切換
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號(hào)-11 京公網(wǎng)安備11010802030151號(hào)
購(gòu)課補(bǔ)貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動(dòng)學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號(hào)
2016-10-27
<div class="head">
<input type="radio" name="sub_nav" id="sub1" checked="checked"><a href="#navct1">SUNDAY</a>
<input type="radio" name="sub_nav" id="sub2"><a href="#navct2">FRIDAY</a>
<input type="radio" name="sub_nav" id="sub3"><a href="#navct3">MONDAY</a>
<input type="radio" name="sub_nav" id="sub4"><a href="#navct4">SATARDAY</a>
<input type="radio" name="sub_nav" id="sub5"><a href="#navct5">febraday</a>
? ? ? ?</div>
? ? ? ?<div class="panelct">
? ? ? ?<section class="panel" id="navct1">內(nèi)容一11111111111</section>
? ? ? ?<section class="panel" id="navct2">內(nèi)容二2222222222222222222</section>
? ? ? ?<section class="panel" id="navct3">內(nèi)容三3333333333333</section>
? ? ? ?<section class="panel" id="navct4">內(nèi)容四444444444444</section>
? ? ? ?<section class="panel" id="navct5">內(nèi)容五55555555555555</section>
? ? ? ?</div>
</div>
body,div,input,a{padding: 0;margin: 0}
body{
font-size: 15px;
font-weight: 400;
color: #333;
overflow: hidden;
font-smoothing:antialiased;
}
body,html{
height: 100%;
width: 100%
}
.containt{
width: 100%;
height: 100%;
}
.head{
width: 100%;
}
.head > input,.head >a{
width: 20%;
height: 40px;
line-height: 40px;
position: fixed;
bottom: 0;
text-align: center;
cursor: pointer
}
.head > input{
z-index: 99;
opacity: 0;
position: absolute;
bottom: 0;
}
.head > a{
? ? position: absolute;
bottom: 0;
z-index: 10;
font-size: 20px;
line-height: 40px;
background: #e23a6e;
text-decoration: none;
color:#fff;
font-weight: 700;
text-shadow: 1px 1px 1px rgba(151,24,64,0.2)
}
#sub1,#sub1+a{
? ?left: 0%;
}
#sub2,#sub2+a{
left: 20%;
}
#sub3,#sub3+a{
left: 40%;
}
#sub4,#sub4+a{
left: 60%;
}
#sub5,#sub5+a{
left: 80%;
}
.head input:checked + a{
background: #821134
}
/*動(dòng)態(tài)生成小三角*/
.head input:checked + a:after{
content: "";
height: 0;
width: 0;
overflow: hidden;
border: 20px solid transparent;
border-bottom-color:#821134;?
position: absolute;
bottom:100%;
left: 50%;
margin-left: -20px
}
.panelct,.panel{
? ? width: 100%;
? ? height: 100%;
? ? position: relative;
}
.panelct{
left: 0;
top:0;
-webkit-transform: translate3d(0,0,0);
-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;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
.panel{
background: #fff;
overflow: hidden;
}
#sub1:checked ~ .panelct{
-webkit-transform: translateY(0%);
-moz-transform: translateY(0%);
-o-transform: translateY(0%);
-ms-transform: translateY(0%);
transform: translateY(0%);
}
#sub2:checked ~ .panelct{
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-o-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
}
#sub3:checked ~ .panelct{
-webkit-transform: translateY(-200%);
-moz-transform: translateY(-200%);
-o-transform: translateY(-200%);
-ms-transform: translateY(-200%);
transform: translateY(-200%);
}
#sub4:checked ~ .panelct{
-webkit-transform: translateY(-300%);
-moz-transform: translateY(-300%);
-o-transform: translateY(-300%);
-ms-transform: translateY(-300%);
transform: translateY(-300%);
}
#sub5:checked ~ .panelct{
-webkit-transform: translateY(-400%);
-moz-transform: translateY(-400%);
-o-transform: translateY(-400%);
-ms-transform: translateY(-400%);
transform: translateY(-400%);
}
2016-10-27
代碼了??