使用CSS實(shí)現(xiàn)簡(jiǎn)單的邊框流光效果
我要評(píng)論首先上一個(gè)效果圖
有木有發(fā)現(xiàn)和夜晚街上的廣告牌很像，接下來(lái)讓我們看看如何使用css實(shí)現(xiàn)的吧
結(jié)構(gòu)分析
首先很明顯應(yīng)該使用一個(gè)盒子將文字裝起來(lái)，并且將文字進(jìn)行了居中，然后我們看到這盒子的周?chē)鷩@了兩條光帶，那么這兩條光帶是怎么實(shí)現(xiàn)的呢？
其實(shí)這是用四個(gè)小盒子實(shí)現(xiàn)的，將這四個(gè)小盒子分別放在大盒子的周?chē)ňo貼這大盒子的內(nèi)壁），然后使用這幾個(gè)小盒子實(shí)現(xiàn)流光（跑馬燈）效果。
接下來(lái)看看具體的代碼實(shí)現(xiàn)
代碼實(shí)現(xiàn)
HTML結(jié)構(gòu)
首先準(zhǔn)備一個(gè)div大盒子，用來(lái)裝我們的廣告語(yǔ)，還有跑馬燈的四個(gè)小盒子
<div class="main"> 跑馬燈 <div></div> <div></div> <div></div> <div></div> </div>
給大盒子設(shè)置樣式，方便我們?cè)跒g覽器中看到
body {
background-color: #000;
}
.main {
position: absolute;
width: 400px;
height: 150px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);//當(dāng)為百分百單位時(shí)，相對(duì)的是自身的寬高
overflow: hidden; //溢出部分隱藏
text-align: center;
line-height: 150px;
background-color: transparent;
color: aquamarine;
font-size: 30px;
font-family: '宋體';
}當(dāng)前效果是這樣的
下來(lái)我們給大盒子設(shè)置燈光效果。
內(nèi)部燈光效果
在效果圖上，我們可以看到燈光尾部的顏色比較淡，頭部顏色較亮， 展現(xiàn)出一種過(guò)渡效果，那這樣的效果是怎么實(shí)現(xiàn)的呢？
這里就需要用到css3中background的一個(gè)新的屬性值:linear-gradient,通過(guò)這個(gè)屬性，我們可以將多個(gè)顏色設(shè)置為一個(gè)盒子的背景顏色，并且還有過(guò)渡效果，更強(qiáng)大的地方在于，這個(gè)屬性值可以設(shè)置漸變的方向。
語(yǔ)法：linear-gradient(漸變方向,color1,color2,color3...)
這里我選擇了#fff, #acd, cyan漸變的三種配色
那就開(kāi)始使用這個(gè)屬性值，這是其中一個(gè)小盒子的效果（頂部），其他的效果實(shí)現(xiàn)方法都類(lèi)似。
.main div {
position: absolute;
}
.main :nth-child(1) {
top: 0;
left: 0;
width: 100%; //與父盒子等寬
height: 2px; //高要設(shè)置得較小
background: linear-gradient(to right, #fff, #acd, cyan);
}這里設(shè)置的是頂部的燈光效果，使用top和left的屬性設(shè)置這個(gè)盒子的位置；使用width:100%，使得這個(gè)盒子的寬度與大盒子保持一致，然后使用height:2px,將燈光條的寬度設(shè)置為2px,當(dāng)然也可以根據(jù)實(shí)際需求，改變燈光條的寬度
接著剩下三條燈光的實(shí)現(xiàn)原理基本相同，只有位置和背景顏色不同
剩下右，下，左背景顏色的漸變方向分別是to bottom、to left、to top
目前效果是這樣的：
這離我們想要的跑馬燈效果越來(lái)越像了
其實(shí)我們還差最后一步，給燈光加上動(dòng)畫(huà)效果，也就是css3中的animation動(dòng)畫(huà)屬性
同樣我們也以設(shè)置頂部的燈光效果作為示范：
css3動(dòng)畫(huà)：
@keyframes run1 {
from {
transform: translateX(-100%) //初始讓它沿X軸負(fù)方向（向左）位移自身的寬度
}
to {
transform: translateX(100%) //動(dòng)畫(huà)結(jié)束時(shí)，讓它回到原位
}
}給盒子加上動(dòng)畫(huà)
.main :nth-child(1) {
top: 0;
left: 0;
width: 100%;
height: 2px;
animation: run1 1s linear infinite;//復(fù)合屬性寫(xiě)法，其中infinite是讓動(dòng)畫(huà)效果無(wú)限循環(huán)
background: linear-gradient(to right, #fff, #acd, cyan);
}前面沒(méi)有設(shè)置動(dòng)畫(huà)之前，可以看到顏色最深的部分在最右邊，但是跑馬燈的實(shí)現(xiàn)需求是需要顏色最深部分從左邊出現(xiàn)，然后移動(dòng)到右邊，所以應(yīng)該將動(dòng)畫(huà)的初識(shí)位置向左移整個(gè)盒子的長(zhǎng)度，這樣就實(shí)現(xiàn)了需求
剩下三個(gè)盒子的實(shí)現(xiàn)方式類(lèi)似，設(shè)置好后，最終得到我們想要的跑馬燈效果
全部代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
body {
background-color: #000;
}
.main {
position: absolute;
width: 400px;
height: 150px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
text-align: center;
background-color: transparent;
line-height: 150px;
color: aquamarine;
font-size: 30px;
font-family: '宋體';
}
.main div {
position: absolute;
}
.main :nth-child(1) {
top: 0;
left: 0;
width: 100%;
height: 2px;
animation: run1 1s linear infinite;
/* animation-delay: 0s; */
background: linear-gradient(to right, #fff, #acd, cyan);
}
.main :nth-child(2) {
top: 0;
right: 0;
height: 100%;
width: 2px;
animation: run2 1s linear infinite;
/* animation-delay: 1s; 設(shè)置動(dòng)畫(huà)延遲加載時(shí)間*/
background: linear-gradient(to bottom, #fff, #acd, cyan);
}
.main :nth-child(3) {
bottom: 0;
left: 0;
height: 2px;
width: 100%;
animation: run3 1s linear infinite;
/* animation-delay: 2s; 設(shè)置動(dòng)畫(huà)延遲加載時(shí)間*/
background: linear-gradient(to right, #fff, #acd, cyan);
}
.main :nth-child(4) {
top: 0;
left: 0;
height: 100%;
width: 2px;
animation: run4 1s linear infinite;
/* animation-delay: 3s; 設(shè)置動(dòng)畫(huà)延遲加載時(shí)間 */
background: linear-gradient(to top, #fff, #acd, cyan);
}
@keyframes run1 {
from {
transform: translateX(-100%)
}
to {
transform: translateX(100%)
}
}
@keyframes run2 {
from {
transform: translateY(-100%)
}
to {
transform: translateY(100%)
}
}
@keyframes run3 {
from {
transform: translateX(100%)
}
to {
transform: translateX(-100%)
}
}
@keyframes run4 {
from {
transform: translateY(100%)
}
to {
transform: translateY(-100%)
}
}
</style>
<body>
<div class="main">
海綿寶寶
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>以上就是使用CSS實(shí)現(xiàn)簡(jiǎn)單的邊框流光效果的詳細(xì)內(nèi)容，更多關(guān)于CSS邊框流光效果的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章給大家介紹了如何使用CSS實(shí)現(xiàn)漸變圓角邊框的效果，有沒(méi)有發(fā)現(xiàn)在現(xiàn)如今的網(wǎng)站應(yīng)用中，我們大量的使用到這類(lèi)場(chǎng)景,在解決這類(lèi)問(wèn)題時(shí)，我們利用了css的mask與mask-comp2023-10-12
今天給大伙帶來(lái)的是一個(gè)鋸齒形邊框，類(lèi)似于傳統(tǒng)郵票的邊框，有一圈鋸齒形狀，其實(shí)看到這種效果，相信很多人第一反應(yīng)是采用偽元素的方式添加小三角形來(lái)實(shí)現(xiàn)鋸齒狀，確實(shí)是這2023-09-08
CSS實(shí)現(xiàn)切角+邊框+投影+內(nèi)容背景色漸變效果
這篇文章主要介紹了CSS實(shí)現(xiàn)切角+邊框+投影+內(nèi)容背景色漸變效果，單純用css實(shí)現(xiàn)切角+邊框+投影+內(nèi)容背景色漸變所有效果，因?yàn)閁I沒(méi)給背景切圖，尋思這個(gè)理論上用css就能實(shí)現(xiàn)2021-10-27
本文通過(guò)代碼給大家介紹css背景和邊框標(biāo)簽的一些知識(shí)，通過(guò)相關(guān)屬性設(shè)置背景顏色，背景圖像，對(duì)css背景與邊框的相關(guān)知識(shí)感興趣的朋友一起看看吧2021-05-21
css 中多種邊框的實(shí)現(xiàn)小竅門(mén)
這篇文章主要介紹了css 中多種邊框的實(shí)現(xiàn)小竅門(mén),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)2021-04-07css實(shí)現(xiàn)邊框流動(dòng)的項(xiàng)目實(shí)踐
邊框流動(dòng)效果是一種很酷的效果，可以為網(wǎng)頁(yè)增添一些動(dòng)感和活力，本文就來(lái)介紹一下css實(shí)現(xiàn)邊框流動(dòng)的項(xiàng)目實(shí)踐，具有一定的參考價(jià)值，感興趣的可以了解一下2024-02-01
