                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /CSS3
                        
                        /css3實(shí)現(xiàn)網(wǎng)頁(yè)平滑過(guò)渡效果

無(wú)法實(shí)現(xiàn)切換

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

}

這個(gè)代碼沒(méi)有問(wèn)題，卻無(wú)法實(shí)現(xiàn)切換，求解

KIKI_思

2016-04-18

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

關(guān)注問(wèn)題我要回答

1173

操作

收起

2 回答

XuanKong
2017-02-10

我測(cè)試了一下，當(dāng)設(shè)為3s時(shí)明顯感覺(jué)有緩沖，3s以下感覺(jué)還是很快，看不出明顯的緩沖效果，至少我的是這樣，

.st-scroll{
????left:0;
????top:0;
????/*css-3d*/
????transform:?translate3d(0,0,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);
????-webkit-backface-visibility:hidden;
????/*過(guò)渡?*/
????transition:transform?2s?ease-in-out;
????-webkit-transition:transform?2s?ease-in-out;
????-ms-transition:transform?2s?ease-in-out;
????-moz-transition:transforms?2s?ease-in-out;
????-o-transition:transform?2s?ease-in-out;
????}