집 > 기사 > 웹 프론트엔드 > CSS3를 사용하여 실용적인 로딩 애니메이션 효과 만들기(2가지 유형)

CSS3를 사용하여 실용적인 로딩 애니메이션 효과 만들기(2가지 유형)

青灯夜游원래의: 2021-08-27 11:57:301942검색

이전 글 "CSS3를 사용하여 멋진 삼각형 배경 이미지 만들기"에서는 CSS3를 사용하여 멋진 삼각형 배경을 만드는 방법을 소개했습니다. 이번에는 CSS3 효과를 계속 공유하고 순수 CSS3를 사용하여 애니메이션 효과를 로딩하는 방법에 대해 알아보겠습니다~

웹사이트에 들어갈 때 많은 사진을 표시해야 하기 때문에 시간이 오래 걸리는 경우가 많습니다. 짐. 여기에 동적 로딩 효과를 추가하면 기다림이 지루해지지 않습니다. 예를 들어 아래 그림은 다음과 같습니다.

이 기사에서는 CSS3를 사용하여 얻은 두 가지 로딩 애니메이션 효과를 공유합니다. 두 가지 방법 모두 애니메이션과 @keyframes를 사용하여 구현됩니다. 구현 코드를 살펴보겠습니다.

첫 번째 효과를 얻는 방법:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			html,
			body {
				padding: 0;
				height: 100%;
				display: table;
				margin: 0 auto;
				font-size: 52px;
				font-family: Monaco, Consolas, "Lucida Console", monospace;
				background-image: url("http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/kindajean.png");
			}

			.loading {
				text-align: center;
				display: table-cell;
				vertical-align: middle;
				text-shadow: grey 1px 1px 1px;
			}

			.letter {
				float: left;
				width: 35px;
				height: 60px;
				position: relative;
				-webkit-animation: flip 2s infinite;
				-webkit-transform-style: preserve-3d;
				-webkit-transition: -webkit-transform 1s;
			}

			.letter div {
				width: 100%;
				height: 100%;
				position: absolute;
				-webkit-transform: translate(0);
				-webkit-backface-visibility: hidden;
				-webkit-animation: color 8s infinite;
			}

			.letter div.back {
				-webkit-transform: rotateY(180deg);
			}

			.letter:nth-child(1),
			.letter:nth-child(1) div {
				-webkit-animation-delay: 0.125s;
			}

			.letter:nth-child(2),
			.letter:nth-child(2) div {
				-webkit-animation-delay: 0.25s;
			}

			.letter:nth-child(3),
			.letter:nth-child(3) div {
				-webkit-animation-delay: 0.375s;
			}

			.letter:nth-child(4),
			.letter:nth-child(4) div {
				-webkit-animation-delay: 0.5s;
			}

			.letter:nth-child(5),
			.letter:nth-child(5) div {
				-webkit-animation-delay: 0.625s;
			}

			.letter:nth-child(6),
			.letter:nth-child(6) div {
				-webkit-animation-delay: 0.75s;
			}

			.letter:nth-child(7),
			.letter:nth-child(7) div {
				-webkit-animation-delay: 0.875s;
			}

			.letter:nth-child(8),
			.letter:nth-child(8) div {
				-webkit-animation-delay: 1s;
			}

			.letter:nth-child(9),
			.letter:nth-child(9) div {
				-webkit-animation-delay: 1.125s;
			}

			.letter:nth-child(10),
			.letter:nth-child(10) div {
				-webkit-animation-delay: 1.25s;
			}

			@-webkit-keyframes flip {
				0% {
					-webkit-transform: rotateY(0deg) translate(0);
				}

				40%,
				100% {
					-webkit-transform: rotateY(180deg) translate(0);
				}
			}

			@-webkit-keyframes color {
				0% {
					color: #88E488;
				}

				25% {
					color: #EEADB7;
				}

				50% {
					color: #90C9DB;
				}

				75% {
					color: #F3B034;
				}

				100% {
					color: #828282;
				}
			}
		</style>
	</head>
		<body>
			<div class="loading">
				<div class="letter">
					<div>L</div>
					<div class="back">L</div>
				</div>
				<div class="letter">
					<div>o</div>
					<div class="back">o</div>
				</div>
				<div class="letter">
					<div>a</div>
					<div class="back">a</div>
				</div>
				<div class="letter">
					<div>d</div>
					<div class="back">d</div>
				</div>
				<div class="letter">
					<div>i</div>
					<div class="back">i</div>
				</div>
				<div class="letter">
					<div>n</div>
					<div class="back">n</div>
				</div>
				<div class="letter">
					<div>g</div>
					<div class="back">g</div>
				</div>
				<div class="letter dot">
					<div>.</div>
					<div class="back">.</div>
				</div>
				<div class="letter dot">
					<div>.</div>
					<div class="back">.</div>
				</div>
				<div class="letter dot">
					<div>.</div>
					<div class="back">.</div>
				</div>
			</div>
		</body>
