搜尋

首頁  >  文章  >  web前端  >  利用CSS3創造實用的載入動畫效果（兩種）

利用CSS3創造實用的載入動畫效果（兩種）

青灯夜游
青灯夜游原創
2021-08-27 11:57:301964瀏覽

在先前的文章《利用CSS3創造酷炫的三角背景影像》中，我們介紹了使用CSS3創造酷炫的三角背景的方法。這次我們繼續CSS3效果分享，看看利用利用純CSS3如何實現加載動畫效果，感興趣的可以學習了解一下~

在進入網站時，因為需要顯示許多圖片，往往需要加載一段時間。如果這裡新增一個動態的載入效果，這樣就不會讓等待變得枯燥。例如下圖這樣：

利用CSS3創造實用的載入動畫效果（兩種）

本篇文章就來跟大家分享兩種使用CSS3實作的載入動畫效果。這兩種方法都是利用animation和@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>

  • 在上面程式碼中，先使用兩個animation屬性給每個字綁定兩種動畫flip和color，分別控制翻轉動作和顏色變化；然後分別利用@keyframes規則，給兩個動畫設定每一幀的動作即可。

  • 翻轉動作需要使用transform屬性來控制，它可以向元素應用 2D 或 3D 轉換。

效果如下：

利用CSS3創造實用的載入動畫效果（兩種）

下面的效果也是同一種實作思想，只是在細微處有點改變。

第二種效果的實作方法：

<!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創造實用的載入動畫效果（兩種）

下面介紹3個關鍵屬性animation、@keyframes與transform：

  • CSS3

    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

規則

使用@keyframes規則可以建立動畫。創建動畫是透過逐步改變從一個CSS樣式設定到另一個。簡單來說：@keyframes就是用來設定動畫每一格動作的。

    @keyframes需要和animation 屬性一起使用才能實現動畫：

  • @keyframe規則由關鍵字「@keyframe」組成，後面接著是給出動畫名稱的識別碼（將使用animation -name引用），接著是透過一組樣式規則（以大括號分隔）。然後，透過使用標識符作為animation-name屬性的值，將動畫應用於元素。例如：<pre class="brush:css;toolbar:false">/* 定义动画*/ @keyframes 动画名称{ /* 样式规则*/ } /* 将它应用于元素 */ .element { animation-name: 动画名称（在@keyframes中已经声明好的）; /* 或使用动画简写属性*/ animation: 动画名称 1s ... }</pre>

    • 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 转换元素定义透视视图。
###PHP中文網平台有非常多的影片教學資源，歡迎大家學習《## #css影片教學###」！ ###

以上是利用CSS3創造實用的載入動畫效果（兩種）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：很實用！ CSS實現在點擊按鈕時顯示按下的動態效果下一篇：很實用！ CSS實現在點擊按鈕時顯示按下的動態效果

相關文章

看更多