如何利用CSS3創(chuàng)建實(shí)用的加載動(dòng)畫(huà)效果

這篇文章主要為大家展示了“如何利用CSS3創(chuàng)建實(shí)用的加載動(dòng)畫(huà)效果”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“如何利用CSS3創(chuàng)建實(shí)用的加載動(dòng)畫(huà)效果”這篇文章吧。

成都創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括神木網(wǎng)站建設(shè)、神木網(wǎng)站制作、神木網(wǎng)頁(yè)制作以及神木網(wǎng)絡(luò)營(yíng)銷(xiāo)策劃等。多年來(lái)，我們專(zhuān)注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，神木網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶(hù)以成都為中心已經(jīng)輻射到神木省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶(hù)的支持與信任！

在進(jìn)入網(wǎng)站時(shí)，因?yàn)樾枰@示許多圖片，往往需要加載一段時(shí)間。如果這里添加一個(gè)動(dòng)態(tài)的加載效果，這樣就不會(huì)讓等待變得枯燥。例如下圖這樣：

本篇文章就來(lái)給大家分享兩種使用CSS3實(shí)現(xiàn)的實(shí)用動(dòng)畫(huà)效果。這兩種方法都是利用animation和@keyframes來(lái)實(shí)現(xiàn)，下面我們來(lái)看看實(shí)現(xiàn)代碼：

第一種效果的實(shí)現(xiàn)方法：

<!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>
		<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>
	</body>
</html>

在上面代碼中，先使用兩個(gè)animation屬性給每個(gè)字綁定兩種動(dòng)畫(huà)flip和color，分別控制翻轉(zhuǎn)動(dòng)作和顏色變化；然后分別利用@keyframes規(guī)則，給兩個(gè)動(dòng)畫(huà)設(shè)置每一幀的動(dòng)作即可。
翻轉(zhuǎn)動(dòng)作需要使用transform屬性來(lái)控制，它可以向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換。

效果如下：

如何利用CSS3創(chuàng)建實(shí)用的加載動(dòng)畫(huà)效果

下面的效果也是同一種實(shí)現(xiàn)思想，只是在細(xì)微處有點(diǎn)改變。

第二種效果的實(shí)現(xiàn)方法：

<!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創(chuàng)建實(shí)用的加載動(dòng)畫(huà)效果

下面介紹3個(gè)關(guān)鍵屬性animation、@keyframes和transform：

CSS3 animation（動(dòng)畫(huà)）屬性

語(yǔ)法：animation: name duration timing-function delay iteration-count direction fill-mode play-state;

animation-name：指定要綁定到選擇器的關(guān)鍵幀的名稱(chēng)
animation-duration：動(dòng)畫(huà)指定需要多少秒或毫秒完成
animation-timing-function：設(shè)置動(dòng)畫(huà)將如何完成一個(gè)周期
animation-delay：設(shè)置動(dòng)畫(huà)在啟動(dòng)前的延遲間隔。
animation-iteration-count：定義動(dòng)畫(huà)的播放次數(shù)。
animation-direction：指定是否應(yīng)該輪流反向播放動(dòng)畫(huà)。
animation-fill-mode：規(guī)定當(dāng)動(dòng)畫(huà)不播放時(shí)（當(dāng)動(dòng)畫(huà)完成時(shí)，或當(dāng)動(dòng)畫(huà)有一個(gè)延遲未開(kāi)始播放時(shí)），要應(yīng)用到元素的樣式。
animation-play-state：指定動(dòng)畫(huà)是否正在運(yùn)行或已暫停。

@keyframes 規(guī)則

使用@keyframes規(guī)則可以創(chuàng)建動(dòng)畫(huà)。創(chuàng)建動(dòng)畫(huà)是通過(guò)逐步改變從一個(gè)CSS樣式設(shè)定到另一個(gè)。簡(jiǎn)單來(lái)說(shuō)：@keyframes就是用來(lái)設(shè)置動(dòng)畫(huà)每一幀動(dòng)作的。

