css3 平滑过渡动画效果_平滑过渡的纯CSS响应式布局

css3 平滑过渡动画效果

View demo 查看演示 Download Source 下载源

In this tutorial we will create a responsive 100% width/height layout with some smooth page transitions. The idea is to have some content panels and a navigation which will allow us to navigate between the panels. We’ll use radio buttons for the navigation and animate the content to the right position with a transition, creating a “smooth scrolling” effect. This layout idea could be useful for web pages or web apps where the content should be strictly the size of the screen (width and height). Note that this is, of course, highly experimental and just a proof-of-concept.

在本教程中，我们将创建带有一些平滑页面过渡的自适应100％宽度/高度布局。 这个想法是要有一些内容面板和一个导航，这将使我们能够在面板之间导航。 我们将使用单选按钮进行导航，并通过过渡将内容动画化到正确的位置，从而创建“平滑滚动”效果。 对于内容应严格为屏幕尺寸(宽度和高度)的网页或Web应用程序，此布局想法可能很有用。 注意，这当然是高度实验性的，只是概念验证。

Please note: the result of this tutorial will only work as intended in browsers that support the respective CSS properties. 请注意：本教程的结果只能在支持各自CSS属性的浏览器中按预期工作。

Note that we will exclude vendor prefixes in this tutorial. You will, of course, find them in the files.

请注意，在本教程中我们将排除供应商前缀。 您当然会在文件中找到它们。

标记 (The Markup)

The structure will be consist of a main container with the class st-container which will contain the radio buttons and link, and the wrapper with the class st-scroll for the panels. Each panel will have some content elements:

该结构将由一个带有st-container类的主容器组成，其中将包含单选按钮和链接，以及一个带有带有st-scroll类的面板的包装器。 每个面板将具有一些内容元素：

<div class="st-container">
			
	<input type="radio" name="radio-set" checked="checked" id="st-control-1"/>
	<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>
	
	<div class="st-scroll">

		<section class="st-panel" id="st-panel-1">
			<div class="st-deco" data-icon