純CSS3創造邊框陰影向外擴散的動畫特效-css教學-PHP中文網

在之前的文章《手把手教你使用CSS3實現按鈕懸停閃爍動態特效》中，我們介紹了使用CSS3給按鈕添加動態效果，實現一個按鈕懸停閃亮陰影動畫效果的方法，有興趣的可以學習了解一下~

今天這篇文章給大家分享一個邊框動畫特效，看看使用CSS3如何實現邊框陰影向外擴散的動畫特效。

我們先來看看效果圖：

純CSS3創造邊框陰影向外擴散的動畫特效

下面我們來研究一下是怎麼實現這個效果的：

首先建立HTML部分，定義一個div容器，包含文字文字：

<div id="box">
	编程是为那些有不同想法的人准备的。。。<br /> 
	对于那些想要创造伟大事物并愿意改变世界的人。
</div>

登入後複製

純CSS3創造邊框陰影向外擴散的動畫特效

然後開始定義css樣式來進行修飾：調整佈局樣式、背景顏色、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創造邊框陰影向外擴散的動畫特效

#直角不好看，我們可以使用border-radius來將邊框的四個角設定為圓角

#box {
	border-radius: 10px;
}

登入後複製

純CSS3創造邊框陰影向外擴散的動畫特效

下面是最關鍵的，創造影向外擴散的動畫特效：我們使用animation和@keyframes來實現

先把animation 綁定到#box元素上，使用animation屬性為@keyframes動畫規定名稱、設定完成動畫所花費的時間、動畫的速度曲線。

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

登入後複製

然後就是利用@keyframes來設定動畫每一幀的動作了
這裡是設定動畫剛開始（0%{} ）時，邊框陰影為box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);；然後動畫完成（100%{}）時，邊框陰影為

純CSS3創造邊框陰影向外擴散的動畫特效

#########################################################################################################都box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);###，陰影距離變大、顏色變成透明。 ############

@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);
	}
}

登入後複製

############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">
			编程是为那些有不同想法的人准备的。。。<br />
			对于那些想要创造伟大事物并愿意改变世界的人。
		</div>
	</body>
</html>

登入後複製

###最後跟大家介紹關鍵屬性###animation###和###@keyframes###：############animation屬性是一個簡寫屬性，可以在一個宣告中設定多個動畫屬性：#########

animation-name：指定要绑定到选择器的关键帧的名称
animation-duration：动画指定需要多少秒或毫秒完成
animation-timing-function：设置动画将如何完成一个周期
animation-delay：设置动画在启动前的延迟间隔。
animation-iteration-count：定义动画的播放次数。
animation-direction：指定是否应该轮流反向播放动画。
animation-fill-mode：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-play-state：指定动画是否正在运行或已暂停。

登入後複製

############@keyframes###規則用於定義CSS動畫的一個週期的行為；需要和animation屬性一起使用，創造簡單的動畫效果。 ############@keyframe規則由關鍵字「@keyframe」組成，後面接著是給出動畫名稱的識別碼（將使用animation-name引用），隨後是透過一組樣式規則（用大括號分隔）。然後，透過使用標識符作為animation-name屬性的值，將動畫應用於元素。例如：###

/* 定义动画*/
@keyframes 动画名称{
    /* 样式规则*/
}
/* 将它应用于元素 */
.element {
    animation-name: 动画名称（在@keyframes中已经声明好的）;
    /* 或使用动画简写属性*/
    animation: 动画名称 1s ...
}

登入後複製

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

@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);
	}
}

登入後複製

###PHP中文網平台有非常多的影片教學資源，歡迎大家學習《###css影片教學###》！ ###

以上是純CSS3創造邊框陰影向外擴散的動畫特效的詳細內容。更多資訊請關注PHP中文網其他相關文章！