css-虛線邊框滾動效果

gentlecoder發表於2019-05-07

常常看到一種酷炫的效果，滑鼠hover一片區域後，區域顯示出虛線邊框，並且還有線條動畫，那麼這種效果具體是怎麼實現的呢，本文提供了幾種思路僅供參考。

基本HTML

<div class="box">
  <p>測試測試</p>
</div>
複製程式碼

Easy-way

通過背景圖片實現。

p得垂直居中哦，還記得如何垂直居中嗎？詳見另一篇部落格～

.box {
  width: 100px;
  height: 100px;
  position: relative;
  background: url(https://www.zhangxinxu.com/study/image/selection.gif);
  p {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    height: calc(100% - 2px);
    width: calc(100% - 2px);
    background-color: #fff;
  }
}
複製程式碼

repeating-linear-gradient

135度repeating線性漸變，p撐開高度，白色背景覆蓋外層div漸變。

.box {
  width: 100px;
  height: 100px;
  background: repeating-linear-gradient(
    135deg,
    transparent,
    transparent 4px,
    #000 4px,
    #000 8px
  );
  overflow: hidden;				// 新建一個BFC，解決margin在垂直方向上摺疊的問題
  animation: move 1s infinite linear;
  p {
    height: calc(100% - 2px);
    margin: 1px;
    background-color: #fff;
  }
}
@keyframes move {
  from {
    background-position: -1px;
  }
  to {
    background-position: -12px;
  }
}
複製程式碼

linear-gradient&&background

通過線性漸變以及background-size畫出虛線，然後再通過background-position將其移動到四邊。這種方式比較好的地方在於可以分別設定四條邊的樣式以及動畫的方向，細心的同學應該會發現上一種方式的動畫並不是順時針或者逆時針方向的。

.box {
  width: 100px;
  height: 100px;
  background: linear-gradient(0deg, transparent 6px, #e60a0a 6px) repeat-y,
    linear-gradient(0deg, transparent 50%, #0f0ae8 0) repeat-y,
    linear-gradient(90deg, transparent 50%, #09f32f 0) repeat-x,
    linear-gradient(90deg, transparent 50%, #fad648 0) repeat-x;
  background-size: 1px 12px, 1px 12px, 12px 1px, 12px 1px;
  background-position: 0 0, 100% 0, 0 0, 0 100%;
  animation: move2 1s infinite linear;
  p {
    margin: 1px;
  }
}
@keyframes move2 {
  from {
  }
  to {
    background-position: 0 -12px, 100% 12px, 12px 0, -12px 100%;
  }
}
複製程式碼

linear-gradient&&mask

mask屬性規範已經進入候選推薦規範之列，會說以後進入既定規範標準已經是板上釘釘的事情，大家可以放心學習，將來必有用處。

這裡同樣可以使用mask來實現相同的動畫，並且可以實現虛線邊框漸變色這種效果，與background不同的是mask需要在中間加上一塊不透明的遮罩，不然p元素的內容會被遮蓋住。

.box {
  width: 100px;
  height: 100px;
  background: linear-gradient(0deg, #f0e, #fe0);
  -webkit-mask: linear-gradient(0deg, transparent 6px, #e60a0a 6px) repeat-y,
    linear-gradient(0deg, transparent 50%, #0f0ae8 0) repeat-y,
    linear-gradient(90deg, transparent 50%, #09f32f 0) repeat-x,
    linear-gradient(90deg, transparent 50%, #fad648 0) repeat-x,
    linear-gradient(0deg, #fff, #fff) no-repeat;		// 這裡不透明顏色隨便寫哦
  -webkit-mask-size: 1px 12px, 1px 12px, 12px 1px, 12px 1px, 98px 98px;
  -webkit-mask-position: 0 0, 100% 0, 0 0, 0 100%, 1px 1px;
  overflow: hidden;
  animation: move3 1s infinite linear;
  p {
    height: calc(100% - 2px);
    margin: 1px;
    background-color: #fff;
  }
}
@keyframes move3 {
  from {
  }
  to {
    -webkit-mask-position: 0 -12px, 100% 12px, 12px 0, -12px 100%, 1px 1px;
  }
}
複製程式碼