css实现自适应时间线效果代码-html代码-BFW代码库

css实现自适应时间线效果代码

代码语言：html

所属分类：响应式

代码描述：css实现自适应时间线效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        @import url('https://fonts.googleapis.com/css2?family=Libre+Bodoni&family=Oswald:wght@700&display=swap');
        
        *, *:before, *:after {
          box-sizing: border-box;
        }
        
        html {
          font-family: 'Libre Bodoni', serif;
          background: black;
          color: white;
        }
        
        html, body {
          margin: 0;
        }
        
        /* Timeline */
        
        .timeline {
          /* ----------
           * Variables:
           * Try playing around with these values!
           * ----------
          */
          --size: 2.5rem;
          --style: solid;
          --color: #0a9396;
          --thickness: 5px;
          --spacing-vertical: 40px;
          --spacing-horizontal: 10px;
          
          display: flex;
          flex-flow: column;
          gap: var(--spacing-vertical);
          
          padding-left: var(--size);
          position: relative;
          
          margin: 10px;
          
          counter-reset: timeline;
          
          overflow-x: hidden;
        }
        
        .timeline:before {
          display: block;
          width: 100%;
          height: 100%;
          
          content: "";
          
          border-left: var(--thickness) var(--style) var(--color);
          
          position: absolute;
          top: 0;
          left: calc(var(--size) / 2 - var(--thickness)/2);
        }
        
        .timeline p {
          margin: 0;
          padding: 0;
          
          padding-left: var(--spacing-horizontal);
          
          position: relative;
          counter-increment: timeline;
        }
        
        .timeline p:before {
          width: var(--size);
          height: var(--size);
          
          content: counter(timeline, decimal-leading-zero);
          font-size: calc(var(--size) - 1rem);
          overflow: hidden;
          
          display: flex;
          align-items: center;
          justify-content: center;
          
          position: absolute;
          top: 0;
          left: calc(-1 * var(--size));
          
          background: var(--color);
          border-radius: 50%;
          
          font-weight: bold;
          font-family: 'Oswald', sans-serif;
        }
        
        @media (min-width: 640px) {
          .timeline {
            padding-left: 0;
          }
          
          .timeline:before {
            left: calc(50% - var(--thickness)/2);
          }
          
          .timeline p {
            padding-left: 0;
          }
          
          .timeline p:nth-child(odd) {
            margin-left: calc(50% + var(--size)/2 + var(--spacing-horizontal));
          }
          
          .timeline p:nth-child(even) {
            margin-right: calc(50% + var(--size)/2 + var(--spacing-horizontal));
          }
          
          .timeline p:nth-child(odd):before {
            left: calc(-1 * var(--size) - var(--spacing-horizontal));
          }
          
          .timeline p:nth-child(even):before {
            left: calc(100% + var(--spacing-horizontal));
          }
        }
        
        /* Scrollbar */
        
        ::-webkit-scrollbar-track
        {
        	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        	background-color: #111;
        }
        
        ::-webkit-scrollbar
        {
        	width: 10px;
        	backgroun.........完整代码请登录后点击上方下载按钮下载查看