图标用的是font-awesome.css图标库，font-awesome图标库：fontawesome.dashgame.com/
动画效果是用的animate.css，网址：daneden.github.io/animate.css…
自己写的css样式代码：
.clear {
clear: both
}
.timeline-box {
background: #fff;
padding: 20px 8px;
position: relative;
opacity: 0.7;
}
.timeline-main {
position: relative;
}
.timeline-main>h1 {
font-size: 18px;
background: #fff;
z-index: 1;
position: relative;
color: #484348;
margin-left: 33%;
margin-left: -moz-calc(35% - 7px);
margin-left: -webkit-calc(35% - 7px);
margin-left: calc(35% - 7px)
}
.timeline-main>h1>i {
padding-right: 10px;
font-size: 20px
}
.timeline-main>h1>span {
display: none
}
.timeline-main h2,
.timeline-main h3 {
width: 31%;
text-align: right
}
.timeline-main h2,
.timeline-main h2>a {
font-size: 16px;
margin: 5px 0;
color: #6bc30d
}
.timeline-main h3,
.timeline-main h3>a {
font-size: 14px;
margin: 2px 0;
color: #ff5722
}
.timeline-month>ul>li {
padding: 10px 0
}
.timeline-month>ul>li .h4 {
display: inline-block;
width: 31%;
text-align: right;
float: left
}
.date {
display: inline-block;
padding: 2px 5px;
color: #484348;
font-size: 15px;
margin-top: 5px
}
.dot-circle {
color: #484348;
width: 8%;
text-align: center;
font-size: 22px;
z-index: 1;
position: relative;
background: #fff;
float: left
}
.content {
max-width: 50%;
float: left;
padding: 20px;
margin-left: 10px;
position: relative;
z-index: 1;
background: #484348;
color: #fff
}
.content img {
width: 100%
}
.content::before {
position: absolute;
left: -20px;
top: 6px;
height: 0;
width: 0;
content: '';
border: 10px solid rgba(255, 255, 255, 0);
border-top: 6px solid rgba(255, 255, 255, 0);
border-bottom: 6px solid rgba(255, 255, 255, 0);
border-right-color: #484348
}
.timeline-line {
position: absolute;
left: 35%;
top: 0;
height: 100%;
width: 2px;
background: #484348;
z-index: 0
}
.timeline-year {
margin: 10px 0
}
@media(min-width:768px) {
.timeline-box {
background: #fff;
padding: 40px 15px;
position: relative;
}
.timeline-main>h1 {
font-size: 26px;
margin-left: 16%;
margin-left: -moz-calc(18% - 13px);
margin-left: -webkit-calc(18% - 13px);
margin-left: calc(18% - 13px)
}
.timeline-main>h1>i {
font-size: 30px
}
.timeline-main>h1>span {
display: inline
}
.timeline-main h2,
.timeline-main h3 {
width: 16%
}
.timeline-main h2,
.timeline-main h2>a {
font-size: 24px
}
.timeline-main h3,
.timeline-main h3>a {
font-size: 20px
}
.timeline-month>ul>li .h4 {
width: 16%
}
.dot-circle {
width: 4%;
font-size: 22px
}
.content {
max-width: 70%
}
.timeline-line {
left: 18%
}
}
@media(min-width:992px) {
.timeline-main>h1 {
font-size: 34px;
background: #fff;
z-index: 1;
position: relative;
color: #484348;
margin-left: 17%;
margin-left: -moz-calc(18% - 16px);
margin-left: -webkit-calc(18% - 16px);
margin-left: calc(18% - 16px)
}
.timeline-main>h1>i {
font-size: 36px
}
.timeline-main h2,
.timeline-main h2>a {
font-size: 30px
}
.timeline-main h3,
.timeline-main h3>a {
font-size: 24px
}
}
HTML部分代码
一念之间
2019 年
-
10月24日
layui 2.0 的一切准备工作似乎都已到位。发布之弦，一触即发。
不枉近百个日日夜夜与之为伴。因小而大，因弱而强。
无论它能走多远，抑或如何支撑？至少我曾倾注全心，无怨无悔 -
09月06日
杜甫的思想核心是儒家的仁政思想，他有“致君尧舜上，再使风俗淳”的宏伟抱负。个人最爱的名篇有：
- 《登高》
- 《茅屋为秋风所破歌》
-
08月26日
中国人民抗日战争胜利72周年
常常在想，尽管对这个国家有这样那样的抱怨，但我们的确生在了最好的时代
铭记、感恩
所有为中华民族浴血奋战的英雄将士
永垂不朽
2018 年
-
10月24日
layui 2.0 的一切准备工作似乎都已到位。发布之弦，一触即发。
不枉近百个日日夜夜与之为伴。因小而大，因弱而强。
无论它能走多远，抑或如何支撑？至少我曾倾注全心，无怨无悔 -
09月06日
杜甫的思想核心是儒家的仁政思想，他有“致君尧舜上，再使风俗淳”的宏伟抱负。个人最爱的名篇有：
- 《登高》
- 《茅屋为秋风所破歌》
-
08月26日
中国人民抗日战争胜利72周年
常常在想，尽管对这个国家有这样那样的抱怨，但我们的确生在了最好的时代
铭记、感恩
所有为中华民族浴血奋战的英雄将士
永垂不朽
