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-weig.........完整代码请登录后点击上方下载按钮下载查看