轻松⾃定义⼀个响应式的timeline时间线组件（横向和纵向）1、先来看看效果
2、说明
项⽬中⽤到的，思路很简单，就⽤flex布局来实现响应式，我这⾥就以横向为例（竖向的⽐较简单就不啰嗦了），后⾯需要增加单个点选中状态，添加⽂字以及触发各种动画效果，可以尝试加上去，配合vue等框架可以很容易开发成通⽤组件。关于更多巧妙的组件封装，欢迎加⼊QQ，共同讨论，或者438863673
3、上代码
<!--html代码--/>
<div class="container">
<div >
<div >
<div ></div>
<div class="dot"></div>
<div class="item"></div>
</div>html的flex布局
<div >
<div class="item"></div>
<div class="dot"></div>
<div class="item"></div>
</div>
<div >
<div class="item"></div>
<div class="dot"></div>
<div class="item"></div>
</div>
<div >
<div class="item"></div>
<div class="dot"></div>
<div ></div>
</div>
</div>
</div>
css也很简单
<style>
.container{
width: 200px;
height: 200px;
border:1px solid red;
}
.dot{
border:2px solid #007Aff;
width: 5px;
height: 5px;
border-radius: 5px;
background: white;
margin: auto;
margin-bottom: -4px;
}
.item{
flex:1;
border-bottom:1px solid #D84C29;
}
</style>
4、总结
是不是够简单的? 就⽤了⼀下绝对定位和弹性布局，屏幕⼤⼩都能正常显⽰。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。