一、簡介
? 之前有做過漸變色邊框的樣式，然后某天刷抖??，看到某個老師在講跑馬燈的樣式效果，于是就自己嘗試實現(xiàn)一下跑馬燈樣式的邊框，雖然這種樣式并不常見（基本沒卵用），其使用場景我至今沒想到，但是它足夠花里胡哨，玩的就是花活。CSS才是前端最難精通的技術(shù)，也是前端對于后端最大的技術(shù)難點。以后可不敢在簡歷上寫精通、熟練CSS了，最多寫個見過CSS就可以了。
? 經(jīng)過一番實踐，我實現(xiàn)了兩種形態(tài)的跑馬燈樣式邊框，其效果如下圖所示。其主要使用的CSS屬性有：overflow、position、transform、 animation、@keyframes以及::after和::before等等。
案例效果：
二、具體代碼
1、首尾不相連的跑馬燈邊框
實現(xiàn)思路：
? border屬性本身肯定是實現(xiàn)不了跑馬燈的效果，因為其不能變化。因此我們就要想別的辦法來實現(xiàn)邊框的樣式。實現(xiàn)方法：
? ① 利用padding屬性使元素的內(nèi)容區(qū)域與最外層之間形成一個間隔。
? ② 利用偽元素::after 和position，將該偽元素模擬為元素的內(nèi)容區(qū)域，并設(shè)置背景顏色和圓角等樣式，此時我們就實現(xiàn)了一個有透明邊框的元素了，padding區(qū)域就是邊框區(qū)域。
? ③ 利用偽元素::before定義一個具有漸變色背景的偽元素，然后通過動畫使其圍繞元素的中心點旋轉(zhuǎn)。該偽元素的漸變背景決定了跑馬燈邊框的顏色。
? ④設(shè)置元素的overflow: hidden;，隱藏偽元素::before在旋轉(zhuǎn)時，超出元素的部分，并通過設(shè)置層級，使偽元素::after 覆蓋在偽元素::before之上。這樣旋轉(zhuǎn)的偽元素::before就只能在padding區(qū)域內(nèi)顯示出來，也就是將其模擬成邊框的效果，再加上旋轉(zhuǎn)動畫，從而顯示出跑馬燈邊框的效果。
具體代碼：
<style>
/* 定義一個全局的css變量 該寬度決定了邊框的寬度 */
:root {
--border-width: 5px;
}
/* 定義盒子區(qū)域的寬高 包含邊框所占區(qū)域 */
.d1 {
position: relative;
width: 200px;
height: 60px;
/* 為了讓內(nèi)容區(qū)域不被邊框覆蓋 設(shè)置等寬的padding */
padding: var(--border-width);
margin: 200px auto;
/* 設(shè)置元素圓角 */
border-radius: 10px;
text-align: center;
line-height: 60px;
color: #333;
/* 隱藏超出的部分 這很重要 */
overflow: hidden;
}
/* 利用偽元素::after 定義盒子內(nèi)容區(qū)域 */
.d1::after {
content: '';
position: absolute;
/* 使用css變量定位內(nèi)容區(qū)域位置 */
left: var(--border-width);
top: var(--border-width);
/* 根據(jù)css變量設(shè)置內(nèi)容區(qū)域的寬高 */
width: calc(100% - var(--border-width) * 2);
height: calc(100% - var(--border-width) * 2);
background: #ccc;
/* 設(shè)置元素層級小于父級元素 使父元素的內(nèi)容能夠顯示在該內(nèi)容區(qū)域之上 */
z-index: -1;
/* 設(shè)置圓角 要比父元素的圓角小一些 */
border-radius: 6px;
}
/* 利用偽元素::before 定義盒子邊框區(qū)域 */
.d1::before {
content: '';
position: absolute;
/* 利用定位將元素的左上角定位到父元素的中心 */
left: 50%;
top: 50%;
/* 設(shè)置該元素的寬高 要大于父元素的寬高 */
width: 220px;
height: 220px;
/* 設(shè)置該元素的漸變背景 */
background: linear-gradient(90deg, #000, yellow 20%);
/* 設(shè)置該元素的層級 要小于用偽元素::after 定義的盒子內(nèi)容區(qū)域 */
z-index: -2;
/* 利用動畫旋轉(zhuǎn)該元素 */
animation: rotate1 1.3s linear infinite;
/* 定義旋轉(zhuǎn)的圓心為元素的左上角 */
transform-origin: 0 0;
}
/* 聲明旋轉(zhuǎn)動畫 */
@keyframes rotate1 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<!-- 跑馬燈邊框的根元素 -->
<div class="d1">跑馬燈邊框1</div>
頁面效果：
為了幫助理解，去除掉overflow: hidden屬性的效果圖：文章來源：http://www.zghlxwxcb.cn/news/detail-799315.html
2、首尾相連的跑馬燈邊框
實現(xiàn)思路：
? 其實該樣式的實現(xiàn)思路與前面的基本相同，只不過是修改了邊框元素的位置和旋轉(zhuǎn)的中心點，使其能夠在旋轉(zhuǎn)動的過程中，覆蓋邊框的所有區(qū)域，從而使跑馬燈首尾相連。實現(xiàn)方法：
? ① 利用padding屬性使元素的內(nèi)容區(qū)域與最外層之間形成一個間隔。
? ② 利用偽元素::after 和position，將該偽元素模擬為元素的內(nèi)容區(qū)域，并設(shè)置背景顏色和圓角等樣式，此時我們就實現(xiàn)了一個有透明邊框的元素了，padding區(qū)域就是邊框區(qū)域。
? ③ 利用偽元素::before定義一個具有漸變色背景的偽元素，先通過position和transform使該偽元素的中心點與根元素的中心點對齊，然后通過動畫使其圍繞元素的中心點旋轉(zhuǎn)。同時該偽元素的漸變背景決定了跑馬燈邊框的顏色。
? ④設(shè)置元素的overflow: hidden;，隱藏偽元素::before在旋轉(zhuǎn)時，超出元素的部分，并通過設(shè)置層級，使偽元素::after 覆蓋在偽元素::before之上。這樣旋轉(zhuǎn)的偽元素::before就只能在padding區(qū)域內(nèi)顯示出來，也就是將其模擬成邊框的效果，再加上旋轉(zhuǎn)動畫，從而顯示出跑馬燈邊框的效果。
具體代碼：
<style>
/* 定義一個全局的css變量 該寬度決定了邊框的寬度 */
:root {
--border-width: 5px;
}
/* 定義盒子區(qū)域的寬高 包含邊框所占區(qū)域 */
.d2 {
position: relative;
width: 200px;
height: 60px;
/* 為了讓內(nèi)容區(qū)域不被邊框覆蓋 設(shè)置等寬的padding */
padding: var(--border-width);
margin: 200px auto;
/* 設(shè)置元素圓角 */
border-radius: 10px;
text-align: center;
line-height: 60px;
color: #333;
/* 隱藏超出的部分 這很重要 */
overflow: hidden;
}
/* 利用偽元素::after 定義盒子內(nèi)容區(qū)域 */
.d2::after {
content: '';
position: absolute;
/* 使用css變量定位內(nèi)容區(qū)域位置 */
left: var(--border-width);
top: var(--border-width);
/* 根據(jù)css變量設(shè)置內(nèi)容區(qū)域的寬高 */
width: calc(100% - var(--border-width) * 2);
height: calc(100% - var(--border-width) * 2);
background: #ccc;
/* 設(shè)置元素層級小于父級元素 使父元素的內(nèi)容能夠顯示在該內(nèi)容區(qū)域之上 */
z-index: -1;
/* 設(shè)置圓角 要比父元素的圓角小一些 */
border-radius: 6px;
}
/* 利用偽元素::before 定義盒子邊框區(qū)域 */
.d2::before {
content: '';
position: absolute;
/* 利用定位和位移將元素的中心點定位到父元素的中心點 */
left: 50%;
top: 50%;
transform: translateY(-50%) translateX(-50%);
width: 220px;
height: 220px;
/* 設(shè)置該元素的漸變背景 該背景決定了跑馬燈邊框的顏色 */
background: linear-gradient(-45deg, #000, yellow 60%);
/* 設(shè)置該元素的層級 要小于用偽元素::after 定義的盒子內(nèi)容區(qū)域 */
z-index: -2;
/* 利用動畫旋轉(zhuǎn)該元素 */
animation: rotate2 1.5s linear infinite;
/* 設(shè)置旋轉(zhuǎn)的圓心為元素的中心點 */
transform-origin: 50% 50%;
}
/* 聲明旋轉(zhuǎn)動畫 旋轉(zhuǎn)的同時 保持元素位置不變 */
@keyframes rotate2 {
0% {
transform: translateY(-50%) translateX(-50%) rotate(0deg);
}
100% {
transform: translateY(-50%) translateX(-50%) rotate(360deg);
}
}
</style>
<!-- 跑馬燈邊框的根元素 -->
<div class="d2">跑馬燈邊框2</div>
頁面效果：
為了幫助理解，去除掉overflow: hidden屬性的效果圖：
文章來源地址http://www.zghlxwxcb.cn/news/detail-799315.html
到了這里，關(guān)于CSS 之 跑馬燈邊框的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
