css-虛線邊框滾動效果
摘要：
常常看到一種酷炫的效果，滑鼠hover一片區域後，區域顯示出虛線邊框，並且還有線條動畫，那麼這種效果具體是怎麼實現的呢，本文提供了幾種思路僅供參考。
基本HTML
<div class="box">
<p>測試測試</p>
<...
常常看到一種酷炫的效果，滑鼠hover一片區域後，區域顯示出虛線邊框，並且還有線條動畫，那麼這種效果具體是怎麼實現的呢，本文提供了幾種思路僅供參考。
基本HTML
<div class="box"> <p>測試測試</p> </div>
Easy-way
通過背景圖片實現。
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將其移動到四邊。這種方式比較好的地方在於可以分別設定四條邊的樣式以及動畫的方向，細心的同學應該會發現上一種方式的動畫並不是順時針或者逆時針方向的。
.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屬性規範已經進入候選推薦規範之列，會說以後進入既定規範標準已經是板上釘釘的事情，大家可以放心學習，將來必有用處。
這裡同樣可以使用mask來實現相同的動畫，並且可以實現虛線邊框漸變色這種效果，與background不同的是mask需要在中間加上一塊不透明的遮罩，不然p元素的內容會被遮蓋住。
.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;
}
}
PS
今天有一個人來我們這邊面試，五年工作經驗，上來頭頭是道說自己參與過多少專案，獨自一人架構一個什麼前端專案，熟練css、js、html、vue等等等，聽得我瑟瑟發抖。
然後問了個簡單的如何垂直居中，答曰：用flex；再問怎麼用flex，答：不太瞭解；問還有什麼方式，答曰：transform；再問為何transform，答：不太瞭解。。。
等等等，問了許多基礎的東西，大多不瞭解，更不用說vue的相關原理，diff演算法之流。
最後問期望薪資，答：已有18k的offer，期望不要低於18k。
是我不瞭解行情了，還是現在壓根就不是寒冬了，拿著微薄薪水的我求個內推～～南京或杭州地區。
個人部落格 求友鏈～
電子簡歷 ～