HTML5+CSS3实现的响应式垂直时间轴

作者:月光光 2015年01月07日 15:13helloweba.com 标签:HTML5  CSS3 

网页时间轴一般用于展示以时间为主线的事件,如企业网站常见的公司发展历程等。本文将给大家介绍一款基于HTML5和CSS3的漂亮的垂直时间轴,它可以响应页面布局,适用于HTML5开发的PC和移动手机WEB应用。

HTML5+CSS3实现的响应式垂直时间轴

HTML

我们使用了HTML5标签<section>,时间轴中所有的内容包括标题、简介、时间和图像都放在.cd-timeline-block的DIV中,多个DIV形成一个序列,并把这些DIV放在<section>中。注意要看到本例演示效果,需要你的浏览器支持HTML5和CSS3。

<section id="cd-timeline" class="cd-container">
	<div class="cd-timeline-block">
		<div class="cd-timeline-img cd-picture">
			<img src="img/cd-icon-picture.svg" alt="Picture">
		</div>

		<div class="cd-timeline-content">
			<h2>HTML5+CSS3实现的响应式垂直时间轴</h2>			
            <p>网页时间轴一般用于展示以时间为主线的事件,如企业网站常见的公司发展历程等。本文将给大家介绍一款基于HTML5和CSS3的漂亮的垂直时间轴,它可以响应页面布局,适用于HTML5开发的PC和移动手机WEB应用。</p>
			<a href="http://www.helloweba.net/javascript/285.html" class="cd-read-more" target="_blank">阅读全文</a>
			<span class="cd-date">2015-01-06</span>
		</div>
	</div>
	<div class="cd-timeline-block">
		...
	</div>
	
</div>

本例使用了svg图像作为图标,你也可以换成png,gif格式图像。

CSS

我们使用:before伪类在时间轴#cd-timeline的前面创建一条垂直线,那么时间轴各个节点的内容都会基于这垂直线。

#cd-timeline {
  position: relative;
  padding: 2em 0;
  margin-top: 2em;
  margin-bottom: 2em;
}
#cd-timeline::before {
  content: '';
  position: absolute;
  top: 0;
  left: 18px;
  height: 100%;
  width: 4px;
  background: #d7e4ed;
}

好,接下来我们要做的是,根据用户浏览器窗口的大小来调整时间轴的布局,当浏览器窗口非常大时,时间轴的各节点内容会分布在垂直线的两边(垂直线居中),当浏览器窗口足够小如手机,iPad中竖屏浏览时,时间轴的各节点内容会排列在垂直线的右边(垂直线靠左),这个俗称响应式布局。

.cd-timeline-block {
  position: relative;
  margin: 2em 0;
}
.cd-timeline-block:after {
  content: "";
  display: table;
  clear: both;
}
.cd-timeline-block:first-child {
  margin-top: 0;
}
.cd-timeline-block:last-child {
  margin-bottom: 0;
}
@media only screen and (min-width: 1170px) {
  .cd-timeline-block:nth-child(even) .cd-timeline-content {
    float: right;
  }
  .cd-timeline-block:nth-child(even) .cd-timeline-content::before {
    top: 24px;
    left: auto;
    right: 100%;
    border-color: transparent;
    border-right-color: white;
  }
  .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more {
    float: right;
  }
  .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date {
    left: auto;
    right: 122%;
    text-align: right;
  }
}

CSS3中可以使用@media判断设备的屏幕尺寸,根据不同的尺寸执行不同的css样式。本例中还用到了CSS3的阴影、圆角等效果,文中不再详述,大家可以参考网上好多关于CSS3的基础教程,你也可以直接下载源码包,本例的css全部整理在style.css文件中。当然你也可以在本例的基础上使用JS和CSS3来给时间轴增加一些过渡动画,效果可能会更好。

12条评论

  • 风中的向日葵

    下载玩zip,可以加压后还是zip,一直不能正常解压

  • yangyu

    ie8 不支持?

  • 很棒,谢谢啦

  • .cssanimations .timebox.is-hidden {
    visibility: hidden;
    }
    .cssanimations .timebox.bounce-in {
    visibility: visible;
    -webkit-animation: cd-bounce-2 0.6s;
    -moz-animation: cd-bounce-2 0.6s;
    animation: cd-bounce-2 0.6s;
    }

    这段理解不了啊?何解?

  • 万分感谢,收了

  • 尝试把这个样式在WordPress里做成个类似说说的东西,但是发现循环出来好乱,搞不定啊,是不是我太菜了。。

  • 炸裂[哼]

  • 前两天刚有一个倒霉客户要求这种效果 我么发现.. 这会终于找到了[泪]

  • 不错!!!

  • 下下

  • 最近正在搞这个 谢谢了 哈哈