后端开发教程 - Java、Spring Boot 实战 - msg200.com
CSS中的曲线时间轴
在本文中，我们将为你的网站构建一个曲线时间轴，你以后可以在作品集中使用它来展示你的工作经历或其他你想要的内容。首先，我们来看看我们要构建什么——
现在你已经了解了我们在做什么，所以让我们开始编写代码吧 -
HTML
<div class="timeline">
<div class="outer">
<!-- .... card before this -->
<div class="card">
<div class="info">
<h3 class="title">Title 1</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
</div>
</div>
<!-- ..... you can add more div with "card" class -->
</div>
</div>
在 HTML 代码中，timeline类是主要容器，outer类是所有卡片的包装器。然后我们有一个card在其中添加数据的类。
现在让我们看看 CSS -
CSS
/* Timeline Container */
.timeline {
background: #212121;
margin: 20px auto;
padding: 20px;
}
/* Card container */
.card {
position: relative;
max-width: 400px;
}
/* setting padding based on even or odd /
.card:nth-child(odd) {
padding: 30px 0 30px 30px;
}
.card:nth-child(even) {
padding: 30px 30px 30px 0;
}
/ Global ::before */
.card::before {
content: "";
position: absolute;
width: 50%;
border: solid orangered;
}
/* Setting the border of top, bottom, left */
.card:nth-child(odd)::before {
left: 0px;
top: -4.5px;
bottom: -4.5px;
border-width: 5px 0 5px 5px;
border-radius: 50px 0 0 50px;
}
/* Setting the top and bottom to "-5px" because earlier it was out of a pixel in mobile devices */
@media only screen and (max-width: 400px) {
.card:nth-child(odd)::before {
top: -5px;
bottom: -5px;
}
}
/* Setting the border of top, bottom, right */
.card:nth-child(even)::before {
right: 0;
top: 0;
bottom: 0;
border-width: 5px 5px 5px 0;
border-radius: 0 50px 50px 0;
}
/* Removing the border if it is the first card */
.card:first-child::before {
border-top: 0;
border-top-left-radius: 0;
}
/* Removing the border if it is the last card and it's odd */
.card:last-child:nth-child(odd)::before {
border-bottom: 0;
border-bottom-left-radius: 0;
}
/* Removing the border if it is the last card and it's even */
.card:last-child:nth-child(even)::before {
border-bottom: 0;
border-bottom-right-radius: 0;
}
/* Information about the timeline */
.info {
display: flex;
flex-direction: column;
background: #333;
color: gray;
border-radius: 10px;
padding: 10px;
}
/* Title of the card */
.title {
color: orangered;
position: relative;
}
/* Timeline dot */
.title::before {
content: "";
position: absolute;
width: 10px;
height: 10px;
background: white;
border-radius: 999px;
border: 3px solid orangered;
}
/* text right if the card is even */
.card:nth-child(even) > .info > .title {
text-align: right;
}
/* setting dot to the left if the card is odd */
.card:nth-child(odd) > .info > .title::before {
left: -45px;
}
/* setting dot to the right if the card is odd */
.card:nth-child(even) > .info > .title::before {
right: -45px;
}
Codepen 就在这里
在CodePen上查看Jatin ( @j471n )编写的Pen css-timeline-with-curves。
结论
这仅仅是个开始，您可以将其自定义到下一个级别，也许我会在以后的文章中继续关注这一点，如果您有任何建议，请在下面评论。
现在您可以通过给我买一杯咖啡来表示您的支持。😊👇
