css-虛線邊框滾動效果

經常看到一種酷炫的效果，鼠標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;
  }
}

具體demo點這裏

PS

今天有一我的來咱們這邊面試，五年工做經驗，上來頭頭是道說本身參與過多少項目，獨自一人架構一個什麼前端項目，熟練css、js、html、vue等等等，聽得我瑟瑟發抖。

而後問了個簡單的如何垂直居中，答曰：用flex；再問怎麼用flex，答：不太瞭解；問還有什麼方式，答曰：transform；再問爲什麼transform，答：不太瞭解。。。

等等等，問了許多基礎的東西，大多不瞭解，更不用說vue的相關原理，diff算法之流。

最後問指望薪資，答：已有18k的offer，指望不要低於18k。

是我不瞭解行情了，仍是如今壓根就不是寒冬了，拿着微薄薪水的我求個內推～～南京或杭州地區。

我的博客求友鏈～

花裏胡哨電子簡歷～有時間的話能夠一看。

參考

張哥虛線邊框

mask教程