时间戳

首页 > 解决方案 > 如何制作曲线以连接 HTML 和 CSS 中的两个节点？

javascript - 如何制作曲线以连接 HTML 和 CSS 中的两个节点？

问题描述

我有两个 div，我想使用曲线图连接它们。知道如何实现吗？如果您运行下面提到的代码，您会看到名为“命令序列开始”的标签。和两个 div 分别为 W_SCMadl_refresh 和 WIN64_MCCMon，现在我想使用曲线连接这两个 div 到“命令序列开始”

.mv-thread,
.mv-sequence {
  display: inline-block;
}

.mv-sequence,
.mv-subsequence {
  border: solid 1px #e0e0e0;
  border-radius: 15px;
  margin: 85px;
  padding: 10px;
  text-align: center;
}

.mv-sequence>.title,
.mv-subsequence>.title {
  font-size: 17px;
  background-color: cadetblue;
  border-radius: 7px 0px;
  color: #fff;
  font-weight: bold;
  padding: 10px;
}

.mv-sequence>.body,
.mv-subsequence>.body {
  min-width: max-content;
  display: inline-block;
  text-align: left;
}

.mv-command>div.indicator {
  display: inline-block;
  width: 32px;
  height: 32px;
  line-height: 32px;
  border-radius: 32px;
  text-align: center;
  font-size: 17px;
}

.mv-command>span {
  font-size: 13px;
  font-weight: bold;
}

.mv-command:before {
  content: "";
  background-color: #000;
  width: 3px;
  height: 16px;
  display: block;
  margin-left: 14px;
}


/* for done*/

.mv-command.done:before {
  background: #477738;
}

.mv-cmd-done {
  background: #57b847;
}

.mv-cmd-done>a>span,
.mv-command.done>span {
  color: #477738;
}


/* for aborted*/

.mv-command.aborted:before {
  background: #844138;
}

.mv-cmd-aborted {
  background: #ea4f37;
}

.mv-cmd-aborted>a>span,
.mv-command.aborted>span {
  color: #844138;
}


/* for waiting*/

.mv-command.waiting:before {
  background-color: #808080;
}

.mv-cmd-waiting {
  background: #f1f1f1;
}

.mv-cmd-waiting>span,
.mv-command.waiting>span {
  color: #808080;
}


/* for disabled*/

.mv-command.disabled:before {
  background: #80808080;
}

.mv-cmd-disabled {
  border: 1px solid #80808080;
}

.mv-cmd-disabled>span,
.mv-command.disabled>span {
  color: #80808080;
}


/* for running */

.mv-command.running:before {
  background: #005686;
}

.mv-cmd-running {
  border: 1px solid #005686;
}

.mv-cmd-running>a>span {
  color: #80808080;
  animation: mymove 2s infinite;
}

@keyframes mymove {
  from {
    color: #fff;
  }
  to {
    color: #368ec4;
  }
}

