CSS实现时间轴

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6     <title>CSS时间轴</title>
  7     <style>
  8         :root{
  9             --dotWidth:10px; /* 中间时间轴上圆的直径 */
 10             --timeasixWidth:4px; /* 中间时间轴的宽度 */
 11             --jiantouWidth:10px; /* 箭头的宽度 */
 12             --timeasixbackgroundColor:#990c76; /* 时间轴的背景颜色 */
 13         }
 14         body {
 15             padding: 0px;
 16             margin: 0px;
 17             background-image: linear-gradient(to right, #bad6b6, #9e6565);
 18             height: 100vh;
 19             width: 100vw;
 20         }
 21         .time-asix{
 22             border: 0;
 23             width: 50%;
 24             margin: 0px auto;
 25         }
 26         .time-asix::after{
 27             content: "";
 28             clear: both;
 29             display: block;
 30 
 31         }
 32         .time-asix > div{
 33             width: calc(50% - var(--timeasixWidth) / 2);
 34             border: 0px;
 35             position: relative;
 36         }
 37         .time-asix .left{
 38             float: left;
 39             border-right: var(--timeasixWidth) solid var(--timeasixbackgroundColor);
 40         }
 41         .time-asix .right{
 42             float: right;
 43             border-left: var(--timeasixWidth) solid var(--timeasixbackgroundColor);
 44         }
 45         .time-asix .dot{
 46             display: block;
 47             width: var(--dotWidth);
 48             aspect-ratio: 1 / 1;
 49             background-color: var(--timeasixbackgroundColor);
 50             position: absolute;
 51             border-radius: 50%;
 52             top: 50%;
 53             margin-top: calc(var(--dotWidth) / -2);
 54         }
 55         .left .dot{
 56             right: calc( var(--timeasixWidth) / -2 + var(--dotWidth) / -2 );
 57         }
 58         .right .dot{
 59             left:calc( var(--timeasixWidth) / -2 + var(--dotWidth) / -2 );
 60         }
 61         .time-asix .jiantou{
 62             display: block;
 63             width: 0px;
 64             aspect-ratio: 1 / 1;
 65             position: absolute;
 66             top: 50%;
 67             margin-top: calc(var(--jiantouWidth) * -1 );
 68             border: var(--jiantouWidth) solid transparent;
 69         }
 70         .left .jiantou{
 71             right: -2px;
 72             border-left: var(--jiantouWidth) solid var(--timeasixbackgroundColor);
 73         }
 74         .right .jiantou{
 75             left:-2px;
 76             border-right: var(--jiantouWidth) solid var(--timeasixbackgroundColor);
 77         }
 78         .time-asix .content{
 79             width: 100%;
 80             height: 100%;
 81             padding: calc(var(--jiantouWidth) + var(--dotWidth) + 11px );
 82             box-sizing: border-box;
 83             background-image:  linear-gradient(to right, #ffffff, #ffffff);
 84             line-height: 20px;
 85         }
 86         .left .content{
 87             border-radius: 10px 0px 0px 10px;
 88         }
 89         .right .content{
 90             border-radius: 0px 10px 10px 0px;
 91         }
 92     </style>
 93 </head>
 94 <body>
 95     <div class="time-asix">
 96         <div class="left">
 97             <span class="dot"></span>
 98             <span class="jiantou"></span>
 99             <div class="content">近期，我国南北方多地持续高温酷热
100 未来一周，北方桑拿天频现
101 不少地方体感温度可达40℃以上
102 将生生被“蒸”服
103 其中，山东、河南等地热得十分突出
104 济南、郑州桑拿天将天天见
105 北京、天津、石家庄等地
106 桑拿天也可持续6天↓↓</div>
107         </div>
108         <div class="right" >
109             <span class="dot"></span>
110             <span class="jiantou"></span>
111             <div class="content">未来十天
112 河北中南部、黄淮、江汉
113 及陕西关中等地将持续高温
114 部分地区最高气温可达39至41℃
115 注意防暑降温！</div>
116         </div>
117         <div class="left"  >
118             <span class="dot"></span>
119             <span class="jiantou"></span>
120             <div class="content">两名年轻人带着两只狗出现在街头。其中一只白色小狗，成为了这场悲剧的主角。他们竟然多次将这只白色小狗强行扔进绿化带。小狗不断发出凄惨的哀鸣，眼神里满是惊恐与不解。它不明白自己为何会被这样对待，挣扎着一次又一次试图折返到主人身边。然而，它的哀求换来的却是主人更加狠心的举动，被扔到了更远处。最终，两人骑上电动车，带着另一只狗扬长而去，只留下那只被遗弃的小狗在原地无助地呜咽。</div>
121         </div>
122         <div class="right"  >
123             <span class="dot"></span>
124             <span class="jiantou"></span>
125             <div class="content">fillRect() 方法使用 fillStyle 属性所指定的颜色、渐变和模式来填充指定的矩形。 fillRect() 方法的当前实现还清除了路径,就好像beginPath()已经调用了。这一令人惊讶的行为可能不会标准化,因此不</div>
126         </div>
127          <div class="left"  >
128             <span class="dot"></span>
129             <span class="jiantou"></span>
130             <div class="content">
131                 <img src="http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960" style="width: 300px;">
132             </div>
133         </div>
134     </div>
135 </body>
136 </html>
效果图：
posted on 2025-07-10 14:57 华安阅读(20) 评论(0) 收藏举报
刷新页面返回顶部
huaan011

CSS实现时间轴

导航

公告
