CSS实现时间线、时间轴的布局样式实现效果

最新推荐文章于 2024-05-08 15:03:49 发布

NPC-

最新推荐文章于 2024-05-08 15:03:49 发布

阅读量1k

点赞数 1

文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_47336389/article/details/134752853

版权

本文介绍了如何利用CSS实现时间线和时间轴的布局样式。通过HTML基础结构，结合SCSS（SASS）进行样式设置，以及在Vue3环境下进行方法调用，详细展示了创建时间线布局的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

示例图片：
在这里插入图片描述
声明：用的结构vue3+scss（但是我也是新手所以没有写很难我也不会所以就当成vue跟css就行

HTML布局

<div class="yx-look-left-content">//外面的边框盒子
				//具体的每一行
                <div
                    class="yx-look-left-content-circle"
                    v-for="(item, i) in 5"
                    :key="i"
                    @click="handleClick(i)"//点击触发添加选中样式
                    :class="{ active: isActive(i) }"  //动态添加选中样式
                >
                    <div class="time">2023-03-29</div>//具体的展示数值举例
                </div>
            </div>

CSS样式

&-content {
   //外面的边框架子
            border-radius: 0.1rem;
            border: 0.1rem solid #0080ff;
            background: rgba(13, 64, 156,

最低0.47元/天解锁文章