純CSS實(shí)現(xiàn)：漸變+滾動(dòng)的邊框

一、前言
本文轉(zhuǎn)載于：

https://www.zhangxinxu.com/wordpress/?p=7975

  先上效果圖：


















二、漸變虛線邊框的實(shí)現(xiàn)
1、HTML和CSS

<div class="box">
  <div class="content"></div>
</div>
.box {
    width: 150px;
    border: 2px dashed #fff;
    background: linear-gradient(to bottom, #34538b, #cd0000);
    background-origin: border-box;
}
.content {
    height: 100px;
    background-color: #fff;
}
實(shí)時(shí)效果如下：








Chrome 68截圖效果如下：








問(wèn)題

雖然這種實(shí)現(xiàn)兼容性不錯(cuò)，IE10+都支持，但是，虛實(shí)比例由于反過(guò)來(lái)了，因此，虛線太稀疏，而且邊角無(wú)法形成直角。在實(shí)際項(xiàng)目中，是過(guò)不了設(shè)計(jì)師這一關(guān)的。

那有沒(méi)有效果更精致的虛線邊框漸變實(shí)現(xiàn)方法呢，有！我們可以借助CSS3 mask遮罩來(lái)實(shí)現(xiàn)。

借助CSS遮罩實(shí)現(xiàn)精致的漸變虛框

這個(gè)方法HTML只需要一層標(biāo)簽即可，而且沒(méi)有冗余的純色覆蓋，適用于各種背景場(chǎng)合，HTML代碼如下：

<div class="box"></div>

CSS代碼如下，漸進(jìn)增強(qiáng)，不支持遮罩的瀏覽器還是純色虛框：

.box {
    width: 200px;
    height: 150px;
    border: 2px dashed #cd0000;
    box-sizing: border-box;
}
@supports (-webkit-mask: none) or (mask: none) {
  .box {
    border: none;
    background: linear-gradient(to bottom, #34538b, #cd0000) no-repeat;
    mask: linear-gradient(to right, #000 6px, transparent 6px) repeat-x,
          linear-gradient(to bottom, #000 6px, transparent 6px) repeat-y,
          linear-gradient(to right, #000 6px, transparent 6px) repeat-x 0 100%,
          linear-gradient(to bottom, #000 6px, transparent 6px) repeat-y 100% 0;
    mask-size: 8px 2px, 2px 8px, 8px 2px, 2px 8px;
  }    
}

實(shí)際使用的時(shí)候，mask屬性還需要加下-webkit-私有前綴，這里示意目的，因此簡(jiǎn)化了代碼。

實(shí)現(xiàn)的漸變虛框效果如下截圖：









由于這個(gè)虛框本質(zhì)上是CSS繪制的，因此，我們可以隨意控制虛線的虛實(shí)比例，非常靈活。

關(guān)于CSS遮罩
默認(rèn)情況下，CSS遮罩可以讓元素只顯示遮罩圖片有顏色部分的區(qū)域，于是，這里，我們只要使用mask屬性繪制一個(gè)黑色虛框，就能實(shí)現(xiàn)真正意義上的漸變虛框效果了。

三、虛線邊框滾動(dòng)動(dòng)畫
百度ueditor編輯器網(wǎng)站首頁(yè)（http://ueditor.baidu.com/website/）底部有一個(gè)滾動(dòng)虛框的效果，如下GIF示意：





當(dāng)時(shí)我看到這個(gè)效果的時(shí)候，很興奮，沒(méi)想到做這個(gè)官網(wǎng)頁(yè)面的還是個(gè)CSS牛人！等我打開控制臺(tái)一看——恩，原來(lái)是JS計(jì)算實(shí)現(xiàn)的，我就默默地關(guān)掉了頁(yè)面，假裝剛才什么都沒(méi)發(fā)生過(guò)。

實(shí)際上，這種效果三兩行CSS代碼就可以實(shí)現(xiàn)，且IE10+瀏覽器都支持。

如下HTML和CSS：

<div class="box">
    <div class="content">內(nèi)容占位</div>
</div>





.box {
    width: 200px;
    background: repeating-linear-gradient(135deg, transparent, transparent 3px, #000 3px, #000 8px);
    animation: shine 1s infinite linear;
    overflow: hidden;
}
.content {
    height: 128px;
    margin: 1px; padding: 10px;
    background-color: #fff;    
}
@keyframes shine {
    0% { background-position: -1px -1px;}
    100% { background-position: -12px -12px;}
}
實(shí)現(xiàn)的邊框運(yùn)動(dòng)效果如下GIF：









邊框區(qū)域鏤空，然后背景圖片設(shè)為下面這個(gè)GIF平鋪背景即可：






例如下面這個(gè)水果的選區(qū)背景效果：








這里的邊框滾動(dòng)效果也是類似的，只是我們的斜紋是使用CSS3重復(fù)線性漸變屬性repeating-linear-gradient實(shí)現(xiàn)的，而規(guī)律運(yùn)動(dòng)是CSS3動(dòng)畫實(shí)現(xiàn)的，于是，最終實(shí)現(xiàn)了視覺(jué)上的虛線邊框滾動(dòng)效果。這種視覺(jué)感受跟小時(shí)候看發(fā)廊里面那個(gè)旋轉(zhuǎn)的斜紋柱子其實(shí)有異曲同工之處。

四、一個(gè)實(shí)線邊框loading動(dòng)畫
先看效果吧，不過(guò)GIF截圖尺寸會(huì)比較大，我就直接放一個(gè)靜態(tài)圖吧：












實(shí)線的效果是一條邊框?qū)嵕€，像個(gè)貪吃蛇一樣，一直圍著這個(gè)圖片元素跑啊跑，跑啊跑，一直不停歇。

實(shí)現(xiàn)原理其實(shí)也頗為簡(jiǎn)單，就是使用CSS clip屬性對(duì)邊框進(jìn)行剪裁而已，使用clip屬性是因?yàn)榧嫒菪院?，如果你的?xiàng)目不需要管IE，則可以使用clip-path屬性來(lái)剪裁

具體HTML和CSS代碼如下：

<div class="box">
    <img src="mm1.jpg" width="128" height="96">
</div>
.box {
    display: inline-block;
    padding: 10px;
    position: relative;
}
.box::before {
    content: '';
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    border: 2px solid #cd0000;
    animation: borderAround 1.5s infinite linear;    
}
@keyframes borderAround {
    0%, 100% { clip: rect(0 148px 2px 0); }
    25% { clip: rect(0 148px 116px 146px); }
    50% { clip: rect(114px 148px 116px 0); }
    75% { clip: rect(0 2px 116px 0); }
}
實(shí)際上，要想loading效果好，應(yīng)該兩個(gè)線框相互驅(qū)逐，本demo為了避免干擾，某人就一個(gè)線框悠悠地轉(zhuǎn)，如果想要顯示2個(gè)線框相互追逐，demo頁(yè)面是留了彩蛋的，點(diǎn)擊圖片即可，會(huì)變成下面這樣：











此效果應(yīng)用場(chǎng)景個(gè)人覺(jué)得還是相當(dāng)廣泛的。

一是強(qiáng)調(diào)和警示，例如某些非常重要的申明，就可以用這個(gè)邊框動(dòng)畫，保證人人都會(huì)注意到。

二是作為loading效果。并且可大可小，平常一個(gè)大容器里面加載東西，我們都是容器中間放個(gè)菊花，實(shí)際上，讓容器邊緣這個(gè)兩條折線追逐效果也挺好的；或者把容器中的菊花換成同尺寸的邊框動(dòng)畫也是可以的，很有心意，保證創(chuàng)新。

五、總結(jié)
   邊框動(dòng)畫還有很多很酷的效果，例如和border-radius配合，可以實(shí)現(xiàn)轉(zhuǎn)彎邊框動(dòng)畫效果，這個(gè)以后有機(jī)會(huì)再演示。

作者：張?chǎng)涡?/p>

歡迎關(guān)注：前端早茶