这个效果大家估计比较熟悉吧,一个简单的时间线的功能,用CSS3实现时光轴,可用于记录企业大事记、重要事件的显示,复制本代码到你的网页上,然后修改大事件内容和时间就可以用了,在移动手机端兼容良好。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5实现的一款漂亮时间轴展示历程功能</title>
<style>
* {
margin: 0;
padding: 0;
}
article,section,time,aside{display:block;}
body {
color: #9f9f9f;
background: #fff;
font-size: 1.16em;
font-family: 'Lato', Calibri, Arial, sans-serif;
}
.point-time {
content: "";
position: absolute;
width: 13px;
height: 13px;
top: 17px;
left: 20%;
background: #1c87bf;
margin-left: -4px;
border-radius: 50%;
box-shadow: 0 0 0 5px #fff;
}
.text-red {
color: #f