css实现页面平滑切换,【CSS3】页面平滑过渡

微信订阅号：Rabbit_svip

效果图

微信订阅号：Rabbit_svip

HTML代码

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