CSS3时光轴 -时间线特效-来自 www.codesc.net

shanshuiboy

于 2017-05-13 20:58:14 发布

阅读量1.1k

点赞数

文章标签： css3 大事记

本文链接：https://blog.csdn.net/shanshuiboy/article/details/71906278

版权

这个教程展示了如何使用CSS3实现一个时间线特效，适用于展示企业大事记或重要事件。代码示例提供了不同颜色的点和事件描述，且在移动端具有良好兼容性。

摘要由CSDN通过智能技术生成

这个效果大家估计比较熟悉吧，一个简单的时间线的功能，用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