CSS3时光轴 -时间线特效-来自 www.srcfans.com

来源：互联网发布：flyme系统依赖网络编辑：程序博客网时间：2024/05/29 02:03

这个效果大家估计比较熟悉吧，一个简单的时间线的功能，用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: #f6393f;}.text-blue {  color: #1c87bf;}.text-green {  color: #95c91e;}.text-yellow {  color: #ffb902;}.text-purple {  color: #d32d93;}.point-red {  background-color: #f6393f;}.point-blue {  background-color: #1c87bf;}.point-green {  background-color: #95c91e;}.point-yellow {  background-color: #ffb902;}.point-purple {  background-color: #d32d93;}.content {  width: 970px;  margin: 30px auto;}.content article {  position: relative;}.content article > h3 {  width: 15%;  height: 20px;  line-height: 20px;  text-align: right;  font-size: 1.4em;  color: #1d1d1d;  padding: 10px 0 20px;}.content article section {  padding: 0 0 17px;  position: relative;}.content article section:before {  content: "";  width: 5px;  top: 17px;  bottom: -17px;  left: 20%;  background: #e6e6e6;  position: absolute;}.content article section:last-child:before {  display: none;}.content article section time {  width: 15%;  display: block;  position: absolute;}.content article section time > span {  display: block;  text-align: right;}.content article section aside {  color: #3a3a38;  margin-left: 25%;  padding-bottom: 15px;}.content article section .brief {  color: #9f9f9f;}</style></head><body><div class="content"><article><h3>2013</h3><section><span class="point-time point-yellow"></span><time datetime="2013-03"><span>March</span><span>2013</span></time><aside><p class="things">The FAW</p><p class="brief"><span class="text-yellow">Award</span> (Miami. FL)</p></aside></section><section><span class="point-time point-red"></span><time datetime="2013-03"><span>March</span><span>2013</span></time><aside><p class="things">You reached 500 followers on Twitter</p><p class="brief"><span class="text-red">Social Appearance</span></p></aside></section></article><article><h3>2012</h3><section><span class="point-time point-green"></span><time datetime="2013-03"><span>December</span><span>2012</span></time><aside><p class="things">Visitor at Maketing Live 2012</p><p class="brief"><span class="text-green">Conference</span></p></aside></section><section><span class="point-time point-green"></span><time datetime="2012-11"><span>November</span><span>2012</span></time><aside><p class="things">Visitor at www.srcfans.com</p><p class="brief"><span class="text-green">Conference</span></p></aside></section><section><span class="point-time point-red"></span><time datetime="2012-09"><span>September</span><span>2012</span></time><aside><p class="things">You reached 500 followers on Dribbble</p><p class="brief"><span class="text-red">Social Appearance</span></p></aside></section><section><span class="point-time point-blue"></span><time datetime="2012-08"><span>August</span><span>2012</span></time><aside><p class="things">New job position as Senior Designer at Fantasy Interactive</p><p class="brief"><span class="text-blue">Working Experience</span></p></aside></section><section><span class="point-time point-red"></span><time datetime="2012-03"><span>March</span><span>2012</span></time><aside><p class="things">Speaker at ASMO conference</p><p class="brief"><span class="text-red">Conference</span></p></aside></section><section><span class="point-time point-blue"></span><time datetime="2012-02"><span>February</span><span>2012</span></time><aside><p class="things">You added new skills to job position Junior Designer at Fantasy Interactive</p><p class="brief"><span class="text-blue">Working Experience</span></p></aside></section></article></div></body></html>

引用自：CSS3时光轴 -时间线特效

0 0

CSS3时光轴 -时间线 特效-来自 www.srcfans.com

CSS3时光轴 -时间线特效-来自 www.srcfans.com