css實(shí)現(xiàn)虛線邊框滾動(dòng)效果的實(shí)例代碼

發(fā)布時(shí)間：2019-05-08 11:47:11 作者：佚名

我要評(píng)論

常?？吹揭环N酷炫的效果，鼠標(biāo)hover一片區(qū)域后，區(qū)域顯示出虛線邊框，并且還有線條動(dòng)畫，那么這種效果具體是怎么實(shí)現(xiàn)的呢，本文提供了幾種思路，感興趣的朋友跟隨小編一起看看吧

常常看到一種酷炫的效果，鼠標(biāo)hover一片區(qū)域后，區(qū)域顯示出虛線邊框，并且還有線條動(dòng)畫，那么這種效果具體是怎么實(shí)現(xiàn)的呢，本文提供了幾種思路僅供參考。

基本HTML

<div class="box">
  <p>測(cè)試測(cè)試</p>
</div>

Easy-way

通過(guò)背景圖片實(shí)現(xiàn)。

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;                // 新建一個(gè)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

通過(guò)線性漸變以及background-size畫出虛線，然后再通過(guò)background-position將其移動(dòng)到四邊。這種方式比較好的地方在于可以分別設(shè)置四條邊的樣式以及動(dòng)畫的方向，細(xì)心的同學(xué)應(yīng)該會(huì)發(fā)現(xiàn)上一種方式的動(dòng)畫并不是順時(shí)針或者逆時(shí)針方向的。

.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屬性規(guī)范已經(jīng)進(jìn)入候選推薦規(guī)范之列，會(huì)說(shuō)以后進(jìn)入既定規(guī)范標(biāo)準(zhǔn)已經(jīng)是板上釘釘?shù)氖虑?，大家可以放心學(xué)習(xí)，將來(lái)必有用處。

這里同樣可以使用mask來(lái)實(shí)現(xiàn)相同的動(dòng)畫，并且可以實(shí)現(xiàn)虛線邊框漸變色這種效果，與background不同的是mask需要在中間加上一塊不透明的遮罩，不然p元素的內(nèi)容會(huì)被遮蓋住。

.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點(diǎn)這里

總結(jié)

以上所述是小編給大家介紹的css實(shí)現(xiàn)虛線邊框滾動(dòng)效果的實(shí)例代碼,希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！