广告：宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买
在之前的文章《利用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 转换。
效果如下：
下面的效果也是同一种实现思想，只是在细微处有点改变。
第二种效果的实现方法：
<!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创建实用的加载动画效果（两种）的详细内容，更多请关注9543建站博客其它相关文章！
发表评论