<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
<link rel="stylesheet" href="css/bootstrap-grid.min.css"/>
<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
<style type="text/css">
.demo{ padding: 2em 0;}
.main-timeline{ position: relative; }
.main-timeline:before,
.main-timeline:after{
content: "";
display: block;
width: 100%;
clear: both;
}
.main-timeline:before{
content: "";
width: 100%;
height: 5px;
background: #fff;
margin: auto 0;
position: absolute;
top: 50%;
left: 0;
}
.main-timeline .timeline{
width: 22%;
float: left;
margin-left: 3%;
position: relative;
}
.main-timeline .timeline:before{
content: attr(data-heading);
display: inline-block;
font-size: 24px;
font-weight: bold;
color: #fff;
transform: rotate(-90deg);
position: absolute;
top: 30px;
left: -2px;
z-index: 2;
}
.main-timeline .timeline:after{
content: "";
width: 5px;
height: 60px;
border-left: 9px dotted #fff;
position: absolute;
top: 54%;
left: 71px;
}
.main-timeline .timeline-content{
padding: 15px 0 40px 50px;
margin-bottom: 80px;
border-radius: 15px;
border: 5px solid #fff;
text-align: left;
background: #f67420;
z-index: 1;
position: relative;
}
.main-timeline .timeline:nth-child(even) .timeline-content{ background: #43a6ba; }
.main-timeline .timeline-content:before{
content: "";
width: 40px;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #d66215;
border-radius: 10px 0 0 10px;
}
.main-timeline .timeline:nth-child(even) .timeline-content:before{ background: #1784ab; }
.main-timeline .timeline-content:after{
content: "";
width: 40px;
height: 40px;
background: #f67420;
border-bottom: 5px solid #fff;
border-right: 5px solid #fff;
position: absolute;
bottom: -23px;
left: 50px;
transform: rotate(45deg);
z-index: -1;
}
.main-timeline .timeline:nth-child(even) .timeline-content:after{ background: #43a6ba; }
.main-timeline .description{
font-size: 14px;
color: #fff;
}
.main-timeline .read-more{
display: inline-block;
padding-right: 15px;
font-size: 16px;
font-weight: bold;
color: #fff;
text-transform: capitalize;
position: relative;
}
.main-timeline .read-more:before{
content: "\f0da";
font-family: 'FontAwesome';
font-size: 24px;
position: absolute;
top: -6px;
right: 0;
}
.main-timeline .year{
display: inline-block;
width: 85px;
height: 85px;
line-height: 85px;
background: #f67420;
border-radius: 5px;
border: 5px solid #fff;
text-align: center;
margin-left: 34px;
transform: rotate(45deg);
position: relative;
}
.main-timeline .timeline:nth-child(even) .year{ background: #43a6ba; }
.main-timeline .year span{
display: block;
font-size: 20px;
font-weight: bold;
color: #fff;
transform: rotate(-45deg);
}
.main-timeline .timeline.bottom{ margin: -7.7% 0 0 7%; }
.main-timeline .timeline.bottom:nth-child(5n+1),
.main-timeline .timeline.bottom:last-child{ margin-left: 3%; }
.main-timeline .timeline.bottom:before{
top: auto;
bottom: 110px;
}
.main-timeline .timeline.bottom:after{
top: auto;
left: auto;
bottom: 54%;
right: 71px;
border-color: #fff;
}
.main-timeline .timeline.bottom .timeline-content{
margin: 80px 0 0 0;
padding: 15px 0 40px 50px;
}
.main-timeline .timeline.bottom .timeline-content:after{
border: none;
border-top: 5px solid #fff;
border-left: 5px solid #fff;
bottom: auto;
top: -23px;
left: auto;
right: 50px;
}
.main-timeline .timeline.bottom .year{
top: 4px;
margin-left: 132px;
}
@media only screen and (max-width: 1199px){
.main-timeline:before{
width: 5px;
height: 100%;
top: 0;
left: 5%;
}
.main-timeline .timeline,
.main-timeline .timeline.bottom,
.main-timeline .timeline.bottom:nth-child(5n+1),
.main-timeline .timeline.bottom:last-child{
width: 85%;
float: none;
margin: 0 0 20px 15%;
}
.main-timeline .timeline:after,
.main-timeline .timeline.bottom:after{
width: 60px;
height: 5px;
top: 50px;
left: -58px;
border-top: 9px dotted #fff;
}
.main-timeline .timeline-content,
.main-timeline .timeline.bottom .timeline-content{ margin: 0; }
.main-timeline .year,
.main-timeline .timeline.bottom .year{
width: 65px;
height: 65px;
line-height: 60px;
margin: 0;
position: absolute;
top: 20px;
left: -15.5%;
z-index: 1;
}
.main-timeline .timeline .timeline-content:after{ display: none; }
.main-timeline .timeline.bottom:before{
bottom: auto;
top: 30px;
left: -2px;
}
}
@media only screen and (max-width: 990px){
.main-timeline .year,
.main-timeline .timeline.bottom .year{
left: -16.8%;
}
}
@media only screen and (max-width: 767px){
.main-timeline .timeline:after,
.main-timeline .timeline.bottom:after{ display: none; }
.main-timeline .year,
.main-timeline .timeline.bottom .year{
width: 30px;
height: 30px;
border: 3px solid #fff;
left: -13.5%;
}
.main-timeline .year span{ display: none; }
}
@media only screen and (max-width: 480px){
.main-timeline .year,
.main-timeline .timeline.bottom .year{ left: -15.5%; }
}
</style>
</head>
<body>
<div class="htmleaf-container">
<header class="htmleaf-header">
<h1>jQuery炫酷图片预览Lightbox插件 <span>A jQuery plugin designed to provide gallery view for images</span></h1>
<div class="htmleaf-links">
<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a>
<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.htmleaf.com/css3/ui-design/201711184835.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
</div>
</header>
<div class="demo">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="main-timeline">
<div class="timeline" data-heading="2011">
<div class="timeline-content">
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate doloribus repellat temporibus vitae voluptate.
</p>
<a href="#" class="read-more">read more</a>
</div>
<span class="year">
<span>2011</span>
</span>
</div>
<div class="ti
简洁的横向水平时间轴特效
需积分: 46 65 浏览量
2019-12-13
03:48:41
上传
评论
收藏 61KB ZIP 举报
201711181435.zip （11个子文件） 
index.html 12KB
related 
2.jpg 22KB 1.jpg 31KB fonts 
icomoon.woff 1KB icomoon.ttf 1KB
icomoon.svg 2KB icomoon.eot 2KB jQuery之家.url 268B readme.html 865B css htmleaf-demo.css 6KB bootstrap-grid.min.css 28KB资源评论
