【CSS3】页面平滑过渡

效果图：

在线预览：https://pdbn.top/uploads/2019/07/CSS3-smooth-transition-master/

HTML代码

<div class="container">

<div class="st-container">

<!-- nav begin -->

<input type="radio" name="radio-set" id="st-control-1" checked="checked">

<a href="#st-panel-1">Serendipity</a>

<input type="radio" name="radio-set" id="st-control-2">

<a href="#st-panel-2">Happiness</a>

<input type="radio" name="radio-set" id="st-control-3">

<a href="#st-panel-3">Tranquillity</a>

<input type="radio" name="radio-set" id="st-control-4">

<a href="#st-panel-4">Positivity</a>

<input type="radio" name="radio-set" id="st-control-5">

<a href="#st-panel-5">Passion</a>

<!-- nav end content begin-->

<div class="st-scroll">

<section class="st-panel" id="st-panel-1">

<div class="st-deco" data-icon="&#xe601;"></div>

<h2>Serendipity</h2>

<p>Banksy adipisicing eiusmod banh mi sed. Squid stumptown est odd future nisi, commodo mlkshk pop-up adipisicing retro.</p>

</section>

<section class="st-panel st-color" id="st-panel-2">

<div class="st-deco" data-icon="&#xe602;"></div>

<h2>Happiness</h2>

<p>Art party readymade beard labore cosby sweater culpa. Art party whatever incididunt, scenester umami polaroid tofu.</p>

</section>

<section class="st-panel" id="st-panel-3">

<div class="st-deco" data-icon="&#xe605;"></div>

<h2>Tranquillity</h2>

<p>Sint aute occaecat id vice. Post-ironic fap pork belly next level godard, id fanny pack williamsburg forage truffaut.</p>

</section>

<section class="st-panel st-color" id="st-panel-4">

<div class="st-deco" data-icon="&#xe607;"></div>

<h2>Positivity</h2>

<p>Mixtape fap leggings art party, butcher authentic farm-to-table you probably haven't heard of them do labore cosby sweater.</p>

</section>

<section class="st-panel" id="st-panel-5">

<div class="st-deco" data-icon="&#xe615;"></div>

<h2>Passion</h2>

<p>Fixie ad odd future polaroid dreamcatcher, nesciunt carles bicycle rights accusamus mcsweeney's mumblecore nulla irony.</p>

</section>

</div>

</div>

</div>

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

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

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

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

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

这里引用了iconfont做图标字体。

代码下载