                        课程
                    
                        /前端开发
                        
                            /CSS3
                        
                        /css3实现网页平滑过渡效果

求大神指点迷津！！！！为什么.st-scroll已经设置width100%，height100%，然后最后会是st-scroll来移动啊？？？？

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

}

慕斯3035540

2016-09-04

源自：css3实现网页平滑过渡效果 2-3

关注问题我要回答

959

操作

收起

3 回答

冷月诗魂
2017-10-23

transition: all 0.6s ease-in-out;这个是过渡效果，且.st-scroll在对应的ID#st-control-1（2/3/4/5）下都设置了transform: translateY(0%); （-100、-200、-300、-400）
然后你把body里的overflow:hidden删掉，运行一次，还不懂你就把style.css里的overflow:hidden全删掉，老师写这个属性写了很多，我懒得去找了，你若是还不懂...那只能说明你对CSS3的动画属性不是很熟。。有待加强