连续3个

Question

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

Dashed border animation

唯一的问题是边界将被<td>的class =“ boundary”背景色所遮盖，因此它位于后面，如下所示：

border goes behind background

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

我也尝试了这个示例，但没有成功：

Rotating dashed border by Sean Lynch

我最终还是这样：

SVG line animation

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

This is my code

Answer 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>