页面平滑过渡

微信订阅号：Rabbit_svip

效果图

微信订阅号：Rabbit_svip

在线预览：https://quick-z.github.io/CSS3-smooth-transition/

        
            
            
            Serendipity
            
            Happiness
            
            Tranquillity
            
            Positivity
            
            Passion
            
            
                
                    
                    Serendipity
                    
Banksy adipisicing eiusmod banh mi sed. Squid stumptown est odd future nisi, commodo mlkshk pop-up adipisicing retro.
                
                
                    
                    Happiness
                    
Art party readymade beard labore cosby sweater culpa. Art party whatever incididunt, scenester umami polaroid tofu.
                
                
                    
                    Tranquillity
                    
Sint aute occaecat id vice. Post-ironic fap pork belly next level godard, id fanny pack williamsburg forage truffaut.
                
                
                    
                    Positivity
                    
Mixtape fap leggings art party, butcher authentic farm-to-table you probably haven't heard of them do labore cosby sweater.
                
                
                    
                    Passion
                    
Fixie ad odd future polaroid dreamcatcher, nesciunt carles bicycle rights accusamus mcsweeney's mumblecore nulla irony.
                
            
        
    

代码有点长，可以点击阅读原文下载源码看。

原理是通过单选按钮（radio）来控制选中了哪个标签。

通过radio来控制选中的样式。而这里把radio标签隐藏了，所以表面看不出有radio标签。

然后通过标签控制跳转到哪个id，也就是跳转到哪个锚点。

最后通过transition这个属性来控制过渡效果。详情可以看CSS文件。

作者：Rabbit_svip
链接：https://www.jianshu.com/p/06bbc16b7038