CSS3 流動(dòng)邊框（仿王者榮耀等待效果）的三種實(shí)現(xiàn)方式

!DOCTYPE html

創(chuàng)新互聯(lián)是專(zhuān)業(yè)的海州網(wǎng)站建設(shè)公司，海州接單;提供網(wǎng)站設(shè)計(jì)制作、網(wǎng)站建設(shè),網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專(zhuān)業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行海州網(wǎng)站開(kāi)發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專(zhuān)業(yè)做搜索引擎喜愛(ài)的網(wǎng)站,專(zhuān)業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!

html

head

meta charset="utf8"

style

:root {

--border-anim-size: 10em;

--border-anim-width: calc(var(--border-anim-size) / 20);

--border-anim-width-double: calc(var(--border-anim-width)*2);

--border-anim-duration: 5s;

--border-anim-border-color: gray;

--border-anim-hover-color: LightCoral;

}

body {

display: flex;

}

.border-anim {

width: var(--border-anim-size);

height: var(--border-anim-size);

position: relative;

border: 1px solid? var(--border-anim-border-color);

}

.border-anim::before, .border-anim::after {

content: '';

position: absolute;

border: var(--border-anim-width) solid var(--border-anim-border-color);

/* 讓邊框在內(nèi)容區(qū)域內(nèi)繪制 */

box-sizing: border-box;

transition: background-color 1s;

}

.border-anim::before {

animation: anim-border-run calc(var(--border-anim-duration) * 2) linear infinite;

}

.border-anim::after {

animation: anim-border-run calc(var(--border-anim-duration) * 2) calc(var(--border-anim-duration) / -1) linear infinite;

}

.border-anim:hover::before, .border-anim:hover::after {

background-color: var(--border-anim-hover-color);

}

.border-anim-content {

width: calc(100% - var(--border-anim-width-double));

height: calc(100% - var(--border-anim-width-double));

margin: var(--border-anim-width);

border: 1px solid var(--border-anim-border-color);

}

@keyframes anim-border-run {

/* 這里將動(dòng)畫(huà)分成了4步；也可以改為2步，這時(shí)before和after用的就要是兩套keyframes了 */

from, to {

width: var(--border-anim-width-double);

height: 100%;

top: 0;

left: 0;

}

25% {

width: 100%;

height: var(--border-anim-width-double);

top: calc(100% - var(--border-anim-width-double));

left: 0;

}

50% {

width: var(--border-anim-width-double);

height: 100%;

top: 0;

left: calc(100% - var(--border-anim-width-double));

}

75% {

width: 100%;

height: var(--border-anim-width-double);

top: 0%;

left: 0%;

}

/* 需要設(shè)置臨界效果，否則會(huì)漸變 */

from, to, 24.9% {

border-left-color: var(--border-anim-border-color);

border-top-color: transparent;

border-right-color: transparent;

border-bottom-color: var(--border-anim-border-color);

}

25%, 49.9% {

border-left-color: transparent;

border-top-color: transparent;

border-right-color: var(--border-anim-border-color);

border-bottom-color: var(--border-anim-border-color);

}

50%, 74.9% {

border-left-color: transparent;

border-top-color: var(--border-anim-border-color);

border-right-color: var(--border-anim-border-color);

border-bottom-color: transparent;

}

75%, 99.9% {

border-left-color: var(--border-anim-border-color);

border-top-color: var(--border-anim-border-color);

border-right-color: transparent;

border-bottom-color: transparent;

}

}

/style

style

.border-anim2 {

width: var(--border-anim-size);

height: var(--border-anim-size);

position: relative;

border: 1px solid var(--border-anim-border-color);

}

.border-anim2-edge {

position: absolute;

/* 必須把其他邊框置0，否則有默認(rèn)值存在 */

border: 0px solid var(--border-anim-border-color);

box-sizing: border-box;

}

