Timeline implementation method based on ccs3
|
In web projects we often use the timeline control. This article provides a CSS3-based timeline that can be expanded item by item. Text, pictures, videos and other elements can be embedded in each expanded item. The operation effect is as follows:
accomplish The implementation process of this control is relatively simple, and it mainly consists of the 1. test.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="timeline.css"/>
<title>Timeline</title>
</head>
<body>
<div id='timeDiv'>
<ul id='timeline'>
<li class='work'>
<input class='radio' id='work1' name='works' type='radio' checked>
<div class="relative">
<label for='work1'>1. Title 1</label>
<span class='date'>T1</span>
<span class='circle'></span>
</div>
<div class='content'>
<p>
In the first year of Chang'an (701), Li Bai, whose courtesy name was Taibai. It is generally believed that his birthplace is Qinglian Township, Changlong (later changed to Changming to avoid the taboo of Emperor Xuanzong), Mianzhou (Baixi County), Jiannan Road in the Tang Dynasty. His ancestral home is Tianshui, Gansu.
His family background and family are unknown. According to the "New Book of Tang", Li Bai was the ninth-generation grandson of Emperor Xingsheng (Li Hao, King Wuzhao of Liang). According to this statement, Li Bai was of the same clan as the kings of the Li Tang Dynasty and was a cousin of Emperor Taizong of Tang, Li Shimin.
Some also say that his ancestor was Li Jiancheng or Li Yuanji.
</p>
<p><img src="http://i.qulishi.com/UploadFile/2014-7/2014725171362.jpg" /></p>
</div>
</li>
<li class='work'>
<input class='radio' id='work2' name='works' type='radio'>
<div class="relative">
<label for='work2'>2. Title 2</label>
<span class='date'>T2</span>
<span class='circle'></span>
</div>
<div class='content'>
<p>
In November of the first year of Shenlong (705), Wu Zetian died. Li Bai was five years old. This was the year I began to learn to read.
"Letter to Pei Changshi of Anzhou" says: "I recited Liujia at the age of five." Liujia is a primary school literacy textbook in the Tang Dynasty. Changshi is the second-in-command of a prefecture.
</p>
</div>
</li>
<li class='work'>
<input class='radio' id='work3' name='works' type='radio'>
<div class="relative">
<label for='work3'>3. Title 3</label>
<span class='date'>T3</span>
<span class='circle'></span>
</div>
<div class='content'>
<p>
In the third year of Kaiyuan (715), Li Bai was fifteen years old.
He had already written many poems and received the praise and support of some celebrities, and began to engage in social activities.
He also began to be influenced by Taoist thought, became fond of swordsmanship, and enjoyed being a knight-errant. That year Cen Shen was born.
</p>
</div>
</li>
<li class='work'>
<input class='radio' id='work4' name='works' type='radio'>
<div class="relative">
<label for='work4'>4. Title 4</label>
<span class='date'>T4</span>
<span class='circle'></span>
</div>
<div class='content'>
<p>
In the sixth year of Kaiyuan (718), Li Bai was eighteen years old.
He lived in seclusion in Dakuang Mountain in Daitian (now in Jiangyou City, Sichuan Province) to study.
He traveled to neighboring counties, and visited Jiangyou, Jiange, Zizhou (the prefecture capital was in present-day Sichuan Province), etc., which gained him a lot of experience and knowledge.
</p>
</div>
</li>
</ul>
</div>
</body>
</html>2. timeline.css file
#timeDiv{
max-width: 1200px;
margin: 0 auto;
padding: 0 5%;
font-size: 100%;
font-family: "Noto Sans", sans-serif;
color: black;
background: white;
}
/* -------------------------------------
* timeline
* ------------------------------------- */
#timeline {
list-style: none;
margin: 50px 0 30px 120px;
padding-left: 30px;
border-left: 8px solid gray;
}
#timeline li {
margin: 40px 0;
position: relative;
}
#timeline p {
margin: 0 0 15px;
}
.date {
margin-top: -10px;
top: 50%;
left: -80px;
font-size: 0.95em;
line-height: 20px;
position: absolute;
}
.circle {
margin-top: -15px;
top: 50%;
left: -49px;
width: 20px;
height: 20px;
background: white;
border: 5px solid gray;
border-radius: 50%;
display: block;
position: absolute;
}
.content {
max-height: 20px;
padding: 70px 20px 0;
border-color: transparent;
border-width: 2px;
border-style: solid;
border-radius: 0.5em;
position: relative;
}
.content:before, .content:after {
content: "";
width: 0;
height: 0;
border: solid transparent;
position: absolute;
pointer-events: none;
right: 100%;
}
.content:before {
border-right-color: inherit;
border-width: 20px;
top: 50%;
margin-top: -20px;
}
.content:after {
border-right-color: white;
border-width: 17px;
top: 50%;
margin-top: -17px;
}
.content p {
max-height: 0;
color: transparent;
text-align: justify;
word-break: break-word;
hyphens: auto;
overflow: hidden;
}
label {
font-size: 1.3em;
position: absolute;
z-index: 100;
cursor: pointer;
top: 35px;
transition: transform 0.2s linear;
font-weight: bold;
}
.radio {
display: none;
}
.radio:checked + .relative label {
cursor: auto;
transform: translateX(42px);
}
.radio:checked + .relative .circle {
background: red;
}
.radio:checked ~ .content {
max-height: 200000px;
border-color: lightgray;
margin-right: 20px;
transform: translateX(20px);
transition: max-height 0.4s linear, border-color 0.5s linear, transform 0.2s linear;
}
.radio:checked ~ .content p {
max-height: 200000px;
color: black;
transition: color 0.3s linear 0.3s;
}
/* -------------------------------------
* mobile phones (vertical version only)
* ------------------------------------- */
@media screen and (max-width: 767px) {
#timeline {
margin-left: 0;
padding-left: 0;
border-left: none;
}
#timeline li {
margin: 50px 0;
}
label {
width: 85%;
font-size: 1.1em;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: block;
transform: translateX(18px);
}
.content {
padding-top: 60px;
border-color: #eee9dc;
}
.content:before, .content:after {
border: solid transparent;
bottom: 100%;
}
.content:before {
border-bottom-color: inherit;
border-width: 17px;
top: -16px;
left: 50px;
margin-left: -17px;
}
.content:after {
border-bottom-color: white;
border-width: 20px;
top: -20px;
left: 50px;
margin-left: -20px;
}
.content p {
font-size: 0.9em;
line-height: 1.4;
}
.circle, .date {
display: none;
}
}【References】 CSS3 TIMELINE This is the end of this article about the timeline implementation method based on ccs3. For more relevant css3 timeline implementation content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future! |
<<: An article to understand the creation, uploading, pulling and deployment of Docker images
>>: Specific use of Node.js package manager npm
Recommend
The JS hasOwnProperty() method detects whether a property is an object's own property.
The JavaScript hasOwnProperty() method is the pro...
A commonplace technique for implementing triangles using CSS (multiple methods)
In some interview experiences, you can often see ...
MySQL 5.7.18 MSI Installation Graphics Tutorial
This article shares the MySQL 5.7.18 MSI installa...
Sample code for implementing a background gradient button using div+css3
As the demand for front-end pages continues to in...
js realizes a gradually increasing digital animation
Table of contents background Achieve a similar ef...
Basic Implementation of AOP Programming in JavaScript
Introduction to AOP The main function of AOP (Asp...
Solution to the failure of MySQL service startup during MySQL 5.7.18 installation
MySQL is a very powerful relational database. How...
Example analysis of mysql variable usage [system variables, user variables]
This article uses examples to illustrate the usag...
VMware virtual machine to establish HTTP service steps analysis
1. Use xshell to connect to the virtual machine, ...
A brief discussion on the semantics of HTML and some simple optimizations
1. What is semanticization? Explanation of Bing D...
Detailed explanation of the misunderstanding between MySQL and Oracle
Table of contents Essential Difference Database s...
Summary of Common Letters in Unicode
Most of the earliest computers could only use ASC...
JavaScript to implement simple carousel chart most complete code analysis (ES5)
This article shares the specific code for JavaScr...
A brief discussion on MySQL count of rows
We are all familiar with the MySQL count() functi...
Detailed explanation of the 14 common HTTP status codes returned by the server
HTTP Status Codes The status code is composed of ...