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

每日一练10个月前更新 admin
1,574 0

写在前面

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

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

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

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

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

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

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

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%);
  }
}

写在最后

以上就是【每日一练】的全部内容,希望今天的小练习对你有用,如果你觉得有帮助的话,请点赞我,关注我,并将它分享给你身边做开发的朋友,也许能够帮助到他。

我是杨小爱,我们明天见。

© 版权声明

相关文章

暂无评论

暂无评论...