css實現(xiàn)虛線邊框滾動效果的實例代碼
發(fā)布時間：2019-05-08 11:47:11 作者：佚名 
我要評論
我要評論常?？吹揭环N酷炫的效果，鼠標hover一片區(qū)域后，區(qū)域顯示出虛線邊框，并且還有線條動畫，那么這種效果具體是怎么實現(xiàn)的呢，本文提供了幾種思路，感興趣的朋友跟隨小編一起看看吧
常?？吹揭环N酷炫的效果，鼠標hover一片區(qū)域后，區(qū)域顯示出虛線邊框，并且還有線條動畫，那么這種效果具體是怎么實現(xiàn)的呢，本文提供了幾種思路僅供參考。
基本HTML
<div class="box"> <p>測試測試</p> </div>
Easy-way
通過背景圖片實現(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; // 新建一個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將其移動到四邊。這種方式比較好的地方在于可以分別設置四條邊的樣式以及動畫的方向，細心的同學應該會發(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)進入候選推薦規(guī)范之列，會說以后進入既定規(guī)范標準已經(jīng)是板上釘釘?shù)氖虑?，大家可以放心學習，將來必有用處。
這里同樣可以使用mask來實現(xiàn)相同的動畫，并且可以實現(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實現(xiàn)虛線邊框滾動效果的實例代碼,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關文章
- 這篇文章給大家介紹了css邊框的相關知識，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2019-11-04
這篇文章主要介紹了css效果之邊框內(nèi)圓角的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習2019-06-19- 這篇文章主要介紹了CSS揭秘之多重邊框的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-06-10
這篇文章主要介紹了css3實現(xiàn)六邊形邊框的實例代碼,需要的朋友可以參考下2019-05-24
這篇文章主要介紹了純css實現(xiàn)動態(tài)邊框的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學2019-05-17
這篇文章主要介紹了基于CSS 屬性實現(xiàn)按鈕懸停邊框和背景動畫集合,需要的朋友可以參考下2019-05-09
這篇文章主要介紹了CSS邊框長度控制功能的實現(xiàn),代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-11-27
