css如何實現虛線邊框滾動效果

這篇文章將為大家詳細講解有關css如何實現虛線邊框滾動效果，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

基本HTML

<div class="box">
  <p>測試測試</p>
</div>

Easy-way

通過背景圖片實現。

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

.box {
  width: 100px;
  height: 100px;
  position: relative;
  background: url(https://cache.yisu.com/upload/information/20210311/295/6111.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點這里

關于“css如何實現虛線邊框滾動效果”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。