Gunakan CSS3 untuk mencipta kesan animasi pemuatan praktikal (dua jenis)-tutorial css-php.cn

Dalam artikel sebelumnya "Gunakan CSS3 untuk mencipta imej latar belakang segitiga yang sejuk", kami memperkenalkan cara menggunakan CSS3 untuk mencipta latar belakang segitiga yang sejuk. Kali ini kami terus berkongsi kesan CSS3 dan melihat cara menggunakan CSS3 tulen untuk mencapai kesan animasi pemuatan Jika anda berminat, anda boleh mempelajarinya~

Apabila memasuki laman web, kerana banyak gambar perlu dipaparkan. , ia selalunya mengambil sedikit masa untuk dimuatkan. Jika anda menambah kesan pemuatan dinamik di sini, ia tidak akan membosankan menunggu. Contohnya, gambar di bawah kelihatan seperti ini:

Gunakan CSS3 untuk mencipta kesan animasi pemuatan praktikal (dua jenis)

Artikel ini akan berkongsi dengan anda dua pemuatan kesan animasi yang dicapai menggunakan CSS3. Kedua-dua kaedah dilaksanakan menggunakan animasi dan @keyframes Mari kita lihat kod pelaksanaan:

Kaedah pelaksanaan kesan pertama:

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

Salin selepas log masuk

Dalam kod di atas, mula-mula gunakan dua atribut animasi untuk mengikat dua animasi, flip dan warna, pada setiap perkataan untuk mengawal tindakan membalik dan perubahan warna masing-masing kemudian gunakan peraturan @keyframes untuk memberikan Hanya tetapkan tindakan untuk setiap bingkai kedua-dua animasi.
Tindakan flip perlu dikawal menggunakan atribut transformasi, yang boleh menggunakan transformasi 2D atau 3D pada elemen.

Kesannya adalah seperti berikut:

Gunakan CSS3 untuk mencipta kesan animasi pemuatan praktikal (dua jenis)

Kesan berikut juga merupakan idea pelaksanaan yang sama, dengan hanya sedikit perubahan dalam kehalusan .

Cara mencapai kesan kedua:

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

Salin selepas log masuk

Kesannya adalah seperti berikut:

Gunakan CSS3 untuk mencipta kesan animasi pemuatan praktikal (dua jenis)

The 3 berikut diperkenalkan Animasi atribut utama, @keyframes dan transform:

CSS3 animation (animasi) Atribut

Sintaks: 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：指定动画是否正在运行或已暂停。

Salin selepas log masuk

@keyframes Peraturan

Animasi boleh dibuat menggunakan peraturan @keyframes. Animasi dicipta dengan menukar secara beransur-ansur dari satu tetapan gaya CSS kepada yang lain. Ringkasnya: @keyframes digunakan untuk menetapkan tindakan setiap bingkai animasi.

@keyframes perlu digunakan bersama-sama dengan atribut animasi untuk mencapai animasi:

Peraturan @keyframe terdiri daripada kata kunci "@keyframe", diikuti dengan pengecam yang memberikan nama animasi (animasi akan digunakan -nama), diikuti dengan satu set peraturan gaya (dibataskan oleh pendakap kerinting). Animasi kemudian digunakan pada elemen dengan menggunakan pengecam sebagai nilai atribut nama-animasi. Contohnya:

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

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

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

Salin selepas log masuk

CSS3 transform Sifat

Sifat transformasi menggunakan transformasi 2D atau 3D pada elemen. Sifat ini membolehkan kita memutar, menskala, mengalih atau mencondongkan elemen.

Tatabahasa: 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 转换元素定义透视视图。

Salin selepas log masuk

Platform tapak web Cina PHP mempunyai banyak sumber pengajaran video Semua orang dialu-alukan untuk mempelajari "tutorial video css"!

Atas ialah kandungan terperinci Gunakan CSS3 untuk mencipta kesan animasi pemuatan praktikal (dua jenis). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!