課程
/前端開發(fā)
/CSS3
/css3實現(xiàn)網(wǎng)頁平滑過渡效果
為什么我的滾動條只要一隱藏就不能切換了,滾動條顯示的話就一切正常??
2017-08-16
源自:css3實現(xiàn)網(wǎng)頁平滑過渡效果 2-3
正在回答
#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-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%;
舉報
CSS3 打造頁面之間的平滑過渡效果,帶來神奇的體驗
2 回答不知道為什么不能切換
1 回答為什么我的不能切換??
2 回答為什么360瀏覽器不能切換,在谷歌里面切換沒有那個滑動效果
1 回答為什么切換的時候這樣寫不能實現(xiàn)
2 回答頁面切換失敗
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網(wǎng)安備11010802030151號
購課補貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動學習伙伴
掃描二維碼關注慕課網(wǎng)微信公眾號
2017-08-29
#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%);
}
2017-08-29
#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%;
}