純CSS實(shí)現(xiàn)：漸變+滾動的邊框
本文適合有這種業(yè)務(wù)需求、以及想提升下css的小伙伴閱讀。
歡迎關(guān)注前端早茶，與廣東靚仔攜手共同進(jìn)階～
一、前言
本文轉(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í)時效果如下：
Chrome 68截圖效果如下：
問題
那有沒有效果更精致的虛線邊框漸變實(shí)現(xiàn)方法呢，有！我們可以借助CSS3 mask遮罩來實(shí)現(xiàn)。
借助CSS遮罩實(shí)現(xiàn)精致的漸變虛框
這個方法HTML只需要一層標(biāo)簽即可，而且沒有冗余的純色覆蓋，適用于各種背景場合，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í)際使用的時候，mask屬性還需要加下-webkit-私有前綴，這里示意目的，因此簡化了代碼。
實(shí)現(xiàn)的漸變虛框效果如下截圖：
由于這個虛框本質(zhì)上是CSS繪制的，因此，我們可以隨意控制虛線的虛實(shí)比例，非常靈活。
關(guān)于CSS遮罩
默認(rèn)情況下，CSS遮罩可以讓元素只顯示遮罩圖片有顏色部分的區(qū)域，于是，這里，我們只要使用mask屬性繪制一個黑色虛框，就能實(shí)現(xiàn)真正意義上的漸變虛框效果了。
三、虛線邊框滾動動畫
百度ueditor編輯器網(wǎng)站首頁（http://ueditor.baidu.com/website/）底部有一個滾動虛框的效果，如下GIF示意：
當(dāng)時我看到這個效果的時候，很興奮，沒想到做這個官網(wǎng)頁面的還是個CSS牛人！等我打開控制臺一看——恩，原來是JS計(jì)算實(shí)現(xiàn)的，我就默默地關(guān)掉了頁面，假裝剛才什么都沒發(fā)生過。
實(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)動效果如下GIF：
邊框區(qū)域鏤空，然后背景圖片設(shè)為下面這個GIF平鋪背景即可：
例如下面這個水果的選區(qū)背景效果：
這里的邊框滾動效果也是類似的，只是我們的斜紋是使用CSS3重復(fù)線性漸變屬性repeating-linear-gradient實(shí)現(xiàn)的，而規(guī)律運(yùn)動是CSS3動畫實(shí)現(xiàn)的，于是，最終實(shí)現(xiàn)了視覺上的虛線邊框滾動效果。這種視覺感受跟小時候看發(fā)廊里面那個旋轉(zhuǎn)的斜紋柱子其實(shí)有異曲同工之處。
四、一個實(shí)線邊框loading動畫
先看效果吧，不過GIF截圖尺寸會比較大，我就直接放一個靜態(tài)圖吧：
實(shí)線的效果是一條邊框?qū)嵕€，像個貪吃蛇一樣，一直圍著這個圖片元素跑啊跑，跑啊跑，一直不停歇。
實(shí)現(xiàn)原理其實(shí)也頗為簡單，就是使用CSS clip屬性對邊框進(jìn)行剪裁而已，使用clip屬性是因?yàn)榧嫒菪院茫绻愕捻?xiàng)目不需要管IE，則可以使用clip-path屬性來剪裁
具體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)該兩個線框相互驅(qū)逐，本demo為了避免干擾，某人就一個線框悠悠地轉(zhuǎn)，如果想要顯示2個線框相互追逐，demo頁面是留了彩蛋的，點(diǎn)擊圖片即可，會變成下面這樣：
此效果應(yīng)用場景個人覺得還是相當(dāng)廣泛的。
一是強(qiáng)調(diào)和警示，例如某些非常重要的申明，就可以用這個邊框動畫，保證人人都會注意到。
二是作為loading效果。并且可大可小，平常一個大容器里面加載東西，我們都是容器中間放個菊花，實(shí)際上，讓容器邊緣這個兩條折線追逐效果也挺好的；或者把容器中的菊花換成同尺寸的邊框動畫也是可以的，很有心意，保證創(chuàng)新。
五、總結(jié)
border-radius配合，可以實(shí)現(xiàn)轉(zhuǎn)彎邊框動畫效果，這個以后有機(jī)會再演示。關(guān)注我，一起攜手進(jìn)階
歡迎關(guān)注前端早茶，與廣東靚仔攜手共同進(jìn)階～