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

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

CSS3时光轴 -时间线特效-来自 www.codesc.net相关推荐

layui框架学习（10：时间线）
时间线,英文timeline,也叫时光轴.时间轴,是指以时间为记录方式的一种网络布局形式,其形式之一为下图所示(示例图来自参考文献5). Layui官网教程中的更新日志页面也用了时间线样式,如 ...
微软桌面5.0新增时间线功能
2019独角兽企业重金招聘Python工程师标准>>> 晨,微软召开发布会,正式更新Surface Pro 6 .Surface Laptop 2 以及 Surface Studio ...
9款超绚丽的HTML5/CSS3应用和动画特效
HTML5 现在已经不是很前卫的东西了,越来越多的网站和移动应用都在不断地尝试使用HTML5来更好地优化用户体验.今天我们要分享9款超绚丽的HTML5/CSS3应用和动画特效,这里面有菜单.按钮.图片 ...
new失败跟踪函数_WinDbg预览时间线：调试器中的时间线可以允许用户记录跟踪
时间旅行调试(TTD)允许用户记录跟踪,这些跟踪是对程序执行的记录.时间线是执行过程中发生的事件的直观表示,这些事件可以是包括断点,内存读/写,函数调用和返回以及异常. 使用时间线窗口可以快速查看重要 ...
css下拉菜单出现下划线,简单带下划线跟随效果的CSS3下拉菜单特效
简要教程这是一款使用纯CSS3制作的带下划线跟随效果的下拉菜单特效.该下拉菜单通过CSS3 transform和transition来制作下划线跟随效果和下拉菜单效果. 使用方法 HTML结构该下 ...
FCPX教程|如何在Final Cut Pro 的时间线中调整转场？
FCPX是苹果推出的一款功能强大的视频编辑软件,可以读视频添加转场特效,那么如何在Final Cut Pro 的时间线中调整转场呢,小编就给大家带来了fcpx转场调整的教程,希望对大家有帮助!更改转场 ...
html5 css3鼠标滑过效果,Hover.css纯CSS3鼠标滑过特效动画库
Hover.css是一款非常简单实用的纯CSS3鼠标滑过特效动画库.有100多种效果可以选择,包括:2D动画.背景动画.边框动画.图标动画.发光渐变.阴影.对话框.折角等100多种特效. 使用方法首 ...
CSS3的文字发光特效
这是一款基于纯CSS3的文字发光特效,当我们将鼠标滑过文字时,文字就会模拟发光动画,展现出非常酷的发光画面.另外,由于引用了特殊字体,所以整个文字效果看起来有着3D立体的特效,如果你的网络无法加载这些 ...
UnityEngine下Time 类的学习，时间管理器，计时器，时间线，
Time 类用的最多的应该就是Time.deltime; 第一次接触Time类的也是这个属性,这个就是上一帧的偏移量, 电脑完成上一帧到现在这一帧的时间 . 简单计时器 float Ti ...

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

CSS3时光轴 -时间线特效-来自 www.codesc.net相关推荐

最新文章

热门文章

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

CSS3时光轴 -时间线 特效-来自 www.codesc.net相关推荐

最新文章

热门文章

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

CSS3时光轴 -时间线特效-来自 www.codesc.net相关推荐