css如何實(shí)現(xiàn)虛線邊框滾動效果

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-02 22:15:23

css如何實(shí)現(xiàn)虛線邊框滾動效果

css如何實(shí)現(xiàn)虛線邊框滾動效果:我們先來看一下效果：實(shí)現(xiàn)代碼如下：HTML<div class="box"> <p>測試測試</p> </div>Easy-way通過背景圖片實(shí)現(xiàn)。.box { width: 100px; height: 100px; position: relative; b

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀css如何實(shí)現(xiàn)虛線邊框滾動效果:我們先來看一下效果：實(shí)現(xiàn)代碼如下：HTML<div class="box"> <p>測試測試</p> </div>Easy-way通過背景圖片實(shí)現(xiàn)。.box { width: 100px; height: 100px; position: relative; b

我們先來看一下效果：

實(shí)現(xiàn)代碼如下：

HTML

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

Easy-way

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

.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;
 }
}

（視頻教程推薦：css視頻教程）

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將其移動到四邊。這種方式比較好的地方在于可以分別設(shè)置四條邊的樣式以及動畫的方向，細(xì)心的同學(xué)應(yīng)該會發(fā)現(xiàn)上一種方式的動畫并不是順時針或者逆時針方向的。

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

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

.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;
 }
}

推薦教程：css快速入門

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

css如何實(shí)現(xiàn)虛線邊框滾動效果

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：邊框虛線框實(shí)現(xiàn)

熱門焦點(diǎn)

css如何實(shí)現(xiàn)虛線邊框滾動效果

css如何實(shí)現(xiàn)虛線邊框滾動效果

css如何實(shí)現(xiàn)虛線邊框滾動效果

最新推薦

猜你喜歡

熱門推薦