网页中时光轴的简单实现
2024-04-13 20:05:08
时光轴效果如下：
鼠标滑过当前项时，左侧图标大小变大：
index.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>时光轴</title><style>.container {width: 800px;margin: 50px auto;}.vertical-timeline {color: #FFF;font-family: "微软雅黑", "Microsoft YaHei";}.vertical-timeline-block {width: 100%;border-left: 2px solid #DDD;margin: 0 20px;position: relative;padding-bottom: 30px;}/* 时间轴的左侧图标 */.vertical-timeline-icon {width: 40px;height: 40px;border-radius: 20px;position: absolute;left: -22px;top: 10px;text-align: center;line-height: 40px;cursor: pointer;transition: all 0.2s ease-in;-webkit-transition: all 0.2s ease-in;-moz-transition: all 0.2s ease-in;-o-transition: all 0.2s ease-in;}.vertical-timeline-block {cursor: pointer;}.vertical-timeline-block:hover .vertical-timeline-icon {width: 50px;height: 50px;border-radius: 25px;line-height: 50px;left: -27px;box-shadow: 0 0 5px #CCC;font-size: 25px;}/* 时间轴的左侧图标的各种样式 */.v-timeline-icon1 {background-color: #2aabd2;}.v-timeline-icon2 {background-color: #5cb85c;}.v-timeline-icon3 {background-color: #8c8c8c;}/* 时间轴的左侧图标上的序号*/.vertical-timeline-icon i {font-style: normal;color: #FFF;}/* 时间轴上的具体内容 */.vertical-timeline-content {background-color: #5bc0de;margin-left: 60px;padding: 20px 30px;border-radius: 5px;position: relative;}/* 时间轴上的具体内容左侧箭头 */.vertical-timeline-content:before {content: '';width: 0;height: 0;border-top: 10px solid transparent;border-bottom: 10px solid transparent;border-right: 10px solid #5bc0de;border-left: 10px solid transparent;position: absolute;right: 100%;top: 20px;}/* 时间轴的具体内容的格式 */.timeline-content {text-indent: 2em;}.time-more {overflow: hidden;}.time-more .time {float: left;line-height: 40px;display: inline-block;}.time-more .more {float: right;}.time-more .more a {display: inline-block;height: 20px;padding: 8px 15px;color: #FFF;text-decoration: none;font-size: 15px;}/* “更多信息”的风格 */.more-style1 {border-radius: 5px;background-color: #565656;}.more-style1:hover {background-color: #696969;}.more-style2 {border-radius: 5px;background-color: #1AB394;}.more-style2:hover {background-color: #18A689;}.more-style3 {border-radius: 5px;background-color: #1C84C6;}.more-style3:hover {background-color: #1A7BB9;}</style>
</head>
<body><div class="container"><div class="vertical-timeline"><div class="vertical-timeline-block"><div class="vertical-timeline-icon v-timeline-icon1"><i class="icon">1</i></div><div class="vertical-timeline-content"><h2>时间点1</h2><p class="timeline-content">我去吃了个午饭</p><p class="time-more"><span class="time">2016/4/30 13:48</span><span class="more more-style1"><a href="#">更多信息</a></span></p></div></div><div class="vertical-timeline-block"><div class="vertical-timeline-icon v-timeline-icon2"><i class="icon">2</i></div><div class="vertical-timeline-content"><h2>时间点2</h2><p class="timeline-content">我去吃了个午饭</p><p class="time-more"><span class="time">2016/4/30 13:48</span><span class="more more-style2"><a href="#">更多信息</a></span></p></div></div><div class="vertical-timeline-block"><div class="vertical-timeline-icon v-timeline-icon3"><i class="icon">3</i></div><div class="vertical-timeline-content"><h2>时间点3</h2><p class="timeline-content">我去吃了个午饭</p><p class="time-more"><span class="time">2016/4/30 13:48</span><span class="more more-style3"><a href="#">更多信息</a></span></p></div></div><div class="vertical-timeline-block"><div class="vertical-timeline-icon v-timeline-icon1"><i class="icon">4</i></div><div class="vertical-timeline-content"><h2>时间点1</h2><h2>时间点1</h2><h2>时间点1</h2><h2>时间点1</h2></div></div><div class="vertical-timeline-block"><div class="vertical-timeline-icon v-timeline-icon2"><i class="icon">5</i></div><div class="vertical-timeline-content"><h2>时间点1</h2><h2>时间点1</h2><h2>时间点1</h2></div></div><div class="vertical-timeline-block"><div class="vertical-timeline-icon v-timeline-icon3"><i class="icon">6</i></div><div class="vertical-timeline-content"><h2>时间点1</h2><h2>时间点1</h2><h2>时间点1</h2></div></div></div></div>
</body>
</html>下面为 时光轴左侧添加 “标题”，如：
index2.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>时光轴</title><style>.container {width: 800px;margin: 50px auto;}.vertical-timeline {color: #FFF;font-family: "微软雅黑", "Microsoft YaHei";position: relative;}.vertical-timeline-block {width: 100%;border-left: 2px solid #DDD;margin: 0 20px;position: relative;padding-bottom: 30px;cursor: pointer;}/* 时间轴的左侧图标 */.vertical-timeline-icon {width: 40px;height: 40px;border-radius: 20px;position: absolute;left: -22px;top: 10px;text-align: center;line-height: 40px;cursor: pointer;transition: all 0.2s ease-in;-webkit-transition: all 0.2s ease-in;-moz-transition: all 0.2s ease-in;-o-transition: all 0.2s ease-in;}.vertical-timeline-block:hover .vertical-timeline-icon {width: 50px;height: 50px;border-radius: 25px;line-height: 50px;left: -27px;box-shadow: 0 0 5px #CCC;font-size: 25px;}/* 时间轴的左侧图标的各种样式 */.v-timeline-icon1 {background-color: #2aabd2;}.v-timeline-icon2 {background-color: #5cb85c;}.v-timeline-icon3 {background-color: #8c8c8c;}/* 时间轴的左侧图标上的序号*/.vertical-timeline-icon i {font-style: normal;color: #FFF;}/* 时间轴上的具体内容 */.vertical-timeline-content {background-color: #5bc0de;margin-left: 60px;padding: 20px 30px;border-radius: 5px;position: relative;}/* 时间轴上的具体内容左侧箭头 */.vertical-timeline-content:before {content: '';width: 0;height: 0;border-top: 10px solid transparent;border-bottom: 10px solid transparent;border-right: 10px solid #5bc0de;border-left: 10px solid transparent;position: absolute;right: 100%;top: 20px;}/* 时间轴的具体内容的格式 */.timeline-content {text-indent: 2em;}.time-more {overflow: hidden;}.time-more .time {float: left;line-height: 40px;display: inline-block;}.time-more .more {float: right;}.time-more .more a {display: inline-block;height: 20px;padding: 8px 15px;color: #FFF;text-decoration: none;font-size: 15px;}/* “更多信息”的风格 */.more-style1 {border-radius: 5px;background-color: #565656;}.more-style1:hover {background-color: #696969;}.more-style2 {border-radius: 5px;background-color: #1AB394;}.more-style2:hover {background-color: #18A689;}.more-style3 {border-radius: 5px;background-color: #1C84C6;}.more-style3:hover {background-color: #1A7BB9;}.vtb-tit {padding: 0 10px;height: 50px;line-height: 50px;text-align: center;background-color: #1A7BB9;border-radius: 5px;position: absolute;left: -120px;top: 10px;}</style>
</head>
<body><div class="container"><div class="vertical-timeline"><div class="vtb-tit">总时间点1</div><div class="vertical-timeline-block"><div class="vertical-timeline-icon v-timeline-icon1"><i class="icon">1</i></div><div class="vertical-timeline-content"><h2>时间点1<a href="javascript:void(0)" class="del-timeline-block"></a></h2><p class="timeline-content">我去吃了个午饭</p><p class="time-more"><span class="time">2016/4/30 13:48</span><span class="more more-style1"><a href="#">更多信息</a></span></p></div></div><div class="vertical-timeline-block"><div class="vertical-timeline-icon v-timeline-icon2"><i class="icon">2</i></div><div class="vertical-timeline-content"><h2>时间点2</h2><p class="timeline-content">我去吃了个午饭</p><p class="time-more"><span class="time">2016/4/30 13:48</span><span class="more more-style2"><a href="#">更多信息</a></span></p></div></div><div class="vertical-timeline-block"><div class="vertical-timeline-icon v-timeline-icon3"><i class="icon">3</i></div><div class="vertical-timeline-content"><h2>时间点3</h2><p class="timeline-content">我去吃了个午饭</p><p class="time-more"><span class="time">2016/4/30 13:48</span><span class="more more-style3"><a href="#">更多信息</a></span></p></div></div><div class="vertical-timeline-block"><div class="vertical-timeline-icon v-timeline-icon1"><i class="icon">4</i></div><div class="vertical-timeline-content"><h2>时间点1</h2><h2>时间点1</h2><h2>时间点1</h2><h2>时间点1</h2></div></div><div class="vertical-timeline-block"><div class="vertical-timeline-icon v-timeline-icon2"><i class="icon">5</i></div><div class="vertical-timeline-content"><h2>时间点1</h2><h2>时间点1</h2><h2>时间点1</h2></div></div><div class="vertical-timeline-block"><div class="vertical-timeline-icon v-timeline-icon3"><i class="icon">6</i></div><div class="vertical-timeline-content"><h2>时间点1</h2><h2>时间点1</h2><h2>时间点1</h2></div></div></div><div class="vertical-timeline"><div class="vtb-tit">总时间点2</div><div class="vertical-timeline-block"><div class="vertical-timeline-icon v-timeline-icon1"><i class="icon">1</i></div><div class="vertical-timeline-content"><h2>时间点1</h2><p class="timeline-content">我去吃了个午饭</p><p class="time-more"><span class="time">2016/4/30 13:48</span><span class="more more-style1"><a href="#">更多信息</a></span></p></div></div><div class="vertical-timeline-block"><div class="vertical-timeline-icon v-timeline-icon2"><i class="icon">2</i></div><div class="vertical-timeline-content"><h2>时间点2</h2><p class="timeline-content">我去吃了个午饭</p><p class="time-more"><span class="time">2016/4/30 13:48</span><span class="more more-style2"><a href="#">更多信息</a></span></p></div></div><div class="vertical-timeline-block"><div class="vertical-timeline-icon v-timeline-icon3"><i class="icon">3</i></div><div class="vertical-timeline-content"><h2>时间点3</h2><p class="timeline-content">我去吃了个午饭</p><p class="time-more"><span class="time">2016/4/30 13:48</span><span class="more more-style3"><a href="#">更多信息</a></span></p></div></div><div class="vertical-timeline-block"><div class="vertical-timeline-icon v-timeline-icon1"><i class="icon">4</i></div><div class="vertical-timeline-content"><h2>时间点1</h2><h2>时间点1</h2><h2>时间点1</h2><h2>时间点1</h2></div></div><div class="vertical-timeline-block"><div class="vertical-timeline-icon v-timeline-icon2"><i class="icon">5</i></div><div class="vertical-timeline-content"><h2>时间点1</h2><h2>时间点1</h2><h2>时间点1</h2></div></div><div class="vertical-timeline-block"><div class="vertical-timeline-icon v-timeline-icon3"><i class="icon">6</i></div><div class="vertical-timeline-content"><h2>时间点1</h2><h2>时间点1</h2><h2>时间点1</h2></div></div></div><div class="vertical-timeline"><div class="vtb-tit">总时间点2</div><div class="vertical-timeline-block"><div class="vertical-timeline-icon v-timeline-icon1"><i class="icon">1</i></div><div class="vertical-timeline-content"><h2>时间点1</h2><p class="timeline-content">我去吃了个午饭</p><p class="time-more"><span class="time">2016/4/30 13:48</span><span class="more more-style1"><a href="#">更多信息</a></span></p></div></div><div class="vertical-timeline-block"><div class="vertical-timeline-icon v-timeline-icon2"><i class="icon">2</i></div><div class="vertical-timeline-content"><h2>时间点2</h2><p class="timeline-content">我去吃了个午饭</p><p class="time-more"><span class="time">2016/4/30 13:48</span><span class="more more-style2"><a href="#">更多信息</a></span></p></div></div><div class="vertical-timeline-block"><div class="vertical-timeline-icon v-timeline-icon3"><i class="icon">3</i></div><div class="vertical-timeline-content"><h2>时间点3</h2><p class="timeline-content">我去吃了个午饭</p><p class="time-more"><span class="time">2016/4/30 13:48</span><span class="more more-style3"><a href="#">更多信息</a></span></p></div></div><div class="vertical-timeline-block"><div class="vertical-timeline-icon v-timeline-icon1"><i class="icon">4</i></div><div class="vertical-timeline-content"><h2>时间点1</h2><h2>时间点1</h2><h2>时间点1</h2><h2>时间点1</h2></div></div><div class="vertical-timeline-block"><div class="vertical-timeline-icon v-timeline-icon2"><i class="icon">5</i></div><div class="vertical-timeline-content"><h2>时间点1</h2><h2>时间点1</h2><h2>时间点1</h2></div></div><div class="vertical-timeline-block"><div class="vertical-timeline-icon v-timeline-icon3"><i class="icon">6</i></div><div class="vertical-timeline-content"><h2>时间点1</h2><h2>时间点1</h2><h2>时间点1</h2></div></div></div></div>
</body>
</html>网页中时光轴的简单实现相关推荐
- 如何把报表放到网页中显示（Web页面与报表简单集成例子）
1.问题描述 现在用户开发的系统基本上趋向于BS架构的浏览器/服务器模式,这些系统可能由不同的语言开发,如HTML.ASP.JSP.PHP等,因此需要将制作好的报表嵌入到这些页面中. FineRepo ...
- 如何在网页中插入视频（简单实用）
很多人会问在网页中怎么插入视频,在HTML5中有新标签--video标签,但是兼容性可就没那么好了. 下面这段代码可以直接使用,里面的几个路径注意一下. <object classid=&quo ...
- python 批量下载网页图片_Python 实现简单的爬虫功能 -----批量下载网页中的图片...
我使用的是macPro , mac 自带了python2.7 , 我自己下载了pytho3.6根据操作进行安装后,终端默认的还是 python 2.7, 需要修改为 Python3.6 进入 ~/.b ...
- php获取本页面div内容,php获取网页中图片、DIV内容的简单方法
1.获取网页中所有的图片: 复制代码 代码如下: //取得指定位址的內容,并储存至 $text $text=file_get_contents('http://www.jb51.net/'); //取 ...
- 怎么在html详情页加视频,如何在网页中插入视频（简单实用）
很多人会问在网页中怎么插入视频,在HTML5中有新标签--video标签,但是兼容性可就没那么好了. 下面这段代码可以直接使用,里面的几个路径注意一下. 注意一下里面的几个参数. http://xwz ...
- js手机键盘遮挡_完美解决手机网页中输入框被输入法遮挡的问题
之前要做一个弹出对话框,填写信息,发现在手机上看的时候,较后的输入框在填写信息时,输入框被输入法遮挡,只能盲填. 前提 1.弹出的对话框用display:fixed定位的 2.对话框大小固定 解决办法 ...
- 网页中Google Map的使用
要在自己的网页中嵌入地图,常用的方法可以归纳为以下几种: 1.最简单的方法 --使用谷歌地图主页的"链接" 如果你只需要在自己的页面上显示某个特定范围的地图,比如你的公司所在地,但 ...
- Python学习笔记（八）—使用正则获取网页中所需要的信息。
使用正则表达式的几个步骤: 1.用import re 导入正则表达式模块: 2.用re.compile()函数创建一个Regex对象: 3.用Regex对象的search()或findall()方法, ...
- 获取网页源代码的最简单办法
获取网页源代码的最简单办法,就是利用 WinInet 单元中的函数: Code uses WinInet; function GetWebPage(const Url: string):string; ...
最新文章
- linux c 屏幕触摸_交互式拼接屏应用互动触摸屏实现大屏幕拼接墙
- 虚拟化服务器故障,修复vSphere vCenter服务器故障的技巧
- underscore.js 页面数据渲染
- timeval的时间转换成毫秒之后多大的数据类型可以装下
- [css] 要是position跟display、overflow、float这些特性相互叠加后会怎么样？
- Windows Server2012虚拟内存设置
- 解决openresty http客户端不支持https的问题
- Android中URI的格式
- as3 字符处理函数
- 系统学习深度学习（十三）--Batch Normalization
- Yii框架怎么寻找对应视图
- ArcGIS版本更新对比
- python socket编程详细教程_最基础的Python的socket编程入门教程
- gmail smtp 535 5.7.8无法登陆解决
- 百度地图通过经纬度坐标绘制移动路径轨迹
- 苏锡常镇一模数学试卷含官方答案
- layer常用功能-子页面关闭当前窗口-执行子页面方法-方法回调
- open judge 内排序：Freda的越野跑
- Beautifulsoup+正则表达式多线程爬取小姐姐图片
- Android10.0修改默认usb为MTP模式