집 >웹 프론트엔드 >CSS 튜토리얼 >Pure CSS3는 테두리 그림자가 바깥쪽으로 퍼지는 애니메이션 특수 효과를 만듭니다.

Pure CSS3는 테두리 그림자가 바깥쪽으로 퍼지는 애니메이션 특수 효과를 만듭니다.

青灯夜游원래의: 2021-08-25 17:53:056080검색

이전 기사 "CSS3을 사용하여 버튼 호버링 및 깜박임의 동적 효과를 구현하는 방법을 단계별로 설명합니다"에서는 CSS3를 사용하여 버튼에 동적 효과를 추가하고 버튼 호버링 및 깜박이는 그림자 애니메이션을 구현하는 방법을 소개했습니다. 효과에 대해 알아볼 수 있습니다~

오늘은 테두리 애니메이션 효과를 CSS3를 사용하여 바깥쪽으로 퍼지는 테두리 그림자 효과를 구현하는 방법을 살펴보겠습니다.

먼저 렌더링을 살펴보겠습니다.

Pure CSS3는 테두리 그림자가 바깥쪽으로 퍼지는 애니메이션 특수 효과를 만듭니다.

이 효과를 얻는 방법을 연구해 보겠습니다.

먼저 HTML 부분을 만들고 텍스트를 포함할 div 컨테이너를 정의합니다. 텍스트: div容器，包含文本文字：

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

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

Pure CSS3는 테두리 그림자가 바깥쪽으로 퍼지는 애니메이션 특수 효과를 만듭니다.

直角不好看，我们可以使用border-radius来将边框的四个角设置为圆角

#box {
	border-radius: 10px;
}

Pure 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%{}）时，边框阴影为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);
	}
}

Pure CSS3는 테두리 그림자가 바깥쪽으로 퍼지는 애니메이션 특수 효과를 만듭니다.

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

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

Pure CSS3는 테두리 그림자가 바깥쪽으로 퍼지는 애니메이션 특수 효과를 만듭니다.

그런 다음 수정을 위한 CSS 스타일 정의를 시작하세요

: 레이아웃 스타일, 배경색, div 중앙 정렬, 글꼴 색상 조정

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

직각은 보기에 좋지 않습니다. border-radius를 사용하여 테두리의 네 모서리를 둥근 모서리로 설정할 수 있습니다rrreee

🎜🎜🎜The 다음은 가장 중요한 것은 바깥쪽으로 퍼지는 그림자의 애니메이션 효과를 만드는 것입니다: 🎜우리는 그것을 달성하기 위해 애니메이션과 @keyframes를 사용합니다🎜

🎜첫 번째 바인딩 animation to #box 요소에서 animation 속성을 사용하여 @keyframes 애니메이션의 이름을 지정하고 애니메이션을 완료하는 데 걸리는 시간과 애니메이션의 속도 곡선을 설정합니다. 🎜🎜🎜rrreee
- 🎜그런 다음 @keyframes를 사용하여 애니메이션의 각 프레임의 동작을 설정합니다🎜🎜여기서 애니메이션 설정의 시작 부분이 나와 있습니다(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);이며, 그림자 거리가 길어지고 색상이 투명해집니다.
  🎜🎜🎜rrreee🎜🎜🎜좋아, 끝났습니다! 전체 코드는 아래에 첨부되어 있습니다. 🎜rrreee🎜마지막으로 animation 및 @keyframes의 핵심 속성을 소개하겠습니다. 🎜
  - 🎜animation 속성은 하나의 명령문에서 여러 애니메이션 속성을 설정할 수 있는 단축 속성입니다: 🎜🎜🎜rrreee
    - 🎜@ 키프레임 규칙은 CSS 애니메이션 기간의 동작을 정의하는 데 사용됩니다. 간단한 애니메이션 효과를 만들려면 animation 속성과 함께 사용해야 합니다. 🎜🎜🎜🎜 @keyframe 규칙은 "@keyframe" 키워드, 그 뒤에 애니메이션 이름을 제공하는 식별자(animation-name을 사용하여 참조됨), 스타일 규칙 세트(중괄호로 구분됨)로 구성됩니다. ). 그런 다음 식별자를 animation-name 속성의 값으로 사용하여 애니메이션이 요소에 적용됩니다. 예: 🎜rrreee🎜 @keyframes 규칙의 중괄호 내에서 애니메이션 중 특정 지점에서 애니메이션되는 속성 값을 지정하는 키프레임 또는 웨이포인트를 정의해야 합니다. 이를 통해 애니메이션 시퀀스의 중간 단계를 제어할 수 있습니다. 예를 들어, 위의 예에서는 🎜rrreee🎜PHP 중국어 웹사이트 플랫폼에는 많은 비디오 교육 리소스가 있습니다. 누구나 "🎜css Video Tutorial🎜"을 배울 수 있습니다! 🎜

위 내용은 Pure CSS3는 테두리 그림자가 바깥쪽으로 퍼지는 애니메이션 특수 효과를 만듭니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：CSS를 사용하여 3점 로딩 애니메이션을 빠르게 만드는 방법다음 기사：CSS를 사용하여 3점 로딩 애니메이션을 빠르게 만드는 방법