/*

注意：CSS中不能前向選擇，而只能后向選擇！

因?yàn)槿绻鸆SS支持了父選擇器，那就必須要頁(yè)面所有子元素加載完畢才能渲染HTML文檔，

因?yàn)樗^“父選擇器”，就是后代元素影響祖先元素，如果后代元素還沒(méi)加載處理，如何影響祖先元素的樣式？

于是，網(wǎng)頁(yè)渲染呈現(xiàn)速度就會(huì)大大減慢，瀏覽器會(huì)出現(xiàn)長(zhǎng)時(shí)間的白板。

*/

/* 波浪號(hào)和加號(hào)都是選擇其后的元素，區(qū)別是加號(hào)只取一個(gè)，波浪取所有

.border-anim-content:hover ~ .border-anim2-edge { */

.border-anim2:hover .border-anim2-edge {

background-color: var(--border-anim-hover-color);

}

.border-anim2-left {

width: var(--border-anim-width-double);

height: 100%;

left: 0;

border-left-width: var(--border-anim-width);

animation: anim2-border-run-left var(--border-anim-duration) calc(var(--border-anim-duration) / -2) linear infinite;

}

.border-anim2-top {

height: var(--border-anim-width-double);

width: 100%;

top: 0;

border-top-width: var(--border-anim-width);

animation: anim2-border-run-top var(--border-anim-duration) linear infinite;

}

.border-anim2-right {

width: var(--border-anim-width-double);

height: 100%;

right: 0;

border-right-width: var(--border-anim-width);

animation: anim2-border-run-right var(--border-anim-duration) calc(var(--border-anim-duration) / -2) linear infinite;

}

.border-anim2-bottom {

height: var(--border-anim-width-double);

width: 100%;

bottom: 0;

border-bottom-width: var(--border-anim-width);

animation: anim2-border-run-bottom var(--border-anim-duration) linear infinite;

}

@keyframes anim2-border-run-left {

from, to {

height: 0;

}

50% {

height: 100%;

}

from, to, 49.9% {

top: 0;

bottom: auto;

}

50%, 99.9% {

top: auto;

bottom: 0;

}

}

@keyframes anim2-border-run-top {

from, to {

width: 0;

}

50% {

width: 100%;

}

from, to, 49.9% {

left: auto;

right: 0;

}

50%, 99.9% {

left: 0;

right: auto;

}

}

@keyframes anim2-border-run-right {

from, to {

height: 0;

}

50% {

height: 100%;

}

from, to, 49.9% {

top: auto;

bottom: 0;

}

50%, 99.9% {

top: 0;

bottom: auto;

}

}

@keyframes anim2-border-run-bottom {

from, to {

width: 0;

}

50% {

width: 100%;

}

from, to, 49.9% {

left: 0;

right: auto;

}

50%, 99.9% {

left: auto;

right: 0;

}

}

/style

style

.border-anim3 {

width: var(--border-anim-size);

height: var(--border-anim-size);

position: relative;

border: 1px solid var(--border-anim-border-color);

box-sizing: border-box;

}

.border-anim3::before, .border-anim3::after {

content: '';

position: absolute;

width: 100%;

height: 100%;

top: 0;

left: 0;

}

.border-anim3::before {

box-shadow: 0 0 0 var(--border-anim-width) var(--border-anim-border-color) inset;

animation: anim3-border-run calc(var(--border-anim-duration) * 2) calc(var(--border-anim-duration) / -1) linear infinite;

}

.border-anim3::after {

box-shadow: 0 0 0 var(--border-anim-width) var(--border-anim-border-color) inset;

animation: anim3-border-run calc(var(--border-anim-duration) * 2) linear infinite;

}

.border-anim3:hover::before, .border-anim3:hover::after {

/* 如果只在hover的時(shí)候設(shè)置transition，那么進(jìn)入有效，但是退出無(wú)效(即退出時(shí)不會(huì)有緩動(dòng)) */

transition: background-color 1s;

background-color: var(--border-anim-hover-color);

}

