CSS3 實現(xiàn)時間軸動畫
發(fā)布時間：2020-11-25 17:10:13 作者：Peiwen Lu 
我要評論
我要評論這篇文章主要介紹了CSS3 實現(xiàn)時間軸動畫的示例代碼，幫助大家更好的理解和制作CSS3特效，美化網頁，感興趣的朋友可以了解下
實現(xiàn)效果
html
<h2>CSS3 Timeline</h2>
<p>Please set the $vertical variable to false to see the horizontal version.</p>
<ul id='timeline'>
<li class='work'>
<input class='radio' id='work5' name='works' type='radio' checked>
<div class="relative">
<label for='work5'>Lorem ipsum dolor sit amet</label>
<span class='date'>12 May 2013</span>
<span class='circle'></span>
</div>
<div class='content'>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio ea necessitatibus quo velit natus cupiditate qui alias possimus ab praesentium nostrum quidem obcaecati nesciunt! Molestiae officiis voluptate excepturi rem veritatis eum aliquam qui laborum non ipsam ullam tempore reprehenderit illum eligendi cumque mollitia temporibus! Natus dicta qui est optio rerum.
</p>
</div>
</li>
<li class='work'>
<input class='radio' id='work4' name='works' type='radio'>
<div class="relative">
<label for='work4'>Lorem ipsum dolor sit amet</label>
<span class='date'>11 May 2013</span>
<span class='circle'></span>
</div>
<div class='content'>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio ea necessitatibus quo velit natus cupiditate qui alias possimus ab praesentium nostrum quidem obcaecati nesciunt! Molestiae officiis voluptate excepturi rem veritatis eum aliquam qui laborum non ipsam ullam tempore reprehenderit illum eligendi cumque mollitia temporibus! Natus dicta qui est optio rerum.
</p>
</div>
</li>
<li class='work'>
<input class='radio' id='work3' name='works' type='radio'>
<div class="relative">
<label for='work3'>Lorem ipsum dolor sit amet</label>
<span class='date'>10 May 2013</span>
<span class='circle'></span>
</div>
<div class='content'>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio ea necessitatibus quo velit natus cupiditate qui alias possimus ab praesentium nostrum quidem obcaecati nesciunt! Molestiae officiis voluptate excepturi rem veritatis eum aliquam qui laborum non ipsam ullam tempore reprehenderit illum eligendi cumque mollitia temporibus! Natus dicta qui est optio rerum.
</p>
</div>
</li>
<li class='work'>
<input class='radio' id='work2' name='works' type='radio'>
<div class="relative">
<label for='work2'>Lorem ipsum dolor sit amet</label>
<span class='date'>09 May 2013</span>
<span class='circle'></span>
</div>
<div class='content'>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio ea necessitatibus quo velit natus cupiditate qui alias possimus ab praesentium nostrum quidem obcaecati nesciunt! Molestiae officiis voluptate excepturi rem veritatis eum aliquam qui laborum non ipsam ullam tempore reprehenderit illum eligendi cumque mollitia temporibus! Natus dicta qui est optio rerum.
</p>
</div>
</li>
<li class='work'>
<input class='radio' id='work1' name='works' type='radio'>
<div class="relative">
<label for='work1'>Lorem ipsum dolor sit amet</label>
<span class='date'>08 May 2013</span>
<span class='circle'></span>
</div>
<div class='content'>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio ea necessitatibus quo velit natus cupiditate qui alias possimus ab praesentium nostrum quidem obcaecati nesciunt! Molestiae officiis voluptate excepturi rem veritatis eum aliquam qui laborum non ipsam ullam tempore reprehenderit illum eligendi cumque mollitia temporibus! Natus dicta qui est optio rerum.
</p>
</div>
</li>
</ul>
css
/* -------------------------------------
* For horizontal version, set the
* $vertical variable to false
* ------------------------------------- */
/* -------------------------------------
* General Style
* ------------------------------------- */
@import url(https://fonts.googleapis.com/css?family=Noto+Sans);
body {
max-width: 1200px;
margin: 0 auto;
padding: 0 5%;
font-size: 100%;
font-family: "Noto Sans", sans-serif;
color: #eee9dc;
background: #48b379;
}
h2 {
margin: 3em 0 0 0;
font-size: 1.5em;
letter-spacing: 2px;
text-transform: uppercase;
}
/* -------------------------------------
* timeline
* ------------------------------------- */
#timeline {
list-style: none;
margin: 50px 0 30px 120px;
padding-left: 30px;
border-left: 8px solid #eee9dc;
}
#timeline li {
margin: 40px 0;
position: relative;
}
#timeline p {
margin: 0 0 15px;
}
.date {
margin-top: -10px;
top: 50%;
left: -158px;
font-size: 0.95em;
line-height: 20px;
position: absolute;
}
.circle {
margin-top: -10px;
top: 50%;
left: -44px;
width: 10px;
height: 10px;
background: #48b379;
border: 5px solid #eee9dc;
border-radius: 50%;
display: block;
position: absolute;
}
.content {
max-height: 20px;
padding: 50px 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: #48b379;
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: 20px;
transition: transform 0.2s linear;
}
.radio {
display: none;
}
.radio:checked + .relative label {
cursor: auto;
transform: translateX(42px);
}
.radio:checked + .relative .circle {
background: #f98262;
}
.radio:checked ~ .content {
max-height: 180px;
border-color: #eee9dc;
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: 200px;
color: #eee9dc;
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: 45px;
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: #48b379;
border-width: 20px;
top: -20px;
left: 50px;
margin-left: -20px;
}
.content p {
font-size: 0.9em;
line-height: 1.4;
}
.circle, .date {
display: none;
}
}
以上就是CSS3 實現(xiàn)時間軸動畫的詳細內容，更多關于CSS3 時間軸的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了CSS3實現(xiàn)菜單懸停效果的示例代碼，幫助大家更好的制作CSS3特效，美化網頁，感興趣的朋友可以了解下2020-11-17- 這篇文章主要介紹了詳解CSS3：overflow屬性的相關資料，幫助大家更好的理解和制作CSS3特效，感興趣的朋友可以了解下2020-11-17
這篇文章主要介紹了詳解css3中的偽類before和after常見用法,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-11-17
CSS3+HTML5+JS 實現(xiàn)一個塊的收縮與展開動畫效果
這篇文章主要介紹了CSS3+HTML5+JS 實現(xiàn)一個塊的收縮與展開動畫效果,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-11-17
10種CSS3實現(xiàn)的loading動畫，挑一個走吧？
這篇文章主要介紹了10種CSS3實現(xiàn)的loading動畫，幫助大家更好的美化自身網頁，完成需求，感興趣的朋友可以了解下2020-11-16
帶剪切動畫的幻燈片這是一款帶剪切動畫的幻燈片，幻燈片切換時，會以「左」、「右」箭頭為中心進行展開，適合通欄的設計?；脽羝褂昧?CSS3 屬性，不兼容低級瀏覽器，喜歡2020-11-16
詳解CSS3媒體查詢響應式布局bootstrap 框架原理實戰(zhàn)(推薦)
這篇文章主要介紹了詳解CSS3媒體查詢響應式布局bootstrap 框架原理實戰(zhàn)(推薦),本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的2020-11-16
CSS3懸停展開旋轉菜單特效代碼是一款鼠標移動到頭像上就會展開旋轉菜單特效。2020-11-16
純CSS3進度條漸變加載特效代碼是一款基于css3 keyframes制作的創(chuàng)意有趣的進度條漸變加載loading動畫特效代碼。2020-11-16
這篇文章主要介紹了CSS3 實現(xiàn)穿梭星空動畫的示例，幫助大家更好的理解和制作CSS3特效，用來美化網頁，感興趣的朋友可以了解下2020-11-13
