笔记大全

使用CSS3实现简单时间轴效果附代码

更新时间：2023-10-02

前言：

如今，满屏的信息与炫目的广告让人感到疲惫，一款适合阅读的清新界面更受用户喜爱。时间轴效果是一种清晰易懂、规范有序的页面布局方式，被许多网站采用，同时也是前端开发人员需要掌握的基础技能。本文将结合HTML和CSS3，介绍如何实现简单的时间轴效果。

一、HTML基础结构

在开始设计时间轴页面前，需要确定好HTML基础结构，以下是最基础的HTML结构：

<div class="timeline">
    <div class="item">
        <div class="circle"></div>
        <h2 class="year">2013</h2>
        <div class="info">
            <h3>这是标题</h3>
            <p>这是相关内容信息</p>
        </div>
    </div>
    <div class="item">
        <div class="circle"></div>
        <h2 class="year">2015</h2>
        <div class="info">
            <h3>这是标题</h3>
            <p>这是相关内容信息</p>
        </div>
    </div>
</div>

以上结构中，.timeline定义了整个时间轴页面的布局，.item为时间轴每个节点的布局，.circle为每个节点外部圆圈的布局，.year为年份显示布局，.info为每个节点详情信息的布局。

二、CSS3样式设计

在HTML基础结构确定后，开始编写样式设计，以下是CSS3样式代码。先设置timeline基础样式，包括宽度、高度、边框和布局方式

.timeline{
    width: 800px;
    margin: 0 auto;
    position: relative;
    border-left: 2px solid #dddddd;
}

接着，设计每个节点.item的基础样式，包括宽度、高度、边框、定位和背景颜色。

.item{
    width: 100%;
    position: relative;
    padding-right: 50px;
    margin-bottom: 50px;
}
.item:before{
    content: "";
    display: table;
    clear: both;
}
.item:after{
    content: "";
    display: table;
    clear: both;
}
.item .circle{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #a5d5d6;
    background-color: #fff;
    position: absolute;
    top: 15px;
    right: -17px;
}
.item:nth-child(2n) .circle{
    border-color: #e69041;
}
.item:last-child{
    padding-bottom: 0;
}
.item:last-child:before{
    display: none;
}
.item .year{
    position: absolute;
    top: 0;
    right:0;
    width: 60px;
    text-align: center;
    font-size: 18px;
    color: #e69041;
    text-transform: uppercase;
    font-family: Arial, sans-serif;
    font-weight: bold;
}

上述代码中，:before和:after为清除浮动，.circle和.year是用于设置圆圈和文字的展示样式，并通过nth-child伪类实现不同节点的不同样式。最后，设置每个节点中信息.info的样式。

.item .info{
    margin-right: 60px;
}
.item .info h3{
    font-size: 24px;
    color: #333;
    margin: 0 0 10px 0;
    font-family: Arial, sans-serif;
}
.item .info p{
    font-size: 16px;
    color: #999;
    margin: 0;
    line-height: 1.5;
    font-family: Arial, sans-serif;
}

三、效果展示

在HTML基础结构和CSS3样式设计完成后，运行html文件即可看到效果。效果如下图所示： ![时间轴效果展示](https://cdn.luogu.com.cn/upload/image_hosting/ed5aa811.png)

四、总结

时间轴思路简单，实现也很容易，需要使用CSS3技术实现动态效果展示，并设置基本样式，即可实现一个简单的时间轴页面。同时，这种页面布局方式也很适合展示时间相关信息，被广泛运用于活动宣传、历史记录等信息的展示。

c语言编程笔录