html+css实现横向时间线

实现效果

布局思路

知识点

中间横线：position垂直居中

圆：定位居中，添加背景色，boder

上下错位文字：奇偶选择器控制定位位置

左右另外添加一个盒子

箭头：css绘制三角形然后居中

width: 0; height:0; border:10px solid transparent; border-left-color: #1890FF; position: absolute; right: -10px; top: 50%; transform: translateY(-50%);

实现代码

html

<div style="width:100%;"><div class="timeaxis"><div class="box1 li"><div class="line"></div></div><div class="boxs li" v-for="item in list" :key="item.index"><div class="line"></div><div class="circular">{{ item.year }}</div><div class="desc">{{ item.condation }}</div></div><div class="box1 li"><div class="line"></div><divstyle="width: 0;height:0;border:10px solid transparent;border-left-color: #1890FF;position: absolute;right: -10px;top: 50%;transform: translateY(-50%);"></div></div></div></div>

css

.timeaxis {overflow: hidden;width: max-content;position: relative;height: 150px;left: 50%;transform: translateX(-50%);
}.box1 {width: 60px;float: left;height: 150px;position: relative;
}.boxs {overflow: hidden;float: left;position: relative;width: 180px;height: 150px;
}.line {border-bottom: 1px solid #409eff;position: absolute;width: 100%;top: 50%;transform: translateY(-50%);left: 0;
}.circular {font-size: 14px;line-height: 50px;text-align: center;z-index: 10;border: 2px solid #1890FF;width: 50px;height: 50px;border-radius: 50px;background: white;margin: auto;position: absolute;top: 50%;transform: translate(-50%, -50%);left: 50%;
}.boxs:nth-child(odd) .desc {text-align: center;position: absolute;top: 0;width: 100%;
}.boxs:nth-child(even) .desc {text-align: center;position: absolute;bottom: 0;width: 100%;
}

html+css实现横向时间线相关推荐

Vue+Element-ui实例_使用flexslider插件设计横向时间线
下面是做了一个类似时间线(history事件线)的页面,主要是记录一下log,或者history的操作记录. 主要难点: (1)一般的插件时间线例如(elementUI中的el-timeline)就是 ...
layui横向时间线_炒股一生只买一种股票：股价K线形成这样后，必然有一波拉升...
在上升趋势中做多; 在下跌趋势中做空; 在震荡区间顶部做空.底部做多. 大趋势像是遛狗的主人,他走的比较慢:狗就像中短期的走势,活蹦乱跳,有时候跑过头,又会回来找主人一下,然后再去东闻闻.西嗅嗅.最后 ...
layui横向时间线_用打火机或烟头烧羽毛球拍线坏处多
在我们日常打球的过程中,由于瞬间爆发力大.高频率击球.拍线磨损.击球点偏离等情况,都会导致断线.那么,断线之后,需要做些什么呢? 感言: 在以前,我们的羽毛球拍的材质是木拍.铝合金等材料制作的拍框,韧 ...
layui横向时间线_操盘线：线上阴线满仓，线下阳线清仓
炒股时间长了,越来越觉得要在股市中生存,需要的不是掌握多少技术指标,而是要树立正确的理念,也就是说股市检验的是你的性格. 股市如人生,炒股即做人,贪婪.恐惧.多疑.浮躁,人性的弱点都在股市中暴露无遗 ...
layui横向时间线_一些不起眼但又非常的实用的PPT制作技巧，大大节省PPT制作时间...
从PPT小白到PPT大神的过程中,我们总会无数次碰壁,无数次陷入困境.今天为大家带来的是一些不起眼的PPT技巧,但是非常的实用,不信就看下文吧! 自定义访问工具栏在PPT中我们有很多的常用操作,例如 ...
【案例练习】15—27个网页设计的 HTML 时间线
来源 | https://medium.com/@niemvuilaptrinh/27-html-timeline-for-web-design-979b8e5d1c05 今天这篇文章,我跟大家分享2 ...
html怎么实现蓝色垂直的直线,css实例教程一款纯css实现的垂直时间线效果
今天给大家分享一款纯css实现的垂直时间线效果.垂直时间线适合放在类似任务时间安排的网页上.该实现采用了蓝色作为主题色,界面效果还不错.一起看下效果图: 实现的代码. html代码: 复制代码代码如下 ...
用HTML CSS 实现简洁美观的时间线（历史年表）
前几天在B站刷到尼尔后突发奇想,就想给尼尔做一个简单的小网站,在思考如何体现尼尔的世界观的时候想到了使用时间线的方式,将所有时间的事件罗列起来.所以就试着做了一下,这种方式可以很直观的表现一些历史上发 ...
水平时间轴css代码_使用CSS和JavaScript构建水平时间线
水平时间轴css代码在上一篇文章中 ,我向您展示了如何从头开始构建响应式垂直时间轴. 今天,我将介绍创建相关的水平时间线的过程. 与往常一样,要初步了解我们将要构建的内容,请查看相关的CodePen ...

html+css实现横向时间线

html+css实现横向时间线相关推荐

最新文章

热门文章