@keyframes anim3-border-run {

/*

clip通過(guò)對(duì)元素進(jìn)行剪切來(lái)控制元素的可顯示區(qū)域(clip的區(qū)域顯示，其他隱藏)

clip屬性只能在元素設(shè)置了“position:absolute”或者“position:fixed”屬性起作用

shape函數(shù)聲明：rect(top right bottom left)

rect()和top和bottom指定偏移量是從元素盒子頂部邊緣算起；left和right指定的偏移量是從元素盒子左邊邊緣算起（包括邊框）。

如果right和bottom設(shè)置為auto時(shí)，他們就相當(dāng)于元素的寬度（這個(gè)寬度包括元素的border、padding和width），或者簡(jiǎn)單的理解為100%

注意：1.值不能設(shè)置為百分比。 2.在動(dòng)畫(huà)設(shè)置過(guò)程里不能使用auto，使用auto沒(méi)有動(dòng)畫(huà)效果（因此建議使用SCSS或者LESS之類(lèi)的預(yù)處理器）

*/

/*

clip動(dòng)畫(huà)有3種方案，但是都有點(diǎn)小瑕疵（在線(xiàn)條粗的時(shí)候明顯，線(xiàn)條細(xì)的情況下完全看不出來(lái)）

(1)使用如下的1和9作為邊界，當(dāng)拐彎的時(shí)候，尾部多余的邊界會(huì)跟著動(dòng)

(2)將下面的1和9替換為0和10，當(dāng)拐彎的時(shí)候，線(xiàn)條寬度會(huì)變?yōu)?

(3)在每個(gè)狀態(tài)后面一步立即重置它，但是會(huì)出現(xiàn)抖動(dòng)

*/

from, to {

clip: rect(0, 1em, 10em, 0);

}

1% {

clip: rect(1em, 1em, 10em, 0);

}

25% {

clip: rect(9em, 10em, 10em, 0);

}

25.1% {

clip: rect(9em, 10em, 10em, 1em);

}

50% {

clip: rect(0, 10em, 10em, 9em);

}

50.1% {

clip: rect(0, 10em, 9em, 9em);

}

75% {

clip: rect(0, 10em, 1em, 0);

}

75.1% {

clip: rect(0, 9em, 1em, 0);

}

}

/style

/head

body

section

h1(1)通過(guò)兩矩形的移動(dòng)來(lái)制作動(dòng)畫(huà)/h1

div class="border-anim"

div class="border-anim-content"/div

/div

/section

section

h1(2)通過(guò)四個(gè)邊框的長(zhǎng)度來(lái)控制動(dòng)畫(huà)/h1

div class="border-anim2"

div class="border-anim-content"/div

div class="border-anim2-edge border-anim2-left"/div

div class="border-anim2-edge border-anim2-top"/div

div class="border-anim2-edge border-anim2-right"/div

div class="border-anim2-edge border-anim2-bottom"/div

/div

/section

section

h1(3)通過(guò)clip的裁剪來(lái)顯示動(dòng)畫(huà)/h1

div class="border-anim3"

div class="border-anim-content"/div

/div

section

/body

/html

對(duì)web開(kāi)發(fā)技術(shù)感興趣的同學(xué)，歡迎私信我加群，不管你是小白還是大牛我都?xì)g迎，還有大牛整理的一套高效率學(xué)習(xí)路線(xiàn)和教程與您免費(fèi)分享，同時(shí)每天更新視頻資料。

最后，祝大家早日學(xué)有所成，拿到滿(mǎn)意offer，快速升職加薪，走上人生巔峰

如何給html頁(yè)面添加動(dòng)態(tài)等待效果

樓上的總結(jié)也很全面，我從我的經(jīng)驗(yàn)中總結(jié)如下

1：ajax請(qǐng)求過(guò)程綁定beforeSend方法。

2：觸發(fā)事件時(shí)顯示loading部分html。完成后再隱藏html

CSS樣式表在網(wǎng)頁(yè)制作中的作用

CSS樣式是一種用來(lái)表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語(yǔ)言。

CSS能夠?qū)W(wǎng)頁(yè)中的對(duì)象的位置排版進(jìn)行像素級(jí)的精確控制，支持幾乎所有的字體字號(hào)樣式，擁有對(duì)網(wǎng)頁(yè)對(duì)象和模型樣式編輯的能力，并能夠進(jìn)行初步交互設(shè)計(jì)，可以很方便的控制網(wǎng)頁(yè)表現(xiàn)，比如配色，布局等。