利用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: @R_360_934@;
    				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 转换。

效果如下：

下面的效果也是同一种实现思想，只是在细微处有点改变。

第二种效果的实现方法：

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

效果如下：

下面介绍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规则可以创建动画。创建动画是通过逐步改变从一个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 转换元素定义透视视图。

PHP中文网平台有非常多的视频教学资源，欢迎大家学习《css视频教程》！

以上就是利用CSS3创建实用的加载动画效果（两种）的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！