站长资讯网
最全最丰富的资讯网站

利用CSS3创建实用的加载动画效果(两种)

在之前的文章《利用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规则可以创建动画。创建动画是通过逐步改变从一个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视频教程》!

赞(0)
分享到: 更多 (0)
网站地图   沪ICP备18035694号-2    沪公网安备31011702889846号