先看效果

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>时间轴</title><style>* {margin: 0;padding: 0;}body {background-color: #f1f1f1;}.time_axis {width: 802px;/* height: 700px; *//* border: 1px solid #010101; */margin: 0 auto;margin-top: 10px;}.time_left {width: 400px;/* height: 300px; */float: left;/* background-color: green; */border-right: 2px solid #b1bbf9;position: relative;}.time_rigth {width: 400px;/* height: 300px; */float: right;/* background-color: blue; */border-left: 2px solid #b1bbf9;position: relative;}.time_axis .time_dian {width: 10px;height: 10px;background-color: #FFF;display: block;border: 2px solid #b1bbf9;border-radius: 50%;position: absolute;top: 50%;margin-top: -7px;}.time_left .time_dian {right: -9px;}.time_rigth .time_dian {left: -9px;}.time_axis .jiantou_rigth {position: absolute;top: 50%;margin-top: -16px;left: 5px;width: 0;height: 0;border-right: 15px solid #FFF;border-bottom: 15px solid transparent;border-top: 15px solid transparent;}.time_axis .jiantou_left {position: absolute;top: 50%;right: 5px;margin-top: -16px;width: 0;height: 0;width: 0;height: 0;border-top: 15px solid transparent;border-left: 15px solid #FFF;border-bottom: 15px solid transparent;}.time_axis .con{/* height: 200px; */background-color: #FFF;padding: 15px;border-radius:10%;}.time_axis .time_left .con{margin-right: 20px;}.time_axis .time_rigth .con{margin-left: 20px;}.con img{width: 100%;}</style>
</head><body><div class="time_axis"><div class="time_left"><span class="time_dian"></span><span class="jiantou_left"></span><div class="con"><h3>测试</h3><span>11111</span><img src="https://img1.baidu.com/it/u=413643897,2296924942&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1681405200&t=9243e3c17ae7567e4725cc9b65d4fccc" alt=""></div></div><div class="time_rigth"><span class="time_dian"></span><span class="jiantou_rigth"></span><div class="con"><h3>测试11</h3><span>11111111</span><img src="https://img1.baidu.com/it/u=413643897,2296924942&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1681405200&t=9243e3c17ae7567e4725cc9b65d4fccc" alt=""></div></div><div class="time_left"><span class="time_dian"></span><span class="jiantou_left"></span><div class="con"><h3>测试11</h3><span>11111111</span><img src="https://img1.baidu.com/it/u=413643897,2296924942&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1681405200&t=9243e3c17ae7567e4725cc9b65d4fccc" alt=""></div></div><div class="time_rigth"><span class="time_dian"></span><span class="jiantou_rigth"></span><div class="con"><h3>测试11</h3><span>11111111</span><img src="https://img1.baidu.com/it/u=413643897,2296924942&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1681405200&t=9243e3c17ae7567e4725cc9b65d4fccc" alt=""></div></div></div>
</body></html>

HTML+CSS实现时间轴效果相关推荐

小程序时间轴和地区列表的实现，js+css实现时间轴效果
老规矩先看效果图先来看左图的地区列表是如何实现的. 我们在解析数据之前,要先看下数据结构 [{"_id": "XL28U3kPDdDCJ9m0"," ...
用 CSS 从零写一个时间轴效果
时间轴效果介绍在前端开发中,我们会遇到一些场景特别适合用时间轴来展示,例如下面按照日期时间来记录发生的事件: 还可以做成下面这种比较流行的左右对称卡片风格的时间轴: 如果再稍加装饰,还能有更加高大上 ...
js实现的时间轴效果
今天整理以前的资料发现以前写的一个时间轴效果,当时也是网上找了很久没有找到,就自己写了一个,现在发出来给有需要的人,代码写的可能有点乱. 效果图: 下面是美工做的设计图的效果(有个美工就是好): 下面 ...
html简单垂直时间轴,简单的响应式垂直时间轴效果
这是一款简单的响应式垂直时间轴效果.该垂直时间轴效果使用bootstrap网格进行布局,在小屏幕设备上会将所有的时间节点占满整行垂直排列. 使用方法在页面中引入bootstrap.min.css文件 ...
仿呱呱购物流时间轴效果(swift)
仿呱呱购物流时间轴效果(swift): 在呱呱购App二期的优化过程中,发现物流信息详情界面显示的不太友好,由此,修改了部分代码使cell实现自适应,完美显示具体的物流轨迹.我使用了快递鸟的api,将 ...
Android实训案例(三)——实现时间轴效果的ListView,加入本地存储，实现恋爱日记的效果！
Android实训案例(三)--实现时间轴效果的ListView,加入本地存储,实现恋爱日记的效果! 感叹离春节将至,也同时感叹时间不等人,一年又一年,可是我依然是android道路上的小菜鸟,这篇讲 ...
html css 水平时间轴,纯css+js水平时间轴
自定义,并自动加载时间节点当前时间节点居中,突出显示时间动态无痕添加效果图: 初始状态时间左走到一定2016.1月后 html: + - 对应 JS 设置处理: var left = docu ...
vue实现物流时间轴效果
实现效果 html <ul class="time-axis" :class="{ 'is-done': item.state === 1 }" v-fo ...
html5手机端纵向时间轴,HTML+CSS实现时间轴（移动端）
html: 01:06 HTML5+CSS3实现的响应式垂直时间轴faffHTML5+CSS3实现的响应式垂直时间轴 12:25 jQuery+PHP动态数字展示效果 12:20 PHP操作Sessi ...

HTML+CSS实现时间轴效果

先看效果

HTML+CSS实现时间轴效果相关推荐

最新文章

热门文章