Pure CSS3 creates an animated special effect where the border shadow spreads outwards-CSS Tutorial-php.cn

Pure CSS3 creates an animated special effect where the border shadow spreads outwards

青灯夜游

Release： 2021-08-30 09:50:39

Original

6016 people have browsed it

In the previous article "Teach you step-by-step how to use CSS3 to implement dynamic effects of button hovering and flashing", we introduced the use of CSS3 to add dynamic effects to buttons and achieve a button hovering and flashing shadow animation effect. If you are interested, you can learn about it~

Today, this article will share with you a border animation effect. Let’s see how to use CSS3 to achieve the animation effect of the border shadow spreading outward.

Let’s take a look at the renderings first:

Pure CSS3 creates an animated special effect where the border shadow spreads outwards

Let’s study how to achieve this effect:

First create the HTML part , define a div container, containing the text:

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

Copy after login

Pure CSS3 creates an animated special effect where the border shadow spreads outwards

and then start defining css styles for modification : Adjust layout style, background color, div center alignment, font color

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

Copy after login

Pure CSS3 creates an animated special effect where the border shadow spreads outwards

Right angles don’t look good, we can use border-radius to align the four corners of the border Set to rounded corners

#box {
	border-radius: 10px;
}

Copy after login

Pure CSS3 creates an animated special effect where the border shadow spreads outwards

##The following is the most critical, creating the animation effect of the shadow spreading outward:We use animation and @keyframes to achieve

First bind animation to the #box element, use the animation attribute to specify a name for the @keyframes animation, set the time it takes to complete the animation, and the speed curve of the animation.

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

Copy after login

Then use @keyframes to set the action of each frame of the animation
Here is the beginning of setting the animation (0%{} ), the border-shadow is
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);; then when the animation is completed (100%{}), the border-shadow is box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);, the shadow distance becomes larger and the color becomes transparent.

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

Copy after login

Pure CSS3 creates an animated special effect where the border shadow spreads outwards

OK, you’re done! The complete code is attached below:

<!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>

Copy after login

Finally, I will introduce to you the key attributes

animation and @keyframes:

animation Property is a shorthand property that can set multiple animation properties in a single declaration:

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

Copy after login

@keyframes Rules are used to define CSS animations A periodic behavior; needs to be used together with the animation attribute to create simple animation effects.

@keyframe rules consist of the keyword "@keyframe", followed by an identifier giving the name of the animation (which will be referenced using animation-name), followed by a set of style rules (separated by braces). The animation is then applied to the element by using the identifier as the value of the animation-name attribute. For example:

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

Copy after login

Inside the braces of the @keyframes rule, we need to define keyframes or waypoints that specify the value of the property being animated at a specific point during the animation. This allows us to control intermediate steps in the animation sequence. For example, in the above example:

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

Copy after login

The PHP Chinese website platform has a lot of video teaching resources. Everyone is welcome to learn "

css Video Tutorial"!

The above is the detailed content of Pure CSS3 creates an animated special effect where the border shadow spreads outwards. For more information, please follow other related articles on the PHP Chinese website!