</html>

위 코드에서는 먼저 두 개의 애니메이션을 사용합니다. 속성은 두 개의 애니메이션을 바인딩합니다. , 뒤집기 및 색상을 각 단어에 적용하여 뒤집기 동작과 색상 변경을 각각 제어한 다음 @keyframes 규칙을 사용하여 두 애니메이션의 각 프레임 동작을 설정합니다.
플립 동작은 요소에 2D 또는 3D 변환을 적용할 수 있는 변환 속성을 사용하여 제어해야 합니다.

효과는 다음과 같습니다.

CSS3를 사용하여 실용적인 로딩 애니메이션 효과 만들기(2가지 유형)

다음 효과도 동일한 구현 아이디어이며 미묘하게 약간만 변경되었습니다.

두 번째 효과를 얻는 방법:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			html,
			body {
				padding: 0;
				height: 100%;
				display: table;
				margin: 0 auto;
				font-size: 52px;
				font-family: Monaco, Consolas, "Lucida Console", monospace;
				background: #F5F5F5;
			}

			.loading {
				top: 50%;
				left: 50%;
				width: 350px;
				height: 60px;
				font-size: 52px;
				position: absolute;
				text-align: center;
				margin-top: -30px;
				margin-left: -175px;
				text-shadow: #808080 1px 1px 1px;
				font-family: Monaco, Consolas, "Lucida Console", monospace;
			}

			.letter {
				float: left;
				width: 35px;
				height: 60px;
				position: relative;
				animation: flip 2s infinite;
				transform-style: preserve-3d;
				transition: transform 1s;
			}

			.letter div {
				color: #4B6;
				width: 100%;
				height: 100%;
				position: absolute;
				transform: translate(0);
				backface-visibility: hidden;
				animation: color 16s infinite;
			}

			.letter div.back {
				transform: rotateY(180deg);
			}

			.letter:nth-child(1),
			.letter:nth-child(1) div {
				animation-delay: 0.125s;
			}

			.letter:nth-child(2),
			.letter:nth-child(2) div {
				animation-delay: 0.25s;
			}

			.letter:nth-child(3),
			.letter:nth-child(3) div {
				animation-delay: 0.375s;
			}

			.letter:nth-child(4),
			.letter:nth-child(4) div {
				animation-delay: 0.5s;
			}

			.letter:nth-child(5),
			.letter:nth-child(5) div {
				animation-delay: 0.625s;
			}

			.letter:nth-child(6),
			.letter:nth-child(6) div {
				animation-delay: 0.75s;
			}

			.letter:nth-child(7),
			.letter:nth-child(7) div {
				animation-delay: 0.875s;
			}

			.letter:nth-child(8),
			.letter:nth-child(8) div {
				animation-delay: 1s;
			}

			.letter:nth-child(9),
			.letter:nth-child(9) div {
				animation-delay: 1.125s;
			}

			.letter:nth-child(10),
			.letter:nth-child(10) div {
				animation-delay: 1.25s;
			}

			@keyframes flip {
				0% {
					transform: rotateY(0deg) translate(0);
				}

				40%,
				100% {
					transform: rotateY(180deg) translate(0);
				}
			}

			@keyframes color {
				1.5% {
					color: #6AD;
				}

				3%,
				12.5% {
					color: #F80;
				}

				14% {
					color: #4B6;
				}

				15.5%,
				25% {
					color: #F68;
				}

				26.5% {
					color: #C83;
				}

				28%,
				37.5% {
					color: #96C;
				}

				39% {
					color: #C83;
				}

				40.5%,
				50% {
					color: #E44;
				}

				51.5% {
					color: #F80;
				}

				53%,
				62.5% {
					color: #4B6;
				}

				64% {
					color: #F68;
				}

				65.5%,
				75% {
					color: #C83;
				}

				76.5% {
					color: #96C;
				}

				78%,
				87.5% {
					color: #6AD;
				}

				89% {
					color: #F80;
				}

				90.5%,
				100%,
				0% {
					color: #4B6;
				}
			}
		</style>
	</head>
	<body>
		<div class="loader">
			<div class="loading">
				<div class="letter">
					<div>L</div>
					<div class="back">L</div>
				</div>
				<div class="letter">
					<div>o</div>
					<div class="back">o</div>
				</div>
				<div class="letter">
					<div>a</div>
					<div class="back">a</div>
				</div>
				<div class="letter">
					<div>d</div>
					<div class="back">d</div>
				</div>
				<div class="letter">
					<div>i</div>
					<div class="back">i</div>
				</div>
				<div class="letter">
					<div>n</div>
					<div class="back">n</div>
				</div>
				<div class="letter">
					<div>g</div>
					<div class="back">g</div>
				</div>
				<div class="letter">
					<div>.</div>
					<div class="back">.</div>
				</div>
				<div class="letter">
					<div>.</div>
					<div class="back">.</div>
				</div>
				<div class="letter">
					<div>.</div>
					<div class="back">.</div>
				</div>
			</div>
		</div>
	</body>
