建站
咨詢
售后
建站咨詢
新聞中心
本文將為大家詳細(xì)介紹“CSS實(shí)現(xiàn)邊框動(dòng)畫的示例”，內(nèi)容步驟清晰詳細(xì)，細(xì)節(jié)處理妥當(dāng)，而小編每天都會(huì)更新不同的知識(shí)點(diǎn)，希望這篇“CSS實(shí)現(xiàn)邊框動(dòng)畫的示例”能夠給你意想不到的收獲，請(qǐng)大家跟著小編的思路慢慢深入，具體內(nèi)容如下，一起去收獲新知識(shí)吧。
創(chuàng)新互聯(lián)專注于安龍企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站設(shè)計(jì),電子商務(wù)商城網(wǎng)站建設(shè)。安龍網(wǎng)站建設(shè)公司,為安龍等地區(qū)提供建站服務(wù)。全流程定制網(wǎng)站設(shè)計(jì)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)css是什么意思
css是一種用來(lái)表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語(yǔ)言，主要是用來(lái)設(shè)計(jì)網(wǎng)頁(yè)的樣式，使網(wǎng)頁(yè)更加美化。它也是一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語(yǔ)言，并且css樣式可以直接存儲(chǔ)于HTML網(wǎng)頁(yè)或者單獨(dú)的樣式單文件中，而樣式規(guī)則的優(yōu)先級(jí)由css根據(jù)這個(gè)層次結(jié)構(gòu)決定，從而實(shí)現(xiàn)級(jí)聯(lián)效果，發(fā)展至今，css不僅能裝飾網(wǎng)頁(yè)，也可以配合各種腳本對(duì)于網(wǎng)頁(yè)進(jìn)行格式化。
今天看到這樣一個(gè)界面，非常有意思：
覺得它的風(fēng)格很獨(dú)特，尤其是其中一些邊框。
嘿嘿，所以來(lái)一篇邊框特輯，看看運(yùn)用 CSS，可以在邊框上整些什么花樣。
border 屬性
談到邊框，首先會(huì)想到border，我們最常用的莫過(guò)于solid，dashed，上圖中便出現(xiàn)了dashed。
除了最常見的solid，dashed，CSS border 還支持none，hidden，dotted，double，groove，ridge，inset，outset 等樣式。除去none，hidden，看看所有原生支持的 border 的樣式：
基礎(chǔ)的就這些，如果希望實(shí)現(xiàn)一個(gè)其他樣式的邊框，或者給邊框加上動(dòng)畫，那就需要配合一些其他屬性，或是腦洞大開。OK，一起來(lái)看看一些額外的有意思的邊框。
邊框長(zhǎng)度變化
先來(lái)個(gè)比較簡(jiǎn)單的，實(shí)現(xiàn)一個(gè)類似這樣的邊框效果：
這里其實(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);}}復(fù)制代碼CodePen Demo -- width border animation
接下來(lái)，會(huì)開始加深一些難度。
虛線邊框動(dòng)畫
使用dashed 關(guān)鍵字，可以方便的創(chuàng)建虛線邊框。
div {border: 1px dashed #333;}當(dāng)然，我們的目的是讓邊框能夠動(dòng)起來(lái)。使用dashed 關(guān)鍵字是沒有辦法的。但是實(shí)現(xiàn)虛線的方式在 CSS 中有很多種，譬如漸變就是一種很好的方式：
div {background: linear-gradient(90deg, #333 50%, transparent 0) repeat-x;background-size: 4px 1px;background-position: 0 0;}復(fù)制代碼看看，使用漸變模擬的虛線如下：
好，漸變支持多重漸變，我們把容器的 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;}復(fù)制代碼OK，至此，我們的虛線邊框動(dòng)畫其實(shí)算是完成了一大半了。雖然border-style: dashed 不支持動(dòng)畫，但是漸變支持呀。我們給上述 div 再加上一個(gè)hover 效果，hover 的時(shí)候新增一個(gè)animation 動(dòng)畫，改變?cè)氐?code>background-position 即可。
div:hover {animation: linearGradientMove .3s infinite linear;}@keyframes linearGradientMove {100% {background-position: 4px 0, -4px 100%, 0 -4px, 100% 4px;}}復(fù)制代碼OK，看看效果，hover 上去的時(shí)候，邊框就能動(dòng)起來(lái)，因?yàn)檎麄€(gè)動(dòng)畫是首尾相連的，無(wú)限循環(huán)的動(dòng)畫看起來(lái)就像是虛線邊框在一直運(yùn)動(dòng)，這算是一個(gè)小小的障眼法或者小技巧：
這里還有另外一個(gè)小技巧，如果我們希望虛線邊框動(dòng)畫是從其他邊框，過(guò)渡到虛線邊框，再行進(jìn)動(dòng)畫。完全由漸變來(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;}}復(fù)制代碼由于 border 和 background 在盒子模型上位置的差異，視覺上會(huì)有一個(gè)很明顯的錯(cuò)位的感覺：
要想解決這個(gè)問題，我們可以把border 替換成outline，因?yàn)?code>outline 可以設(shè)置outline-offset。便能完美解決這個(gè)問題：
div {outline: 1px solid #333;outline-offset: -1px;&:hover {outline: none;}}復(fù)制代碼最后看看運(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);}}復(fù)制代碼注意，這里運(yùn)用了元素的偽元素生成的這個(gè)圖形，并且，寬高都是父元素的200%，超出則overflow: hidden。
接下來(lái)，給它加上旋轉(zhuǎn)：
div {animation: rotate 4s linear infinite;}@keyframes rotate { 100% {transform: rotate(1turn); }}復(fù)制代碼看看效果：
最后，再利用一個(gè)偽元素，將中間遮罩起來(lái)，一個(gè) Nice 的邊框動(dòng)畫就出來(lái)了 (動(dòng)畫會(huì)出現(xiàn)半透明元素，方便示意看懂原理)：
上述 Demo 完整代碼如下，這個(gè)效果我最早見于這位作者 -- 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);}復(fù)制代碼得到這樣一個(gè)圖形：
同樣的，讓它旋轉(zhuǎn)一起，一個(gè)單色追逐的邊框動(dòng)畫就出來(lái)了：
CodePen Demo -- gradient border animation 2
Wow，很不錯(cuò)的樣子。不過(guò)如果是單線條，有個(gè)很明顯的缺陷，就是邊框的末尾是一個(gè)小三角而不是垂直的，可能有些場(chǎng)景不適用或者 PM 接受不了。
那有沒有什么辦法能夠消除掉這些小三角呢？有的，在下文中我們?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); }}復(fù)制代碼效果圖和示意圖如下，旋轉(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)畫的，從一個(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%);}}復(fù)制代碼效果圖與示意圖一起：
CodePen - clip-path border animation
這里，因?yàn)闀?huì)裁剪元素，借用偽元素作為背景進(jìn)行裁剪并動(dòng)畫即可，使用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)畫：
為何說(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)沒，其實(shí)幾乎大部分的有意思的 CSS 效果，都是運(yùn)用了類似技巧：
簡(jiǎn)單的說(shuō)就是，我們看到的動(dòng)畫只是原本現(xiàn)象的一小部分，通過(guò)特定的裁剪、透明度的變化、遮罩等，讓我們最后只看到了原本現(xiàn)象的一部分。
border-image 的妙用
利用border-image，我們也可以實(shí)現(xiàn)一些有意思的邊框動(dòng)畫。關(guān)于border-image，有一篇非常好的講解文章 -- border-image 的正確用法，本文不對(duì)基本定義做過(guò)多的講解。
如果我們有這樣一張圖：
便可以利用border-image-slice 及border-image-repeat 的特性，得到類似的邊框圖案：
div {width: 200px;height: 120px;border: 24px solid;border-image: url(image-url);border-image-slice: 32;border-image-repeat: round;}復(fù)制代碼在這個(gè)基礎(chǔ)上，可以隨便改變?cè)氐母邔?，如此便能擴(kuò)展到任意大小的容器邊框中：
CodePen Demo -- border-image Demo
接著，在這篇文章 -- How to Animate a SVG with border-image 中，還講解了一種利用border-image 的邊框動(dòng)畫，非常的酷炫。
與上面例子不一樣的是，我們只需要讓我們的圖案，動(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-rotate(360deg);}}復(fù)制代碼
CodePen Demo -- clip-path、border-image 加 filter 實(shí)現(xiàn)圓角漸變邊框
如果你能讀到這里，小編希望你對(duì)“CSS實(shí)現(xiàn)邊框動(dòng)畫的示例”這一關(guān)鍵問題有了從實(shí)踐層面最深刻的體會(huì)，具體使用情況還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想閱讀更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
網(wǎng)站標(biāo)題：CSS實(shí)現(xiàn)邊框動(dòng)畫的示例-創(chuàng)新互聯(lián)
本文來(lái)源：http://fisionsoft.com.cn/article/dhssoc.html
