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
Solution to JS out-of-precision number problem
The most understandable explanation of the accura...
Detailed explanation of mysql5.6 master-slave setup and asynchronous issues
Table of contents 1. MySQL master-slave replicati...
JS object copying (deep copy and shallow copy)
Table of contents 1. Shallow copy 1. Object.assig...
Linux CentOS6.9 installation graphic tutorial under VMware
As a technical novice, I am recording the process...
How to quickly build a static website on Alibaba Cloud
Preface: As a junior programmer, I dream of build...
In-depth analysis of why MySQL does not recommend using uuid or snowflake id as primary key
Preface: When designing a table in MySQL, MySQL o...
Several ways to run Python programs in the Linux background
1. The first method is to use the unhup command d...
JavaScript canvas to achieve scratch lottery example
This article shares the specific code of JavaScri...
Perfect solution for vertical centering of form elements
Copy code The code is as follows: <!DOCTYPE ht...
Solution to Linux server graphics card crash
When the resolution of the login interface is par...
Tutorial on installing mysql-8.0.18-winx64 under Windows (with pictures and text)
1. Download the installation package The installa...
Seven Principles of a Skilled Designer (1): Font Design
Well, you may be a design guru, or maybe that'...
A Different Kind of "Cancel" Button
The “Cancel” button is not part of the necessary ...
A brief discussion on the design and optimization of MySQL tree structure tables
Preface In many management and office systems, tr...
Two ways to install Python3 on Linux servers
First method Alibaba Cloud and Baidu Cloud server...