.mv-command.running>span {
  color: #80808080;
  animation: mymove 2s infinite;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="styles.css">
  <title>ReleaseWork</title>
</head>

<body>
  <div>
    <div class="mv-sequence">
      <div class="body">
        <div class="mv-thread">
          <table style="width:100%">
            <span class="mv-sequence" style="background-color: green; color: aliceblue;">Command Sequence Starting</span>
            <tbody>
              <tr>
                <td style="vertical-align: top;">
                  <div>
                    <div class="body">
                      <div>
                        <div class="body">
                          <div class="mv-command done">
                            <span style="display:none" class="cmd-text">[ScmRefresh]</span>
                            <div data-state="Done" data-start="2020-10-22_18-13-49" data-end="2020-10-22_18-14-40" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator mv-cmd-done"><a href="Main/MainThread/Release/Windows_SCM/W_SCMadl_refresh.xml"><span
        class="fonticon fonticon-check"></span></a></div>
                            <span>W_SCMadl_refresh</span>
                          </div>
                          <div class="mv-command done">
                            <span style="display:none" class="cmd-text">adl_photo</span>
                            <div data-state="Done" data-start="2020-10-22_18-14-40" data-end="2020-10-22_18-14-41" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator mv-cmd-done"><a href="Main/MainThread/Release/Windows_SCM/W_adl_photo.xml"><span
        class="fonticon fonticon-check"></span></a></div>
                            <span>W_adl_photo</span>
                          </div>
                          <div class="mv-command done">
                            <span style="display:none" class="cmd-text">code:[ScmCollect]
        -cr_later</span>
                            <div data-state="Done" data-start="2020-10-22_18-14-42" data-end="2020-10-22_18-14-43" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator mv-cmd-done"><a href="Main/MainThread/Release/Windows_SCM/W_adl_collect.xml"><span
        class="fonticon fonticon-check"></span></a></div>
                            <span>W_adl_collect</span>
                          </div>
                          <div class="mv-command done">
                            <span style="display:none" class="cmd-text">adl_collect_cr</span>
                            <div data-state="Done" data-start="2020-10-22_18-14-43" data-end="2020-10-22_18-14-44" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator mv-cmd-done"><a href="Main/MainThread/Release/Windows_SCM/W_adl_collect_cr.xml"><span
        class="fonticon fonticon-check"></span></a></div>
                            <span>W_adl_collect_cr</span>
                          </div>
                          <div>
                            <div class="body">
                              <div class="mv-command aborted">
                                <span style="display:none" class="cmd-text">[ScmSync]</span>
                                <div data-state="Aborted" data-start="2020-10-22_18-14-44" data-end="2020-10-22_18-14-54" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator mv-cmd-aborted"><a href="Main/MainThread/Release/Windows_SCM/Windows_SCM_sync/W_adl_sync.xml"><span
        class="fonticon fonticon-wrong"></span></a></div>
                                <span>W_adl_sync</span>
                              </div>
                              <div class="mv-command waiting">
                                <span style="display:none" class="cmd-text">[ScmAttach]
        -attached_fw_mod</span>
                                <div data-state="Waiting" data-start="-1" data-end="-1" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator
        mv-cmd-waiting"><span class="fonticon fonticon-clock"></span></div>
                                <span>W_adl_attach</span>
                              </div>
                            </div>
                          </div>
                          <div class="mv-command waiting">
                            <span style="display:none" class="cmd-text">adl_publish</span>
                            <div data-state="Waiting" data-start="-1" data-end="-1" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator
        mv-cmd-waiting"><span class="fonticon fonticon-clock"></span></div>
                            <span>W_adl_publish</span>
                          </div>
                          <div class="mv-command waiting">
                            <span style="display:none" class="cmd-text">code:[ScmDsWs]
        [workspace]</span>
                            <div data-state="Waiting" data-start="-1" data-end="-1" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator
        mv-cmd-waiting"><span class="fonticon fonticon-clock"></span></div>
                            <span>W_adl_ds_ws</span>
                          </div>
                        </div>
                      </div>
                      <div class="mv-thread">
                        <table style="width:100%">
                          <tbody>
                            <tr>
                              <td style="vertical-align: top;">
                                <div>
                                  <div class="body">
                                    <div>
                                      <div class="body">
                                        <div class="mv-command waiting">
                                          <span style="display:none" class="cmd-text">if not exist
        [WIN64_DRIVE]\[WIN64_DIR]\[PreqDir] mkdir
        [WIN64_DRIVE]\[WIN64_DIR]\[PreqDir]</span>
                                          <div data-state="Waiting" data-start="-1" data-end="-1" data-profile="TCK" data-system="WIN64" class="indicator
        mv-cmd-waiting"><span class="fonticon fonticon-clock"></span></div>
                                          <span>W64_Shared_Preq_mkdir</span>
                                        </div>
                                        <div class="mv-command waiting">
                                          <span style="display:none" class="cmd-text">mkCopyPreq -W
        [WIN64_DRIVE]\[WIN64_DIR] -p [WIN_PREQ_DIR] -t
        [WIN64_DRIVE]\[WIN64_DIR]\[PreqDir] -d -o win_b64  -retry 10 -time 30
        -copyretry 10 -copytime 30</span>
                                          <div data-state="Waiting" data-start="-1" data-end="-1" data-profile="CD_WS_64b_Win" data-system="WIN64" class="indicator
        mv-cmd-waiting"><span class="fonticon fonticon-clock"></span></div>
                                          <span>W64_mkCopyPreq</span>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="mv-thread">
                                      <table style="width:100%">
                                        <tbody>
                                          <tr>
                                            <td style="vertical-align: top;">
                                              <div>
                                                <div class="body"></div>
                                              </div>
                                            </td>
                                          </tr>
                                        </tbody>
                                      </table>
                                    </div>
                                  </div>
                                </div>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
                    </div>
                  </div>
                </td>
                <td style="vertical-align: top;">
                  <div>
                    <div class="body">
                      <div class="mv-thread">
                        <table style="width:100%">
                          <tbody>
                            <tr>
                              <td style="vertical-align: top;">
                                <div class="mv-command
            done">
                                  <div data-state="Done" data-start="2020-10-22_18-13-49" data-end="2020-10-22_18-14-53" data-profile="CD" data-system="WIN64" class="indicator mv-cmd-done"><a><span
        class="fonticon fonticon-check"></span></a></div>
                                  <span>WIN64_MCCMon</span>
                                </div>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
                    </div>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

这是我想要的那种东西：

在此处输入图像描述

标签： javascripthtmlcss

解决方案

  .mv-thread,
.mv-sequence {
  display: inline-block;
}

.mv-sequence,
.mv-subsequence {
  border: solid 1px #e0e0e0;
  border-radius: 15px;
  margin: 85px;
  padding: 10px;
  text-align: center;
}

.mv-sequence>.title,
.mv-subsequence>.title {
  font-size: 17px;
  background-color: cadetblue;
  border-radius: 7px 0px;
  color: #fff;
  font-weight: bold;
  padding: 10px;
}

.mv-sequence>.body,
.mv-subsequence>.body {
  min-width: max-content;
  display: inline-block;
  text-align: left;
}

.mv-command>div.indicator {
  display: inline-block;
  width: 32px;
  height: 32px;
  line-height: 32px;
  border-radius: 32px;
  text-align: center;
  font-size: 17px;
}

.mv-command>span {
  font-size: 13px;
  font-weight: bold;
}

.mv-command:before {
  content: "";
  background-color: #000;
  width: 3px;
  height: 16px;
  display: block;
  margin-left: 14px;
}


/* for done*/

.mv-command.done:before {
  background: #477738;
}

.mv-cmd-done {
  background: #57b847;
}

.mv-cmd-done>a>span,
.mv-command.done>span {
  color: #477738;
}


/* for aborted*/

.mv-command.aborted:before {
  background: #844138;
}

.mv-cmd-aborted {
  background: #ea4f37;
}

.mv-cmd-aborted>a>span,
.mv-command.aborted>span {
  color: #844138;
}


/* for waiting*/

.mv-command.waiting:before {
  background-color: #808080;
}

.mv-cmd-waiting {
  background: #f1f1f1;
}

.mv-cmd-waiting>span,
.mv-command.waiting>span {
  color: #808080;
}


/* for disabled*/

.mv-command.disabled:before {
  background: #80808080;
}

.mv-cmd-disabled {
  border: 1px solid #80808080;
}

.mv-cmd-disabled>span,
.mv-command.disabled>span {
  color: #80808080;
}


/* for running */

.mv-command.running:before {
  background: #005686;
}

.mv-cmd-running {
  border: 1px solid #005686;
}

.mv-cmd-running>a>span {
  color: #80808080;
  animation: mymove 2s infinite;
}

@keyframes mymove {
  from {
    color: #fff;
  }
  to {
    color: #368ec4;
  }
}

.mv-command.running>span {
  color: #80808080;
  animation: mymove 2s infinite;
}
.vLine{
 background: gray; border: 1px solid gray; border-image: none; left: 100px; top: 38px; width: 1px; height: 50px; position: absolute;
}
.div1{
border-radius: 35px; 
border: 3px solid gray; 
border-image: none; 
left: 17px; 
top: 148px; 
width: 212px; 
height: 100px; 
position: 
absolute; clip: rect(0px, 100px, 70px, 0px);
}
.div2{
border-radius: 35px; 
border: 3px solid gray; 
border-image: none; 
left: 16px; 
top: 148px; 
width: 212px; 
height: 100px; 
position: 
absolute; clip: rect(0px, 264px, 70px, 180px);
}
.div3{
border-radius: 30px; 
border: 3px solid gray; 
border-image: none; 
left: 60px; 
top: 95px; 
width: 100px; 
height: 50px; 
position: 
absolute; clip: rect(30px, 264px, 100px, 50px);
}
.div4{
border-radius: 35px; 
border: 3px solid gray; 
border-image: none; 
left: 162px; 
top: 95px; 
width: 100px; 
height: 50px; 
position: 
absolute; clip: rect(30px, 40px, 100px, 0px);
}
.div5{
border-radius: 35px; 
border: 3px solid gray; 
border-image: none; 
left: 0px; 
top: 222px; 
width: 230px; 
height: 490px; 
position: absolute; 
clip: rect(40px, 450px, 500px, 40px);
}
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="styles.css">
  <title>ReleaseWork</title>

</head>

<body>
  <div>
    <div class="mv-sequence">
      <div class="body">
        <div class="mv-thread" style="position:relative" >
          <table style="width:100%">
          
            <span class="mv-sequence" style="background-color: green; color: aliceblue; position:relative">Command Sequence Starting

            </span>
            
            <tbody>
              <tr>
                <td style="vertical-align: top;">
                  <div>
                    <div class="body">
                      <div>
                        <div class="body">
                          <div class="mv-command done">
                            <span style="display:none" class="cmd-text">[ScmRefresh]</span>
                            <div data-state="Done" data-start="2020-10-22_18-13-49" data-end="2020-10-22_18-14-40" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator mv-cmd-done"><a href="Main/MainThread/Release/Windows_SCM/W_SCMadl_refresh.xml"><span
        class="fonticon fonticon-check"></span></a></div>
                            <span>W_SCMadl_refresh</span>
                          </div>
                          <div class="mv-command done">
                            <span style="display:none" class="cmd-text">adl_photo</span>
                            <div data-state="Done" data-start="2020-10-22_18-14-40" data-end="2020-10-22_18-14-41" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator mv-cmd-done"><a href="Main/MainThread/Release/Windows_SCM/W_adl_photo.xml"><span
        class="fonticon fonticon-check"></span></a></div>
                            <span>W_adl_photo</span>
                          </div>
                          <div class="mv-command done">
                            <span style="display:none" class="cmd-text">code:[ScmCollect]
        -cr_later</span>
                            <div data-state="Done" data-start="2020-10-22_18-14-42" data-end="2020-10-22_18-14-43" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator mv-cmd-done"><a href="Main/MainThread/Release/Windows_SCM/W_adl_collect.xml"><span
        class="fonticon fonticon-check"></span></a></div>
                            <span>W_adl_collect</span>
                          </div>
                          <div class="mv-command done">
                            <span style="display:none" class="cmd-text">adl_collect_cr</span>
                            <div data-state="Done" data-start="2020-10-22_18-14-43" data-end="2020-10-22_18-14-44" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator mv-cmd-done"><a href="Main/MainThread/Release/Windows_SCM/W_adl_collect_cr.xml"><span
        class="fonticon fonticon-check"></span></a></div>
                            <span>W_adl_collect_cr</span>
                          </div>
                          <div>
                            <div class="body">
                              <div class="mv-command aborted">
                                <span style="display:none" class="cmd-text">[ScmSync]</span>
                                <div data-state="Aborted" data-start="2020-10-22_18-14-44" data-end="2020-10-22_18-14-54" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator mv-cmd-aborted"><a href="Main/MainThread/Release/Windows_SCM/Windows_SCM_sync/W_adl_sync.xml"><span
        class="fonticon fonticon-wrong"></span></a></div>
                                <span>W_adl_sync</span>
                              </div>
                              <div class="mv-command waiting">
                                <span style="display:none" class="cmd-text">[ScmAttach]
        -attached_fw_mod</span>
                                <div data-state="Waiting" data-start="-1" data-end="-1" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator
        mv-cmd-waiting"><span class="fonticon fonticon-clock"></span></div>
                                <span>W_adl_attach</span>
                              </div>
                            </div>
                          </div>
                          <div class="mv-command waiting">
                            <span style="display:none" class="cmd-text">adl_publish</span>
                            <div data-state="Waiting" data-start="-1" data-end="-1" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator
        mv-cmd-waiting"><span class="fonticon fonticon-clock"></span></div>
                            <span>W_adl_publish</span>
                          </div>
                          <div class="mv-command waiting">
                            <span style="display:none" class="cmd-text">code:[ScmDsWs]
        [workspace]</span>
                            <div data-state="Waiting" data-start="-1" data-end="-1" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator
        mv-cmd-waiting"><span class="fonticon fonticon-clock"></span></div>
                            <span>W_adl_ds_ws</span>
                          </div>
                        </div>
                      </div>
                      <div class="mv-thread">
                        <table style="width:100%">
                          <tbody>
                            <tr>
                              <td style="vertical-align: top;">
                                <div>
                                  <div class="body">
                                    <div>
                                      <div class="body">
                                        <div class="mv-command waiting">
                                          <span style="display:none" class="cmd-text">if not exist
        [WIN64_DRIVE]\[WIN64_DIR]\[PreqDir] mkdir
        [WIN64_DRIVE]\[WIN64_DIR]\[PreqDir]</span>
                                          <div data-state="Waiting" data-start="-1" data-end="-1" data-profile="TCK" data-system="WIN64" class="indicator
        mv-cmd-waiting"><span class="fonticon fonticon-clock"></span></div>
                                          <span>W64_Shared_Preq_mkdir</span>
                                        </div>
                                        <div class="mv-command waiting">
                                          <span style="display:none" class="cmd-text">mkCopyPreq -W
        [WIN64_DRIVE]\[WIN64_DIR] -p [WIN_PREQ_DIR] -t
        [WIN64_DRIVE]\[WIN64_DIR]\[PreqDir] -d -o win_b64  -retry 10 -time 30
        -copyretry 10 -copytime 30</span>
                                          <div data-state="Waiting" data-start="-1" data-end="-1" data-profile="CD_WS_64b_Win" data-system="WIN64" class="indicator
        mv-cmd-waiting"><span class="fonticon fonticon-clock"></span></div>
                                          <span>W64_mkCopyPreq</span>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="mv-thread">
                                      <table style="width:100%">
                                        <tbody>
                                          <tr>
                                            <td style="vertical-align: top;">
                                              <div>
                                                <div class="body"></div>
                                              </div>
                                            </td>
                                          </tr>
                                        </tbody>
                                      </table>
                                    </div>
                                  </div>
                                </div>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
                    </div>
                  </div>
                </td>
                <td style="vertical-align: top;">
                  <div>
                    <div class="body">
                      <div class="mv-thread">
                        <table style="width:100%">
                          <tbody>
                            <tr>
                              <td style="vertical-align: top;">
                                <div class="mv-command
            done">
                                  <div data-state="Done" data-start="2020-10-22_18-13-49" data-end="2020-10-22_18-14-53" data-profile="CD" data-system="WIN64" class="indicator mv-cmd-done"><a><span
        class="fonticon fonticon-check"></span></a></div>
                                  <span>WIN64_MCCMon</span>
                                </div>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
                    </div>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
         <div class="div1"></div>
         <div class="div2"></div>
         <div class="div3"></div>
         <div class="div4"></div>
     <div class="div5"></div>
        </div>
        
      </div>
    </div>
  </div>
</body>

</html>

推荐阅读