使用CSS實現(xiàn)簡單的邊框流光效果

發(fā)布時間：2023-09-14 16:40:14 作者：原來還有頭發(fā)

我要評論

今天給大家分享一個使用CSS實現(xiàn)簡單的邊框流光效果，就像和夜晚街上的廣告牌很像，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

首先上一個效果圖

有木有發(fā)現(xiàn)和夜晚街上的廣告牌很像，接下來讓我們看看如何使用css實現(xiàn)的吧

結構分析

首先很明顯應該使用一個盒子將文字裝起來，并且將文字進行了居中，然后我們看到這盒子的周圍圍繞了兩條光帶，那么這兩條光帶是怎么實現(xiàn)的呢？

其實這是用四個小盒子實現(xiàn)的，將這四個小盒子分別放在大盒子的周圍（緊貼這大盒子的內(nèi)壁），然后使用這幾個小盒子實現(xiàn)流光（跑馬燈）效果。

接下來看看具體的代碼實現(xiàn)

代碼實現(xiàn)

HTML結構

首先準備一個div大盒子，用來裝我們的廣告語，還有跑馬燈的四個小盒子

<div class="main">
		跑馬燈
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</div>

給大盒子設置樣式，方便我們在瀏覽器中看到

body {
		background-color: #000;
	}
	.main {
		position: absolute;
		width: 400px;
		height: 150px;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);//當為百分百單位時，相對的是自身的寬高
		overflow: hidden; //溢出部分隱藏
		text-align: center;
		line-height: 150px;
	    background-color: transparent;
		color: aquamarine;
		font-size: 30px;
		font-family: '宋體';
	}

當前效果是這樣的

下來我們給大盒子設置燈光效果。

內(nèi)部燈光效果

在效果圖上，我們可以看到燈光尾部的顏色比較淡，頭部顏色較亮，展現(xiàn)出一種過渡效果，那這樣的效果是怎么實現(xiàn)的呢？

這里就需要用到css3中background的一個新的屬性值:linear-gradient,通過這個屬性，我們可以將多個顏色設置為一個盒子的背景顏色，并且還有過渡效果，更強大的地方在于，這個屬性值可以設置漸變的方向。

語法：linear-gradient(漸變方向,color1,color2,color3...)

這里我選擇了#fff, #acd, cyan漸變的三種配色

那就開始使用這個屬性值，這是其中一個小盒子的效果（頂部），其他的效果實現(xiàn)方法都類似。

.main div {
		position: absolute;
	}
	.main :nth-child(1) {
		top: 0;
		left: 0;
		width: 100%;    //與父盒子等寬
		height: 2px;    //高要設置得較小
		background: linear-gradient(to right, #fff, #acd, cyan);
	}

這里設置的是頂部的燈光效果，使用top和left的屬性設置這個盒子的位置；使用width:100%，使得這個盒子的寬度與大盒子保持一致，然后使用height:2px,將燈光條的寬度設置為2px,當然也可以根據(jù)實際需求，改變燈光條的寬度

接著剩下三條燈光的實現(xiàn)原理基本相同，只有位置和背景顏色不同

剩下右，下，左背景顏色的漸變方向分別是to bottom、to left、to top

目前效果是這樣的：

這離我們想要的跑馬燈效果越來越像了

其實我們還差最后一步，給燈光加上動畫效果，也就是css3中的animation動畫屬性

同樣我們也以設置頂部的燈光效果作為示范：

css3動畫：

@keyframes run1 {
		from {
			transform: translateX(-100%) //初始讓它沿X軸負方向（向左）位移自身的寬度
		}
		to {
			transform: translateX(100%)  //動畫結束時，讓它回到原位
		}
	}

給盒子加上動畫

.main :nth-child(1) {
		top: 0;
		left: 0;
		width: 100%;
		height: 2px;
	    animation: run1 1s linear infinite;//復合屬性寫法，其中infinite是讓動畫效果無限循環(huán)
		background: linear-gradient(to right, #fff, #acd, cyan);
	}

前面沒有設置動畫之前，可以看到顏色最深的部分在最右邊，但是跑馬燈的實現(xiàn)需求是需要顏色最深部分從左邊出現(xiàn)，然后移動到右邊，所以應該將動畫的初識位置向左移整個盒子的長度，這樣就實現(xiàn)了需求

剩下三個盒子的實現(xiàn)方式類似，設置好后，最終得到我們想要的跑馬燈效果

全部代碼如下：

<!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; 設置動畫延遲加載時間*/
		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; 設置動畫延遲加載時間*/
		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; 設置動畫延遲加載時間 */
		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實現(xiàn)簡單的邊框流光效果的詳細內(nèi)容，更多關于CSS邊框流光效果的資料請關注腳本之家其它相關文章！