@keyframes需要和animation 屬性一起使用才能實(shí)現(xiàn)動(dòng)畫(huà)：

@keyframe規(guī)則由關(guān)鍵字“@keyframe”組成，后面接著是給出動(dòng)畫(huà)名稱(chēng)的標(biāo)識(shí)符（將使用animation-name引用），隨后是通過(guò)一組樣式規(guī)則（用大括號(hào)分隔）。然后，通過(guò)使用標(biāo)識(shí)符作為animation-name屬性的值，將動(dòng)畫(huà)應(yīng)用于元素。例如：

/* 定義動(dòng)畫(huà)*/
@keyframes 動(dòng)畫(huà)名稱(chēng){
    /* 樣式規(guī)則*/
}

/* 將它應(yīng)用于元素 */
.element {
    animation-name: 動(dòng)畫(huà)名稱(chēng)（在@keyframes中已經(jīng)聲明好的）;

    /* 或使用動(dòng)畫(huà)簡(jiǎn)寫(xiě)屬性*/
    animation: 動(dòng)畫(huà)名稱(chēng) 1s ...
}

CSS3 transform 屬性

transform 屬性向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換。該屬性允許我們對(duì)元素進(jìn)行旋轉(zhuǎn)、縮放、移動(dòng)或傾斜。

語(yǔ)法：transform: none|transform-functions;

none	定義不進(jìn)行轉(zhuǎn)換。
matrix(n,n,n,n,n,n)	定義 2D 轉(zhuǎn)換，使用六個(gè)值的矩陣。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定義 3D 轉(zhuǎn)換，使用 16 個(gè)值的 4x4 矩陣。	
translate(x,y)	定義 2D 轉(zhuǎn)換。
translate3d(x,y,z)	定義 3D 轉(zhuǎn)換。	
translateX(x)	定義轉(zhuǎn)換，只是用 X 軸的值。
translateY(y)	定義轉(zhuǎn)換，只是用 Y 軸的值。
translateZ(z)	定義 3D 轉(zhuǎn)換，只是用 Z 軸的值。	
scale(x,y)	定義 2D 縮放轉(zhuǎn)換。
scale3d(x,y,z)	定義 3D 縮放轉(zhuǎn)換。	
scaleX(x)	通過(guò)設(shè)置 X 軸的值來(lái)定義縮放轉(zhuǎn)換。
scaleY(y)	通過(guò)設(shè)置 Y 軸的值來(lái)定義縮放轉(zhuǎn)換。
scaleZ(z)	通過(guò)設(shè)置 Z 軸的值來(lái)定義 3D 縮放轉(zhuǎn)換。	
rotate(angle)	定義 2D 旋轉(zhuǎn)，在參數(shù)中規(guī)定角度。
rotate3d(x,y,z,angle)	定義 3D 旋轉(zhuǎn)。	
rotateX(angle)	定義沿著 X 軸的 3D 旋轉(zhuǎn)。
rotateY(angle)	定義沿著 Y 軸的 3D 旋轉(zhuǎn)。
rotateZ(angle)	定義沿著 Z 軸的 3D 旋轉(zhuǎn)。
skew(x-angle,y-angle)	定義沿著 X 和 Y 軸的 2D 傾斜轉(zhuǎn)換。
skewX(angle)	定義沿著 X 軸的 2D 傾斜轉(zhuǎn)換。
skewY(angle)	定義沿著 Y 軸的 2D 傾斜轉(zhuǎn)換。
perspective(n)	為 3D 轉(zhuǎn)換元素定義透視視圖。

以上是“如何利用CSS3創(chuàng)建實(shí)用的加載動(dòng)畫(huà)效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站名稱(chēng)：如何利用CSS3創(chuàng)建實(shí)用的加載動(dòng)畫(huà)效果
URL標(biāo)題：http://bm7419.com/article8/pcgoop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、虛擬主機(jī)、網(wǎng)站維護(hù)、小程序開(kāi)發(fā)、用戶(hù)體驗(yàn)、微信公眾號(hào)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容