</html>

효과는 다음과 같습니다.

CSS3를 사용하여 실용적인 로딩 애니메이션 효과 만들기(2가지 유형)

다음은 애니메이션 @keyframes 및 변환의 세 가지 핵심 속성을 소개합니다.

CSS3 animation code> ( 애니메이션) 속성 <code>animation（动画）属性

语法：animation: name duration timing-function delay iteration-count direction fill-mode play-state;

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

@keyframes 规则

使用@keyframes规则可以创建动画。创建动画是通过逐步改变从一个CSS样式设定到另一个。简单来说：@keyframes就是用来设置动画每一帧动作的。

@keyframes需要和animation 属性一起使用才能实现动画：

@keyframe规则由关键字“@keyframe”组成，后面接着是给出动画名称的标识符（将使用animation-name引用），随后是通过一组样式规则（用大括号分隔）。然后，通过使用标识符作为animation-name属性的值，将动画应用于元素。例如：

/* 定义动画*/
@keyframes 动画名称{
    /* 样式规则*/
}

/* 将它应用于元素 */
.element {
    animation-name: 动画名称（在@keyframes中已经声明好的）;

    /* 或使用动画简写属性*/
    animation: 动画名称 1s ...
}

CSS3 transform 属性

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

语法：transform: none|transform-functions;

구문: 애니메이션: 이름 기간 타이밍-함수 지연 반복 횟수 방향 채우기 모드 재생 상태;

none	定义不进行转换。
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。	
translate(x,y)	定义 2D 转换。
translate3d(x,y,z)	定义 3D 转换。	
translateX(x)	定义转换，只是用 X 轴的值。
translateY(y)	定义转换，只是用 Y 轴的值。
translateZ(z)	定义 3D 转换，只是用 Z 轴的值。	
scale(x,y)	定义 2D 缩放转换。
scale3d(x,y,z)	定义 3D 缩放转换。	
scaleX(x)	通过设置 X 轴的值来定义缩放转换。
scaleY(y)	通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放转换。	
rotate(angle)	定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle)	定义 3D 旋转。	
rotateX(angle)	定义沿着 X 轴的 3D 旋转。
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)	定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)	定义沿着 Y 轴的 2D 倾斜转换。
perspective(n)	为 3D 转换元素定义透视视图。

🎜@keyframes code> 규칙 🎜🎜🎜🎜 @keyframes 규칙을 사용하여 애니메이션을 만듭니다. 애니메이션은 하나의 CSS 스타일 설정에서 다른 CSS 스타일 설정으로 점진적으로 변경하여 생성됩니다. 간단히 말해서 @keyframes는 애니메이션의 각 프레임 동작을 설정하는 데 사용됩니다. 🎜🎜@keyframes는 애니메이션을 구현하기 위해 애니메이션 속성과 함께 사용해야 합니다. 🎜🎜@keyframe 규칙은 키워드 "@keyframe"과 애니메이션 이름을 제공하는 식별자로 구성됩니다(animation-를 사용하여 참조됨). 이름), 그 뒤에 스타일 규칙 세트(중괄호로 구분)가 옵니다. 그런 다음 식별자를 animation-name 속성의 값으로 사용하여 애니메이션이 요소에 적용됩니다. 예: 🎜rrreee🎜🎜🎜CSS3 transform 속성 🎜🎜🎜🎜 변환 속성은 요소에 2D 또는 3D 변환을 적용합니다. 이 속성을 사용하면 요소를 회전, 크기 조정, 이동 또는 기울일 수 있습니다. 🎜🎜문법: transform: none|transform-functions;🎜🎜rrreee🎜PHP 중국어 웹사이트 플랫폼에는 많은 비디오 교육 리소스가 있습니다. 모두가 "🎜css 비디오 튜토리얼🎜"을 배우는 것을 환영합니다! 🎜

위 내용은 CSS3를 사용하여 실용적인 로딩 애니메이션 효과 만들기(2가지 유형)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：매우 실용적입니다! CSS는 버튼을 클릭할 때 누르는 동적 효과를 구현합니다.다음 기사：매우 실용적입니다! CSS는 버튼을 클릭할 때 누르는 동적 효과를 구현합니다.