CSS 奇思妙想邊框動(dòng)畫(huà)效果的實(shí)現(xiàn)

今天逛博客網(wǎng)站 -- shoptalkshow,看到這樣一個(gè)界面,非常有意思:
覺(jué)得它的風(fēng)格很獨(dú)特,尤其是其中一些邊框。
嘿嘿,所以來(lái)一篇邊框特輯,看看運(yùn)用 CSS,可以在邊框上整些什么花樣。
border 屬性
談到邊框,首先會(huì)想到border
,我們最常用的莫過(guò)于solid
,dashed
,上圖中便出現(xiàn)了dashed
。
除了最常見(jiàn)的solid
,dashed
,CSS border 還支持none
,hidden
,dotted
,double
,groove
,ridge
,inset
,outset
等樣式。除去none
,hidden
,看看所有原生支持的 border 的樣式:
基礎(chǔ)的就這些,如果希望實(shí)現(xiàn)一個(gè)其他樣式的邊框,或者給邊框加上動(dòng)畫(huà),那就需要配合一些其他屬性,或是腦洞大開(kāi)。OK,一起來(lái)看看一些額外的有意思的邊框。
邊框長(zhǎng)度變化
先來(lái)個(gè)比較簡(jiǎn)單的,實(shí)現(xiàn)一個(gè)類(lèi)似這樣的邊框效果:
這里其實(shí)是借用了元素的兩個(gè)偽元素。兩個(gè)偽元素分別只設(shè)置上、左邊框,下、右邊框,通過(guò)hover
時(shí)改變兩個(gè)偽元素的高寬即可。非常好理解。
div { position: relative; border: 1px solid #03A9F3; &::before, &::after { content: ""; position: absolute; width: 20px; height: 20px; } &::before { top: -5px; left: -5px; border-top: 1px solid var(--borderColor); border-left: 1px solid var(--borderColor); } &::after { right: -5px; bottom: -5px; border-bottom: 1px solid var(--borderColor); border-right: 1px solid var(--borderColor); } &:hover::before, &:hover::after { width: calc(100% + 9px); height: calc(100% + 9px); } }
CodePen Demo -- width border animation
接下來(lái),會(huì)開(kāi)始加深一些難度。
虛線邊框動(dòng)畫(huà)
使用dashed
關(guān)鍵字,可以方便的創(chuàng)建虛線邊框。
div { border: 1px dashed #333; }
當(dāng)然,我們的目的是讓邊框能夠動(dòng)起來(lái)。使用dashed
關(guān)鍵字是沒(méi)有辦法的。但是實(shí)現(xiàn)虛線的方式在 CSS 中有很多種,譬如漸變就是一種很好的方式:
div { background: linear-gradient(90deg, #333 50%, transparent 0) repeat-x; background-size: 4px 1px; background-position: 0 0; }
看看,使用漸變模擬的虛線如下:
好,漸變支持多重漸變,我們把容器的 4 個(gè)邊都用漸變表示即可:
div { background: linear-gradient(90deg, #333 50%, transparent 0) repeat-x, linear-gradient(90deg, #333 50%, transparent 0) repeat-x, linear-gradient(0deg, #333 50%, transparent 0) repeat-y, linear-gradient(0deg, #333 50%, transparent 0) repeat-y; background-size: 4px 1px, 4px 1px, 1px 4px, 1px 4px; background-position: 0 0, 0 100%, 0 0, 100% 0; }
效果如下:
OK,至此,我們的虛線邊框動(dòng)畫(huà)其實(shí)算是完成了一大半了。雖然border-style: dashed
不支持動(dòng)畫(huà),但是漸變支持呀。我們給上述 div 再加上一個(gè)hover
效果,hover
的時(shí)候新增一個(gè)animation
動(dòng)畫(huà),改變?cè)氐?code>bakcground-position即可。
div:hover { animation: linearGradientMove .3s infinite linear; } @keyframes linearGradientMove { 100% { background-position: 4px 0, -4px 100%, 0 -4px, 100% 4px; } }
OK,看看效果,hover 上去的時(shí)候,邊框就能動(dòng)起來(lái),因?yàn)檎麄€(gè)動(dòng)畫(huà)是首尾相連的,無(wú)限循環(huán)的動(dòng)畫(huà)看起來(lái)就像是虛線邊框在一直運(yùn)動(dòng),這算是一個(gè)小小的障眼法或者小技巧:
這里還有另外一個(gè)小技巧,如果我們希望虛線邊框動(dòng)畫(huà)是從其他邊框,過(guò)渡到虛線邊框,再行進(jìn)動(dòng)畫(huà)。完全由漸變來(lái)模擬也是可以的,如果想節(jié)省一些代碼,使用border
會(huì)更快一些,譬如這樣:
div { border: 1px solid #333; &:hover { border: none; background: linear-gradient(90deg, #333 50%, transparent 0) repeat-x, linear-gradient(90deg, #333 50%, transparent 0) repeat-x, linear-gradient(0deg, #333 50%, transparent 0) repeat-y, linear-gradient(0deg, #333 50%, transparent 0) repeat-y; background-size: 4px 1px, 4px 1px, 1px 4px, 1px 4px; background-position: 0 0, 0 100%, 0 0, 100% 0; } }
由于 border 和 background 在盒子模型上位置的差異,視覺(jué)上會(huì)有一個(gè)很明顯的錯(cuò)位的感覺(jué):
要想解決這個(gè)問(wèn)題,我們可以把border
替換成outline
,因?yàn)?code>outline可以設(shè)置outline-offset
。便能完美解決這個(gè)問(wèn)題:
div { outline: 1px solid #333; outline-offset: -1px; &:hover { outline: none; } }
最后看看運(yùn)用到實(shí)際按鈕上的效果:
上述 Demo 完整代碼如下:
CodePen Demo -- dashed border animation
其實(shí)由于背景和邊框的特殊關(guān)系,使用 border 的時(shí)候,通過(guò)修改background-position
也是可以解決的,就是比較繞。關(guān)于背景和邊框的填充關(guān)系,可以看這篇文章:條紋邊框的多種實(shí)現(xiàn)方式
漸變的其他妙用
利用漸變,不僅僅只是能完成上述的效果。
我們繼續(xù)深挖漸變,利用漸變實(shí)現(xiàn)這樣一個(gè)背景:
div { position: relative; &::after { content: ''; position: absolute; left: -50%; top: -50%; width: 200%; height: 200%; background-repeat: no-repeat; background-size: 50% 50%, 50% 50%; background-position: 0 0, 100% 0, 100% 100%, 0 100%; background-image: linear-gradient(#399953, #399953), linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33), linear-gradient(#377af5, #377af5); } }
注意,這里運(yùn)用了元素的偽元素生成的這個(gè)圖形,并且,寬高都是父元素的200%
,超出則overflow: hidden
。
接下來(lái),給它加上旋轉(zhuǎn):
div { animation: rotate 4s linear infinite; } @keyframes rotate { 100% { transform: rotate(1turn); } }
看看效果:
最后,再利用一個(gè)偽元素,將中間遮罩起來(lái),一個(gè) Nice 的邊框動(dòng)畫(huà)就出來(lái)了:
上述 Demo 完整代碼如下,這個(gè)效果我最早見(jiàn)于這位作者 --Jesse B
CodePen Demo -- gradient border animation
改變漸變的顏色
掌握了上述的基本技巧之后,我們可以再對(duì)漸變的顏色做一些調(diào)整,我們將 4 種顏色變成 1 種顏色:
div::after { content: ''; position: absolute; left: -50%; top: -50%; width: 200%; height: 200%; background-color: #fff; background-repeat: no-repeat; background-size: 50% 50%; background-position: 0 0; background-image: linear-gradient(#399953, #399953); }
得到這樣一個(gè)圖形:
同樣的,讓它旋轉(zhuǎn)一起,一個(gè)單色追逐的邊框動(dòng)畫(huà)就出來(lái)了:
CodePen Demo -- gradient border animation 2
Wow,很不錯(cuò)的樣子。不過(guò)如果是單線條,有個(gè)很明顯的缺陷,就是邊框的末尾是一個(gè)小三角而不是垂直的,可能有些場(chǎng)景不適用或者 PM 接受不了。
那有沒(méi)有什么辦法能夠消除掉這些小三角呢?有的,在下文中我們?cè)俳榻B一種方法,利用clip-path
,消除掉這些小三角。
conic-gradient
的妙用
再介紹clip-path
之前,先講講角向漸變。
上述主要用到了的是線性漸變linear-gradient
。我們使用角向漸變conic-gradient
其實(shí)完全也可以實(shí)現(xiàn)一模一樣的效果。
我們?cè)囍褂?code>conic-gradient也實(shí)現(xiàn)一次,這次換一種暗黑風(fēng)格。核心代碼如下:
.conic { position: relative; &::before { content: ''; position: absolute; left: -50%; top: -50%; width: 200%; height: 200%; background: conic-gradient(transparent, rgba(168, 239, 255, 1), transparent 30%); animation: rotate 4s linear infinite; } } @keyframes rotate { 100% { transform: rotate(1turn); } }
效果圖和示意圖如下,旋轉(zhuǎn)一個(gè)部分角向漸變的圖形,中間的部分使用另外一個(gè)偽元素進(jìn)行遮罩,只漏出線條部分即可:
CodePen Demo -- Rotating border 3
clip-path
的妙用
又是老朋友clip-path
,有意思的事情它總不會(huì)缺席。
clip-path
本身是可以進(jìn)行坐標(biāo)點(diǎn)的動(dòng)畫(huà)的,從一個(gè)裁剪形狀變換到另外一個(gè)裁剪形狀。
利用這個(gè)特點(diǎn),我們可以巧妙的實(shí)現(xiàn)這樣一種 border 跟隨效果。偽代碼如下:
div { position: relative; &::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 2px solid gold; animation: clippath 3s infinite linear; } } @keyframes clippath { 0%, 100% { clip-path: inset(0 0 95% 0); } 25% { clip-path: inset(0 95% 0 0); } 50% { clip-path: inset(95% 0 0 0); } 75% { clip-path: inset(0 0 0 95%); } }
效果圖與示意圖一起:
CodePen - clip-path border animation
這里,因?yàn)闀?huì)裁剪元素,借用偽元素作為背景進(jìn)行裁剪并動(dòng)畫(huà)即可,使用clip-path
的優(yōu)點(diǎn)了,切割出來(lái)的邊框不會(huì)產(chǎn)生小三角。同時(shí),這種方法,也是支持圓角border-radius
的。
如果我們把另外一個(gè)偽元素也用上,實(shí)際實(shí)現(xiàn)一個(gè)按鈕樣式,可以得到這樣的效果:
CodePen - clip-path border animation 2
overflow
的妙用
下面這個(gè)技巧利用 overflow 實(shí)現(xiàn)。實(shí)現(xiàn)這樣一個(gè)邊框動(dòng)畫(huà):
為何說(shuō)是利用overflow
實(shí)現(xiàn)?
貼個(gè)示意圖:
CodePen Demo -- 巧用overflow及transform實(shí)現(xiàn)線條hover效果
兩個(gè)核心點(diǎn):
- 我們利用
overflow: hidden
,把原本在容器外的一整個(gè)元素隱藏了起來(lái) - 利用了
transform-origin
,控制了元素的旋轉(zhuǎn)中心
發(fā)現(xiàn)沒(méi),其實(shí)幾乎大部分的有意思的 CSS 效果,都是運(yùn)用了類(lèi)似技巧:
簡(jiǎn)單的說(shuō)就是,我們看到的動(dòng)畫(huà)只是原本現(xiàn)象的一小部分,通過(guò)特定的裁剪、透明度的變化、遮罩等,讓我們最后只看到了原本現(xiàn)象的一部分。
border-image
的妙用
利用border-image
,我們也可以實(shí)現(xiàn)一些有意思的邊框動(dòng)畫(huà)。關(guān)于border-image
,有一篇非常好的講解文章 --border-image 的正確用法,本文不對(duì)基本定義做過(guò)多的講解。
如果我們有這樣一張圖:
便可以利用border-image-slice
及border-image-repeat
的特性,得到類(lèi)似的邊框圖案:
div { width: 200px; height: 120px; border: 24px solid; border-image: url(image-url); border-image-slice: 32; border-image-repeat: round; }
在這個(gè)基礎(chǔ)上,可以隨便改變?cè)氐母邔?,如此便能擴(kuò)展到任意大小的容器邊框中:
CodePen Demo -- border-image Demo
接著,在這篇文章 --How to Animate a SVG with border-image中,還講解了一種利用border-image
的邊框動(dòng)畫(huà),非常的酷炫。
與上面例子不一樣的是,我們只需要讓我們的圖案,動(dòng)起來(lái),就是我們需要這樣一個(gè)背景圖(博客園不支持 SVG 動(dòng)圖,原圖地址):
那么,我們也就能得到運(yùn)動(dòng)的邊框圖,代碼完全一樣,但是,邊框是運(yùn)動(dòng)的:
CodePen Demo -- Dancing Skull Border
border-image
使用漸變
border-image
除了貼圖引用url
之外,也是可以直接填充顏色或者是漸變的。
之前也有一篇關(guān)于border-image
的文章 --巧妙實(shí)現(xiàn)帶圓角的漸變邊框
我們可以利用border-image
+filter
+clip-path
實(shí)現(xiàn)漸變變換的圓角邊框:
.border-image-clip-path { width: 200px; height: 100px; border: 10px solid; border-image: linear-gradient(45deg, gold, deeppink) 1; clip-path: inset(0px round 10px); animation: huerotate 6s infinite linear; filter: hue-rotate(360deg); } @keyframes huerotate { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rorate(360deg); } }
CodePen Demo -- clip-path、border-image 加 filter 實(shí)現(xiàn)圓角漸變邊框
最后
本文介紹了一些我認(rèn)為比較有意思的邊框動(dòng)畫(huà)小技巧,當(dāng)然 CSS 產(chǎn)生還有非常多有意思的效果,限于篇幅,不一一展開(kāi)。
到此這篇關(guān)于CSS 奇思妙想邊框動(dòng)畫(huà)效果的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)css邊框動(dòng)畫(huà)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
- 這篇文章主要介紹了一文教你玩轉(zhuǎn)CSS border(邊框),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-02-19
CSS3 按鈕邊框動(dòng)畫(huà)的實(shí)現(xiàn)
這篇文章主要介紹了CSS3 按鈕邊框動(dòng)畫(huà)的實(shí)現(xiàn),幫助大家更好的理解和使用CSS3,美化自身網(wǎng)頁(yè),感興趣的朋友可以了解下2020-11-12- 這篇文章主要介紹了CSS3 實(shí)現(xiàn)發(fā)光邊框特效,幫助大家更好的理解和制作CSS3特效,美化自身網(wǎng)頁(yè),感興趣的朋友可以了解下2020-11-11
兩款純CSS3鼠標(biāo)經(jīng)過(guò)按鈕邊框動(dòng)畫(huà)特效
兩款純CSS3鼠標(biāo)經(jīng)過(guò)按鈕邊框動(dòng)畫(huà)特效是一款純CSS3實(shí)現(xiàn)的邊框按鈕特效,鼠標(biāo)經(jīng)過(guò)或者懸停的時(shí)候顯示邊框動(dòng)畫(huà)效果。2020-11-09- 這篇文章主要介紹了一篇文章帶你學(xué)習(xí)CSS3圖片邊框,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-11-04
- css3多種邊框懸停按鈕填色動(dòng)畫(huà)特效是一款簡(jiǎn)單的長(zhǎng)方形邊框按鈕,鼠標(biāo)移入各種遮罩變色動(dòng)畫(huà)特效。本腳本為css3+jquery特效腳本,喜歡大家喜歡2020-08-13
- 這篇文章主要介紹了css 透明邊框background-clip妙用,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)2019-12-25
CSS3實(shí)現(xiàn)缺角矩形,折角矩形以及缺角邊框
這篇文章主要介紹了CSS3實(shí)現(xiàn)缺角矩形,折角矩形以及缺角邊框,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)2019-12-20CSS邊框長(zhǎng)度控制功能的實(shí)現(xiàn)
這篇文章主要介紹了CSS邊框長(zhǎng)度控制功能的實(shí)現(xiàn),代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-11-27CSS實(shí)現(xiàn)半透明邊框與多重邊框的場(chǎng)景分析
本文分兩種場(chǎng)景給大家介紹CSS實(shí)現(xiàn)半透明邊框與多重邊框效果,感興趣的朋友跟隨小編一起看看吧2019-11-13