|
|
|
|
|
時(shí)間線使用非常廣泛,它可以比文字直述更加清晰明了的展示某一事物的歷程。本文介紹純CSS3實(shí)現(xiàn)的時(shí)間線 (Timeline),非常實(shí)用,難得的是代碼使用起來(lái)也很簡(jiǎn)單。
純CSS3實(shí)現(xiàn)的時(shí)間線 (Timeline)
時(shí)間線通常有豎向和橫向兩種呈現(xiàn)方式。本文將逐一介紹它們。我們先來(lái)看看豎向時(shí)間線。
豎向時(shí)間線
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;
}
}
<ul id='timeline'>
<li class='work'>
<input class='radio' id='work5' name='works' type='radio' checked>
<div class="relative">
<label for='work5'>卡卡網(wǎng)正式開(kāi)通</label>
<span class='date'>2009年5月</span>
<span class='circle'></span>
</div>
<div class='content'>
<p>
卡卡網(wǎng)(howtostagehomes.com)建立于2009年5月,本站旨在為廣大網(wǎng)站建設(shè)人員提供專業(yè)的網(wǎng)站測(cè)速和優(yōu)化服務(wù),以及為廣大網(wǎng)民提供網(wǎng)絡(luò)速度測(cè)試服務(wù)。
</p>
</div>
</li>
<li class='work'>
<input class='radio' id='work4' name='works' type='radio'>
<div class="relative">
<label for='work4'>卡卡網(wǎng)當(dāng)日獨(dú)立IP首次超過(guò)2000</label>
<span class='date'>2009年8月</span>
<span class='circle'></span>
</div>
<div class='content'>
<p>
卡卡網(wǎng)建立于2009年5月,本站旨在為廣大網(wǎng)站建設(shè)人員提供專業(yè)的網(wǎng)站測(cè)速和優(yōu)化服務(wù),以及為廣大網(wǎng)民提供網(wǎng)絡(luò)速度測(cè)試服務(wù)。
</p>
</div>
</li>
</ul>
使用說(shuō)明
ul li
列舉標(biāo)簽,ul
的id為timeline
,li
的類名為work
radio
標(biāo)簽,添加checked
屬性可設(shè)置默認(rèn)選擇relative
,內(nèi)容的div類名為content
上面已經(jīng)介紹了豎向時(shí)間線,這里繼續(xù)介紹橫向時(shí)間線。
橫向時(shí)間線
其實(shí),橫向時(shí)間線跟豎向時(shí)間線的html代碼是一樣的,使用方法也一樣,只是它們的css代碼不同而已。
body {
margin: 0;
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: 120px 0 0;
padding: 0;
border-top: 8px solid #eee9dc;
display: table;
border-spacing: 30px 0;
}
#timeline li {
display: table-cell;
}
#timeline li .relative {
position: relative;
}
#timeline p {
margin: 0 0 15px;
}
.date {
text-align: center;
top: -55px;
left: 0;
right: 0;
font-size: 0.95em;
line-height: 20px;
position: absolute;
}
.circle {
margin: 0 auto;
top: -14px;
left: 0;
right: 0;
width: 10px;
height: 10px;
background: #48b379;
border: 5px solid #eee9dc;
border-radius: 50%;
display: block;
position: absolute;
}
.content {
width: 200px;
max-height: 0;
margin-top: 40px;
vertical-align: top;
padding: 50px 15px 15px;
transition: width 0.4s linear, max-height 0.4s linear;
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;
bottom: 100%;
}
.content:before {
border-bottom-color: inherit;
border-width: 15px;
left: 50%;
margin-left: -15px;
}
.content:after {
border-bottom-color: #48b379;
border-width: 12px;
left: 50%;
margin-left: -12px;
}
.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;
width: 200px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: block;
top: 60px;
left: 15px;
}
.radio {
display: none;
}
.radio:checked + .relative label {
cursor: auto;
width: 400px;
transition: width 0.3s linear 0.2s;
}
.radio:checked + .relative .circle {
background: #f98262;
}
.radio:checked ~ .content {
max-height: 180px;
border-color: #eee9dc;
width: 400px;
}
.radio:checked ~ .content p {
max-height: 200px;
color: #eee9dc;
transition: color 0.3s linear 0.3s;
}
跟上述豎向時(shí)間線的html代碼一樣,使用方法也一樣。