「这是我参与2022首次更文挑战的第21天，活动详情查看：2022首次更文挑战」。

在我们日常开发中经常用到时间轴组件，现在一些框架基本会提供时间轴组件，但是很多时候不满足我们需求，这个时候就可以用css实现一个简单的时间轴，样式可以自定义，多样化，下面我们一起去看看吧~

简单时间轴

如下图所示，我们经常用的一种简单时间轴，给每个块添加左边框样式就可以了。

html代码如下：

<h5>时间轴</h5>
<div class="message_item">
    <span class="message_time">2022-01-01 10:10:10</span>
    <span class="message_circle"></span>
</div>
<div class="message_item">
    <span class="message_time">2022-01-02 10:10:10</span>
    <span class="message_circle"></span>
</div>

css代码如下：

.message_item{
    width: 300px;
    height: 100px;
    position: relative;
    border-left:1px solid #c5d0da;
    padding-left: 12px;
}
.message_time{
    height: 20px;
}
.message_circle{
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #20dade;
    border-radius: 50%;
    top: 5px;
    left: -5px;
}

复杂时间轴

如下图，有时候时间轴的内容比较丰富，除了展示日期之外，还要展示相关的标题和内容等，我们就可以自定义这个时间轴了。

html代码如下：
正常遍历后台返回的数据，封装成组件，调用就很方便又简单了。

<div class="timeline-small">
    <div class="timeline-small-body">
        <ul>
            <li>
                <div class="bullet pink"></div>
                <div class="date">2022年1月1日</div>
                <div class="desc">
                    <h3>lorem</h3>
                    <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, tempora vero? C</h4>
                </div>
            </li>
            <li>
                <div class="bullet orange"></div>
                <div class="date">2022年1月1日</div>
                <div class="desc">
                    <h3>lorem</h3>
                    <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor doloribus err</h4>
                </div>
            </li>
            <li>
                <div class="bullet blue"></div>
                <div class="date">2022年1月1日</div>
                <div class="desc">
                    <h3>lorem</h3>
                    <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium beatae error </h4>
                </div>
            </li>
            <li>
                <div class="bullet green"></div>
                <div class="date">2022年1月1日</div>
                <div class="desc">
                    <h3>lorem</h3>
                    <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dolorem dolorum eius et eum ex fugi</h4>
                </div>
            </li>
        </ul>
    </div>
</div>

css代码如下：

.timeline-small {
    max-width: 350px;
    max-height: 630px;
    overflow: hidden;
    margin: 30px auto 0;
    box-shadow: 0 0 40px #a0a0a0;
    font-family: 'Open Sans', sans-serif;
}
.timeline-small-body ul {
    padding: 1em 0 0 2em;
    margin: 0;
    list-style: none;
    position: relative;
}
.timeline-small-body ul::before {
    content: ' ';
    height: 100%;
    width: 2px;
    background-color: #d9d9d9;
    position: absolute;
    top: 0;
    left: 2.5em;
    z-index: -1;
}
.timeline-small-body li div {
    display: inline-block;
    margin: 1em 0;
    vertical-align: top;
}
.timeline-small-body .bullet {
    width: 1rem;
    height: 1rem;
    box-sizing: border-box;
    border-radius: 50%;
    background: #fff;
    z-index: 1;
    margin-right: 1rem;
    margin-top: 7%;
}
.timeline-small-body .bullet.pink {
    background-color: plum;
    border: 3px solid palevioletred;
}
.timeline-small-body .bullet.green {
    background-color: lightseagreen;
    border: 3px solid #B0E8E2;
}
.timeline-small-body .bullet.blue {
    background-color: aquamarine;
    border: 3px solid cadetblue;
}
.timeline-small-body .bullet.orange {
    background-color: salmon;
    border: 3px solid #EB8B6E;
}
.timeline-small-body .date {
    width: 25%;
    font-size: 0.75em;
    padding-top: 0.40rem;
    padding-right: 2rem;
}
.timeline-small-body .desc {
    width: 50%;
}
.timeline-small-body h3 {
    font-size: 0.9em;
    font-weight: 400;
    margin: 0;
}
.timeline-small-body h4 {
    margin: 0;
    font-size: 0.7em;
    font-weight: 400;
    color: #808080;
}

信息框

如下图，我们可以用css的伪元素实现小三角，就能实现各种各样的信息框了。

html代码如下：

<h5>信息框</h5>
<div class="box"></div>

css代码如下：

.box{
    width: 100px;
    height: 50px;
    border: 1px solid #c5d0da;
    border-radius: 4px;
    position: relative;
}
.box:after{
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-bottom: 5px solid #c5d0da;
    border-left:5px solid transparent;
    border-right: 5px solid transparent;
    top:-5px;
    left: 45px;
}

进度框

用css实现一个类似水箱的进度球，利用伪元素和动画效果来实现。封装成组件，调用传值，真的很方便。

html代码如下：

<h5>进度框</h5>
<div class="box1">
    <div class="circular">
        <div class="content"> </div>
        <span class="num">40%</span>
    </div>
</div>

css代码如下：

.box1{
    height: 500px;
    padding-top: 100px;
    padding-left: 200px;
}
.circular{
    height: 100px;
    width: 100px;
    border: 2px solid #4682B4;
    border-radius: 50%;
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
}
.num{
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 30;
    transform: translate(-50%,-50%);
}
.content{
    position: absolute;
    height: 30px;
    width: 100px;
    background: #4682B4;
    bottom: 0px;
}
.content::after, .content::before{
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    top: 0;
    left: 50%;
    background-color: rgba(255, 255, 255, .7);
    border-radius: 40% 42% 40% 41%;
    transform: translate(-50%, -100%) rotate(0);
    animation: rotate 8s linear infinite;
    z-index: 10;
}
.content::after{
    border-radius: 42% 40% 41% 40%;
    background-color: rgba(255, 255, 255, .9);
    transform: translate(-50%, -100%) rotate(0);
    animation: rotate 8s linear -5s infinite;
    z-index: 20;
}
@keyframes rotate {
    50% {
        transform: translate(-50%, -103%) rotate(180deg);
    } 100% {
          transform: translate(-50%, -100%) rotate(360deg);
      }
}

以上就是自己用css实现一些小小组件的方法，希望对你有帮助。