围绕 3 个连续 <td> 的单个旋转虚线边框

Posted 2023-05-09

【中文标题】围绕 3 个连续 <td> 的单个旋转虚线边框

【英文标题】：Single rotating dashed border around 3 consecutive <td>

【发布时间】：2019-07-16 18:05:25

【问题描述】：

当将鼠标悬停在相应按钮上时，我想围绕表格行创建一个旋转虚线边框，但第一个 <td> 除外。我已经尝试通过使用背景转换来完成它，如下所示：

Dashed border animation

唯一的问题是边框会被带有 class="boundary" 的<td> 的背景颜色遮住，所以它在它后面，如下所示：

border goes behind background

z-index 在这种情况下不起作用。

我也试过这个例子，但没有成功：

Rotating dashed border by Sean Lynch

我最终得到了这样的结果：

SVG line animation

我真的不知道如何使它适应我的代码，你会在这里找到：

This is my code

【问题讨论】：

您可以考虑使用 div 行来代替表格

感谢您的回答，但 div 也存在边界模糊的问题。

对比你可以使用mix-blend-mode。 difference 可能是一个选择

【参考方案1】：

您可以在应用虚线边框动画的地方使用伪元素

.inner_wrap 
  max-width: 1140px;
  margin: 0 auto;


html,
body 
  font-family: 'Asap', sans-serif;
  margin: 0;
  height: 100%;
  overflow: hidden;


.boundary 
  width: 5%;
  height: 50px;
  background-color: steelblue;


.occupied0 
  background-color: #1b4d15;
  color: #fff;


.occupied1 
  background-color: red;
  color: #FFF;


.short 
  width: 32%;
  height: 40px;
  display: block;
  margin: 10px 0px 10px 10px;
  line-height: 40px;
  text-align: left;
  padding-left: 10%;


.long 
  width: 76%;
  height: 40px;
  display: block;
  margin: 10px 0px 10px 10px;
  line-height: 40px;
  text-align: left;
  padding-left: 10%;


td.range_supervisor 
  background-color: #663300;
  width: 12%;
  padding: 35px;
  background-clip: content-box;


table 
  background-color: white;
  text-align: left;
  border: 0px;
  border-collapse: collapse;
  width: 100%;
  text-align: center;
  vertical-align: middle;


table>tr>td 
  width: 25%;


tr:first-child td:first-child:before 
    content:"";
    position:absolute;
    top:0;
    left:20px;
    right:20px;
    height:60px;
      background: 
        linear-gradient(90deg, blue 50%, transparent 50%) 0 0, 
        linear-gradient(90deg, blue 50%, transparent 50%) 100% 100%, 
        linear-gradient(0deg, blue 50%, transparent 50%) 100% 0, 
        linear-gradient(0deg, blue 50%, transparent 50%) 0 100%;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 16px 4px, 16px 4px, 4px 16px, 4px 16px;
  transition: background-position 2s;


tr:first-child:hover td:first-child:before
    background-position: 200px 0, calc(100% - 200px) 100%, 100% 50px,0 calc(100% - 50px);

<table class="inner_wrap">
  <tr>
    <td>
    </td>
    <td style="width:25%;">
      <button>RANGE 1</button>
    </td>
    <td class="boundary"></td>
    <td id="range1" class="short occupied0">
      AVAILABLE
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
      <button>RANGE 2</button>
    </td>
    <td class="boundary"></td>
    <td id="range2" class="short occupied0">
      AVAILABLE
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
      <button>RANGE 3</button>
    </td>
    <td class="boundary"></td>
    <td id="range3" class="short occupied0">
      AVAILABLE
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
      <button>RANGE 4</button>
    </td>
    <td class="boundary"></td>
    <td id="range4" class="short occupied0">
      AVAILABLE
    </td>
  </tr>
  <tr>
    <td class="range_supervisor" rowspan="4">
      <button style=" 	writing-mode: vertical-lr;
  	text-orientation: upright;">supervisor</button>
    </td>
    <td>
      <button>RANGE 5</button>
    </td>
    <td class="boundary"></td>
    <td id="range5" class="long occupied0">
      AVAILABLE
    </td>
  </tr>
  <tr>
    <td>
      <button>RANGE 6</button>
    </td>
    <td class="boundary"></td>
    <td id="range6" class="long occupied0">
      AVAILABLE
    </td>
  </tr>
  <tr>
    <td>
      <button>RANGE 7</button>
    </td>
    <td class="boundary"></td>
    <td id="range7" class="long occupied0">
      AVAILABLE
    </td>
  </tr>
  <tr>
    <td>
      <button>RANGE 8</button>
    </td>
    <td class="boundary"></td>
    <td id="range8" class="long occupied0">
      AVAILABLE
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
      <button>RANGE 9</button>
    </td>
    <td class="boundary"></td>
    <td id="range9" class="short occupied0">
      AVAILABLE
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
      <button>RANGE 10</button>
    </td>
    <td class="boundary"></td>
    <td id="range10" class="short occupied0">
      AVAILABLE
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
      <button>RANGE 11</button>
    </td>
    <td class="boundary"></td>
    <td id="range11" class="short occupied0">
      AVAILABLE
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
      <button>RANGE 12</button>
    </td>
    <td class="boundary"></td>
    <td id="range12" class="short occupied0">
      AVAILABLE
    </td>
  </tr>
</table>

【讨论】：

是的，这几乎就是我想要的。我将调整代码，使最左边的 '

' 不会被选中（边框应该从按钮的左侧开始），旋转动画将是无限的，并且只有将鼠标悬停在相应的按钮上时才能看到边框。非常感谢！

@Tissi_2 在这种情况下，您只需将 position:relative 添加到 td 以便伪元素只会在它周围......对于无限动画只需使用动画，如果您告诉我要我编辑答案

我自己试试。如果我不能解决它，我会回来。

好吧，我更新了笔，但它仍然不是我真正想要的结果。我添加了一点 jquery 来向您展示它应该是什么样子。问题是第一列 '

s' 也被选中（左边框应该靠近按钮）并且虚线边框再次在边界 tds 的背景中运行。我有点卡住它应该如何与伪元素一起工作：-/