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

無法實現(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%);

}

這個代碼沒有問題，卻無法實現(xiàn)切換，求解

KIKI_思

2016-04-18

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

關注問題我要回答

1152

操作

收起

2 回答

XuanKong
2017-02-10

我測試了一下，當設為3s時明顯感覺有緩沖，3s以下感覺還是很快，看不出明顯的緩沖效果，至少我的是這樣，

.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;
????/*過渡?*/
????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;
????}