HTML5 and CSS3-response Vertical Timeline Example

The Web page timeline is typically used to showcase events that take time as the main line, such as the company's development process, which is common to corporate websites. This article will introduce you to a beautiful vertical timeline based on HTML5 and CSS3, which responds to page layouts and applies to PC and mobile web apps developed by HTML5.

We used the HTML5 tag <section>, and all the content in the timeline, including the title, intro, Time, and image, is placed in the. Cd-timeline-block Div, multiple div form a sequence and place these div in the <section > in. Note that to see this example demo effect, you need your browser to support HTML5 and CSS3.

The code is as follows

Copy Code

<section id= "Cd-timeline" class= "Cd-container" > <div class= "Cd-timeline-block" > <div class= "Cd-timeline-img cd-picture" > </div> <div class= "Cd-timeline-content" > &LT;H2&GT;HTML5+CSS3-Implemented response vertical time axis The <p> Web timeline is typically used to show time-centered events, such as the company's development process, which is common to corporate websites. This article will introduce you to a beautiful vertical timeline based on HTML5 and CSS3, which responds to page layouts and applies to PC and mobile web apps developed by HTML5. </p> <a href= "class=" Cd-read-more target= "_blank" > read the full text </a> <span class= "Cd-date" >2015-01-06</span> </div> </div> <div class= "Cd-timeline-block" > ... </div>

</div>
This example uses an SVG image as an icon, and you can also change to a png,gif format image.

CSS Code

We use: Before pseudo class to create a vertical line in front of the timeline #cd-timeline, the contents of each node of the timeline are based on this vertical line.

The code is as follows	Copy Code
#cd-timeline { position:relative; Padding:2em 0; Margin-top:2em; Margin-bottom:2em; } #cd-timeline::before { Content: '; Position:absolute; top:0; left:18px; height:100%; width:4px; Background: #d7e4ed; }

Well, what we're going to do next is, adjusts the layout of the timeline based on the size of the user's browser window, when the browser window is very large, the contents of each node of the timeline are distributed on both sides of the vertical line (the vertical line is centered), and when the browser window is small enough to be viewed as a mobile phone, a vertical screen The contents of each node of the timeline are arranged on the right side of the vertical line (perpendicular line to left), which is commonly called the response layout.

The code is as follows

Copy Code

. cd-timeline-block { position:relative; Margin:2em 0; } . cd-timeline-block:after { Content: ""; display:table; Clear:both; } . cd-timeline-block:first-child { margin-top:0; } . cd-timeline-block:last-child { margin-bottom:0; } @media only screen and (min-width:1170px) { . Cd-timeline-block:nth-child (even). cd-timeline-content { Float:right; } . Cd-timeline-block:nth-child (even). Cd-timeline-content::before { top:24px; Left:auto; right:100%; Border-color:transparent; Border-right-color:white; } . Cd-timeline-block:nth-child (even). Cd-timeline-content. Cd-read-more { Float:right; } . Cd-timeline-block:nth-child (even). Cd-timeline-content. cd-date { Left:auto; right:122%; Text-align:right; } }

In CSS3, you can use @media to determine the screen size of the device and to perform different CSS styles depending on the size. This example is also used in the shadow of the CSS3, rounded corners and other effects, the text is no longer detailed, you can refer to a lot of online on the CSS3 basic tutorials, you can download the source package directly, this example of the CSS all sorted in the Style.css file. Of course you can also use JS and CSS3 on the basis of this example to add some transition animation to the timeline, the effect may be better.