溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

純CSS3如何創(chuàng)建邊框陰影向外擴(kuò)散的動畫特效

發(fā)布時間：2021-08-26 09:51:06 來源：億速云 閱讀：359 作者：小新 欄目：web開發(fā)

這篇文章給大家分享的是有關(guān)純CSS3如何創(chuàng)建邊框陰影向外擴(kuò)散的動畫特效的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

我們先來看看效果圖：

純CSS3如何創(chuàng)建邊框陰影向外擴(kuò)散的動畫特效

下面我們來研究一下是怎么實現(xiàn)這個效果的：

首先創(chuàng)建HTML部分，定義一個div容器，包含文本文字：

<div id="box">
	編程是為那些有不同想法的人準(zhǔn)備的。。。<br /> 
	對于那些想要創(chuàng)造偉大事物并愿意改變世界的人。
</div>

純CSS3如何創(chuàng)建邊框陰影向外擴(kuò)散的動畫特效

然后開始定義css樣式來進(jìn)行修飾：調(diào)整布局樣式、背景顏色、div居中對齊、字體顏色

body {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	background: #00ac69;
}
#box {
	font-family: Arial;
	font-size: 18px;
	line-height: 30px;
	font-weight: bold;
	color: white;
	border: 2px solid;
	padding: 15px;
}

純CSS3如何創(chuàng)建邊框陰影向外擴(kuò)散的動畫特效

直角不好看，我們可以使用border-radius來將邊框的四個角設(shè)置為圓角

#box {
	border-radius: 10px;
}

純CSS3如何創(chuàng)建邊框陰影向外擴(kuò)散的動畫特效

下面就是最關(guān)鍵的，創(chuàng)建影向外擴(kuò)散的動畫特效：我們使用animation和@keyframes來實現(xiàn)

  • 首先把 animation 綁定到#box元素上，使用animation屬性 為@keyframes動畫規(guī)定名稱、設(shè)置完成動畫所花費(fèi)的時間、動畫的速度曲線。

#box {
	animation: animated-border 1.5s infinite;
}

  • 然后就是利用@keyframes來設(shè)置動畫每一幀的動作了

    這里是設(shè)置動畫剛開始（0%{}）時，邊框陰影為box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);；然后當(dāng)動畫完成（100%{}）時，邊框陰影為box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);，陰影距離變大、顏色變?yōu)橥该鳌?br/>

@keyframes animated-border {
	0% {
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
	}

	100% {
		box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
	}
}

純CSS3如何創(chuàng)建邊框陰影向外擴(kuò)散的動畫特效

OK，大功告成！下面附上完整代碼：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			body {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100vh;
				background: #00ac69;
			}

			#box {
				font-family: Arial;
				font-size: 18px;
				line-height: 30px;
				font-weight: bold;
				color: white;
				border: 2px solid;
				padding: 15px;
				border-radius: 10px;
				animation: animated-border 1.5s infinite;
			}

			@keyframes animated-border {
				0% {
					box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
				}

				100% {
					box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
				}
			}
		</style>
	</head>
	<body>
		<div id="box">
			編程是為那些有不同想法的人準(zhǔn)備的。。。<br />
			對于那些想要創(chuàng)造偉大事物并愿意改變世界的人。
		</div>
	</body>
</html>

最后給大家介紹一下關(guān)鍵屬性animation和@keyframes：

  • animation 屬性是一個簡寫屬性，可以在一個聲明中設(shè)置多個動畫屬性：

animation-name：指定要綁定到選擇器的關(guān)鍵幀的名稱
animation-duration：動畫指定需要多少秒或毫秒完成
animation-timing-function：設(shè)置動畫將如何完成一個周期
animation-delay：設(shè)置動畫在啟動前的延遲間隔。
animation-iteration-count：定義動畫的播放次數(shù)。
animation-direction：指定是否應(yīng)該輪流反向播放動畫。
animation-fill-mode：規(guī)定當(dāng)動畫不播放時（當(dāng)動畫完成時，或當(dāng)動畫有一個延遲未開始播放時），要應(yīng)用到元素的樣式。
animation-play-state：指定動畫是否正在運(yùn)行或已暫停。

  • @keyframes規(guī)則用于定義CSS動畫的一個周期的行為；需要和animation屬性一起使用，創(chuàng)建簡單的動畫效果。

@keyframe規(guī)則由關(guān)鍵字“@keyframe”組成，后面接著是給出動畫名稱的標(biāo)識符（將使用animation-name引用），隨后是通過一組樣式規(guī)則（用大括號分隔）。然后，通過使用標(biāo)識符作為animation-name屬性的值，將動畫應(yīng)用于元素。例如：

/* 定義動畫*/
@keyframes 動畫名稱{
    /* 樣式規(guī)則*/
}
/* 將它應(yīng)用于元素 */
.element {
    animation-name: 動畫名稱（在@keyframes中已經(jīng)聲明好的）;
    /* 或使用動畫簡寫屬性*/
    animation: 動畫名稱 1s ...
}

在@keyframes規(guī)則的大括號中，我們需要定義關(guān)鍵幀或航點(diǎn)，這些關(guān)鍵幀或航點(diǎn)指定在動畫期間的特定點(diǎn)處正在動畫化的屬性的值。這允許我們控制動畫序列中的中間步驟。例如上例中的：

@keyframes animated-border {
	0% {
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
	}

	100% {
		box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
	}
}

感謝各位的閱讀！關(guān)于“純CSS3如何創(chuàng)建邊框陰影向外擴(kuò)散的動畫特效”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手