【每日一练】178—CSS实现一个漂亮的时间线效果

每日一练1年前 (2023)更新 admin

2,420 0 5

写在前面

有件事情，我想提前跟大家说一下，由于时间与精力有限，【每日一练】栏目，在写满200练后，此栏目内容将另外一种形式进行更新，每次更新的内容，可能会比较多，所以，也不会在公号文章里粘贴练习源码，但是还是会把练习最终效果分享给大家，大家可以根据自己的需要，到我们的网站上去获取练习的源码。

【web前端开发】官方地址：www.webqdkf.com

【每日一练】栏目地址：www.webqdkf.com/code/practice

同时，网站上的内容更多，里面也有很多我翻译的图文教程，这些教程，都是需要翻墙才能看到的，我现在通过翻译，把它放在网站上了，供大家免费学习使用，也希望对想学习前端技术或者走互联网开发这块的小伙伴有所帮助。

当然，如果您还有什么好的建议或者意见，也可以在留言区给我留言交流。

现在，我们还是一起来看一下今天练习的最终效果：

HTML代码：

<!DOCTYPE html>

<html lang=”en” >

<head>

<meta charset=”UTF-8″>

<title>【每日一练】178—CSS实现一个漂亮的时间线效果</title>

<link rel=”stylesheet” href=”style.css”>

</head>

<body>

<section class=”design-section”>

<div class=”timeline”>

<div class=”timeline-empty”>

</div>

<div class=”timeline-middle”>

<div class=”timeline-circle”></div>

</div>

<div class=”timeline-component timeline-content”>

<h3>HTML</h3>

<p>14种CSS实现水平或垂直居中的技巧</p>

</div>

<div class=”timeline-component timeline-content”>

<h3>CSS</h3>

<p>14种CSS实现水平或垂直居中的技巧</p>

</div>

<div class=”timeline-middle”>

<div class=”timeline-circle”></div>

</div>

<div class=”timeline-empty”>

</div>

<div class=”timeline-empty”>

</div>

<div class=”timeline-middle”>

<div class=”timeline-circle”></div>

</div>

<div class=” timeline-component timeline-content”>

<h3>Javascript</h3>

<p>7个在 JavaScript 中编写函数的基础知识</p>

</div>

</div>

</div>

</section>

</body>

</html>

CSS代码：

.design-section {

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

background-color: #1f1f1f;

min-height: 100vh;

padding: 100px 0;

font-family: Jost;

}

.design {

display: flex;

align-items: center;

justify-content: center;

}

.timeline {

width: 80%;

height: auto;

max-width: 800px;

margin: 0 auto;

display: flex;

flex-direction: column;

}

.timeline-content {

padding: 20px;

background: #1f1f1f;

-webkit-box-shadow: 5px 5px 10px #1a1a1a, -5px -5px 10px #242424;

box-shadow: 5px 5px 10px #1a1a1a, -5px -5px 10px #242424;

border-radius: 5px;

color: white;

padding: 1.75rem;

transition: 0.4s ease;

overflow-wrap: break-word !important;

margin: 1rem;

margin-bottom: 20px;

border-radius: 6px;

}

.timeline-component {

margin: 0px 20px 20px 20px;

}

@media screen and (min-width: 768px) {

.timeline {

display: grid;

grid-template-columns: 1fr 3px 1fr;

}

.timeline-middle {

position: relative;

background-image: linear-gradient(45deg, #F27121, #E94057, #8A2387);

width: 3px;

height: 100%;

}

.main-middle {

opacity: 0;

}

.timeline-circle {

position: absolute;

top: 0;

left: 50%;

width: 15px;

height: 15px;

border-radius: 50%;

background-image: linear-gradient(45deg, #F27121, #E94057, #8A2387);

-webkit-transform: translateX(-50%);

transform: translateX(-50%);

}

}