利用CSS3创建实用的加载动画效果（两种）

2024-02-21 23:14:34

这次我们继续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>
		<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>

在上面代码中，先使用两个animation属性给每个字绑定两种动画flip和color，分别控制翻转动作和颜色变化；然后分别利用@keyframes规则，给两个动画设置每一帧的动作即可。

翻转动作需要使用transform属性来控制，它可以向元素应用 2D 或 3D 转换。

效果如下：

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

第二种效果的实现方法：

<!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: #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 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>
		</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 转换元素定义透视视图。y

以上就是利用CSS3创建实用的加载动画效果（两种）的详细内容。（拼多多培训）

码农公寓

相关文章