个人中心
gpt4 book ai didi

html - 旅途中的曲线(时间线)

转载 作者：行者123 更新时间：2023-11-28 14:54:46 25 4
gpt4 key购买 nike

我正在尝试进行如下图所示的旅程(时间线)。 enter image description here

它总共有 15 个阶段，我在不滚动页面的情况下显示它。

我可以把它画成一条直线，但我不能把它们画成整条线。

我怎样才能实现它？

下面是我的html和css代码

.timeline{
      margin-top: 100px;
      /* width: 390px; */
    }
    .row{
           display: flex;
           margin: 0px 0;
           background-image: url('https://image.ibb.co/kCcH1d/dot.png');
           background-repeat-y: no-repeat;
           width: 390px;
         }


         .circle{
           height: 30px;
           width: 30px;
           background: red;
           border-radius: 50%;
           text-align: center;
           margin-right: 50px;
           margin-left: 50px;
           margin-top: -15px;
           display: flex;
           align-items: center;
           justify-content: center;
         }

         .row.right:after {
          height: 70px;
          background-image: url('https://image.ibb.co/eibc1d/dot2.png');
          background-repeat-x: no-repeat;
          content: "";
          width: 2px;
      }
        .row.left:before {
         height: 70px;
         background-image: url('https://image.ibb.co/eibc1d/dot2.png');
         background-repeat-x: no-repeat;
         content: "";
         width: 2px;
     }
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div class="timeline">
      <div class="row right">
        <div class="circle"> A </div>
        <div class="circle"> B </div>
        <div class="circle"> C </div>
      </div>

      <div class="row left">
        <div class="circle"> D </div>
        <div class="circle"> E </div>
        <div class="circle"> F </div>
      </div>

      <div class="row right">
        <div class="circle"> G </div>
        <div class="circle"> H </div>
        <div class="circle"> I </div>
      </div>

      <div class="row left">
        <div class="circle"> J </div>
        <div class="circle"> K </div>
        <div class="circle"> L </div>
      </div>
      <div class="row right">
        <div class="circle"> M </div>
        <div class="circle"> N </div>
        <div class="circle"> 0 </div>
      </div>

    </div>



   
  </body>
</html>

最佳答案

这是一个非常基本的示例，说明如何使用 SVG(我只是使用 Adob​​e Experience Design 绘制它)，圆圈内的父组包含一个 onclick 事件，将索引位置顺序发送到 JS 函数，希望这有帮助

function eventthis(position,obj){
  console.log('clicked in position ',position);
  //do stuff 
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 500">
  <defs>
    <style>
      .cls-1 {
        clip-path: url(#clip-Custom_Size_1);
      }

      .cls-2, .cls-5 {
        fill: none;
      }

      .cls-2, .cls-3 {
        stroke: #707070;
      }

      .cls-3, .cls-6 {
        fill: #fff;
      }

      .cls-4 {
        stroke: none;
      }
    </style>
    <clipPath id="clip-Custom_Size_1">
      <rect width="300" height="500"/>
    </clipPath>
  </defs>
  <g id="Custom_Size_1" data-name="Custom Size – 1" class="cls-1">
    <rect class="cls-6" width="300" height="500"/>
    <path id="Path_1" stroke-dasharray="3" data-name="Path 1" class="cls-2" d="M24.621,20.759s227.3-30.868,227.44,35S57.809,52.051,52.528,108.6s181.931,3.044,188.138,66.8c-2.136,14.672,16.033,76.56-78.386,56.463S42.461,229.014,47.672,265.7s213.89-23.538,204.39,63.023c-5.839,15.735,10.235,57.524-139.437,35.4-71.377-4.844-77.94,71.9-77.94,71.9" transform="translate(11 17)"/>
    <g id="Ellipse_1" data-name="Ellipse 1" class="cls-3" transform="translate(20 25)" onclick="eventthis(1,this)">
      <circle class="cls-4" cx="15.5" cy="15.5" r="15.5"/>
      <circle class="cls-5" cx="15.5" cy="15.5" r="15"/>
    </g>
    <g id="Ellipse_2" onclick="eventthis(2,this)" data-name="Ellipse 2" class="cls-3" transform="translate(248 51)">
      <circle class="cls-4" cx="15.5" cy="15.5" r="15.5"/>
      <circle class="cls-5" cx="15.5" cy="15.5" r="15"/>
    </g>
    <g id="Ellipse_3" onclick="eventthis(3)" data-name="Ellipse 3" class="cls-3" transform="translate(46 103)">
      <circle class="cls-4" cx="15.5" cy="15.5" r="15.5"/>
      <circle class="cls-5" cx="15.5" cy="15.5" r="15"/>
    </g>
    <g id="Ellipse_4" onclick="eventthis(4,this)" data-name="Ellipse 4" class="cls-3" transform="translate(232 162)">
      <circle class="cls-4" cx="15.5" cy="15.5" r="15.5"/>
      <circle class="cls-5" cx="15.5" cy="15.5" r="15"/>
    </g>
    <g id="Ellipse_5" onclick="eventthis(5,this)" data-name="Ellipse 5" class="cls-3" transform="translate(46 235)">
      <circle class="cls-4" cx="15.5" cy="15.5" r="15.5"/>
      <circle class="cls-5" cx="15.5" cy="15.5" r="15"/>
    </g>
    <g id="Ellipse_6" onclick="eventthis(6,this)" data-name="Ellipse 6" class="cls-3" transform="translate(232 300)">
      <circle class="cls-4" cx="15.5" cy="15.5" r="15.5"/>
      <circle class="cls-5" cx="15.5" cy="15.5" r="15"/>
    </g>
    <g id="Ellipse_7" onclick="eventthis(7,this)" data-name="Ellipse 7" class="cls-3" transform="translate(51 384)">
      <circle class="cls-4" cx="15.5" cy="15.5" r="15.5"/>
      <circle class="cls-5" cx="15.5" cy="15.5" r="15"/>
    </g>
  </g>
</svg>

关于html - 旅途中的曲线(时间线)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51184995/

25 4 0
文章推荐： javascript - 如何一键多次更改背景颜色(请仅使用 JavaScript)？
文章推荐： javascript - 将排名号码更改为开始
文章推荐： javascript - 访问嵌套 JSON 对象及其属性 Angularjs
文章推荐： javascript - 限制 CSS 网格中的行数
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com