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

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

青灯夜游

풀어 주다： 2021-08-30 09:50:39

원래의

5993명이 탐색했습니다.

이전 기사 "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 중국어 웹사이트의 기타 관련 기사를 참조하세요!