体育足球投注

2019-11-03CSS3370
  • 詳情內容
  • 留言點評

漸變虛線邊框

如果對邊框的樣式細節不是很在意,我們可以借助反向鏤空的方法實現,也就是虛線原本實色的地方和周圍顏色融為一體,看上去透明,而原來虛框透明的部分透出漸變背景色,于是看上去像是漸變色。

以下是HTML和CSS︰

<div class="box">   <div class="content"></div></div><style>.box {   width: 150px;   border: 2px dashed #fff;   background: linear-gradient(to bottom, #34538b, #cd0000);   background-origin: border-box;}.content {   height: 100px;   background-color: #fff;}</style>

問題︰雖然這種方式兼容性不錯,IE10+都支持,但是,虛實比例由于反過來了,因此,虛線太稀疏,而且邊角無法形成直角。在實際項目中肯定過不了設計師這一關。

那有沒有效果更精致的虛線邊框漸變實現方法呢?當然有!我們可以借助CSS3 mask遮罩來實現。

借助CSS遮罩實現精致的漸變虛框,漸進增強,不支持遮罩的瀏覽器還是純色虛框,這個方法HTML只需要一層標簽即可,而且沒有冗余的純色覆蓋,適用于各種背景場合,代碼如下︰

<div class="box"></div><style>.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;    -webkit-mask-image: linear-gradient(to right, #000 6px, transparent 6px), linear-gradient(to bottom, #000 6px, transparent 6px),  linear-gradient(to right, #000 6px, transparent 6px), linear-gradient(to bottom, #000 6px, transparent 6px);    -webkit-mask-repeat: repeat-x, repeat-y, repeat-x, repeat-y;    -webkit-mask-position: 0 0, 0 0, 0 100%, 100% 0;    -webkit-mask-size: 8px 2px, 2px 8px, 8px 2px, 2px 8px;    /* 合並寫法 */    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;}    }</style>

由于這個虛框本質上是CSS繪制的,因此,我們可以隨意控制虛線的虛實比例,非常靈活。

默認情況下,CSS遮罩可以讓元素只顯示遮罩圖片有顏色部分的區域,那麼在這里,我們只要使用mask屬性繪制一個黑色虛框,就能實現真正意義上的漸變虛框效果了。

CSS mask遮罩包含屬性和知識點非常多,也非常強大,這里就不展開詳說了,有興趣的朋友可以多搜索學習一下相關知識。

虛線邊框滾動動畫

<div class="box">   <div class="content">內容佔位</div></div><style>.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;}}</style>

實線邊框loading動畫

實線的效果是一條邊框實線,像個貪吃蛇一樣,一直圍著這個圖片元素跑啊跑,跑啊跑,就像跑馬燈那樣一直不停歇。

實現原理其實也頗為簡單,就是使用CSS clip屬性對邊框進行剪裁而已,使用clip屬性是因為兼容性好,如果你的項目不需兼容IE,則可以使用clip-path屬性來剪裁。

<div class="box">   <img src="/zb_users/theme/BuyDown/images/logo.png" width="128" height="96"></div><style>.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); }}</style>

實際上,要想loading效果好,應該兩個線框相互驅逐,像下面這樣︰

<div class="box">   <img src="/zb_users/theme/BuyDown/images/logo.png" width="128" height="96"></div><style>.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;    }.box::after {    content: '';    position: absolute;    left: 0;    top: 0;    right: 0;    bottom: 0;    border: 2px solid #cd0000;    animation: borderAround2 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); }}@keyframes borderAround2 {    50% { clip: rect(0 148px 2px 0); }    75% { clip: rect(0 148px 116px 146px); }    0%,100% { clip: rect(114px 148px 116px 0); }    25% { clip: rect(0 2px 116px 0); }    }     </style>

此效果應用場景應該說還是相當廣泛的︰一是可以用作強調和警示,例如某些非常重要的圖文信息,就可以用這個邊框動畫,保證吸楮人人都會注意到;二是作為loading效果,尺寸可大可小,平常一個大容器里面加載東西,我們都是容器中間放個菊花,實際上,讓容器邊緣這個兩條折線追逐效果也挺好的,或者把容器中的菊花換成同尺寸的邊框動畫也是可以的,既是創意,也是創新。

歡迎點評!也可以是問題反饋和建議

支持Ctrl+Enter提交
暫無留言,快搶沙發!
0

真心很贊,必須打賞!嗯,以資鼓勵~

點此打賞

99%看過的人還會看

体育足球投注 | 下一页