• 技术文章 >web前端 >css教程

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

    青灯夜游青灯夜游2021-08-30 10:20:24原创191
    在之前的文章《利用CSS3创建炫酷的三角背景图像》中,我们介绍了使用CSS3创建炫酷的三角背景的方法。这次我们继续CSS3效果分享,看看利用利用纯CSS3如何实现加载动画效果,感兴趣的可以学习了解一下~

    在进入网站时,因为需要显示许多图片,往往需要加载一段时间。如果这里添加一个动态的加载效果,这样就不会让等待变得枯燥。例如下图这样:

    1.gif

    本篇文章就来给大家分享两种使用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>

    效果如下:

    1.gif

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

    第二种效果的实现方法:

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

    效果如下:

    2.gif

    下面介绍3个关键属性animation、@keyframes和transform:

    语法: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规则可以创建动画。创建动画是通过逐步改变从一个CSS样式设定到另一个。简单来说:@keyframes就是用来设置动画每一帧动作的。

    @keyframes需要和animation 属性一起使用才能实现动画:

    @keyframe规则由关键字“@keyframe”组成,后面接着是给出动画名称的标识符(将使用animation-name引用),随后是通过一组样式规则(用大括号分隔)。然后,通过使用标识符作为animation-name属性的值,将动画应用于元素。例如:

    /* 定义动画*/
    @keyframes 动画名称{
        /* 样式规则*/
    }
    
    /* 将它应用于元素 */
    .element {
        animation-name: 动画名称(在@keyframes中已经声明好的);
    
        /* 或使用动画简写属性*/
        animation: 动画名称 1s ...
    }

    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中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:CSS3 加载动画
    上一篇:很实用!CSS实现在单击按钮时显示按下的动态效果 下一篇:教你用CSS绘制一个带有渐变边框的圆!
    线上培训班

    相关文章推荐

    • 手把手教你怎么使用css3给文字添加动画效果(附代码)• CSS3怎么给背景图片添加动态变色效果• 手把手教你使用CSS3实现按钮悬停闪烁动态特效• 纯CSS3怎么给文本添加背景图

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网