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 test.html file and the timeline.css file. The specific code is as follows:

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