1. 背景介绍
在网页设计中，loading加载特效是非常常见的一种设计方式，它可以为用户提供一种视觉上的提示，来告知用户正在处理中。在这篇文章中，我将向大家介绍8种不同的CSS实现loading加载特效的小技巧。
2. CSS实现loading的优势
CSS实现loading的优势在于，它可以通过动画来达到视觉上的提示，相比于使用图片等其他方式实现loading，CSS实现能够减少HTTP请求，提升网页的性能。
3. 8种 CSS 实现loading 加载特效的小技巧
3.1 简单的加载动画
这种加载动画基于CSS3的@keyframes属性，使其产生无限循环的动画效果。这是一个非常基础的loading特效，但是非常有效。
.loader {
border: 16px solid #f3f3f3;
border-top: 16px solid #3498db;
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
border-radius属性可以让边框形状变为圆形，而@keyframes属性可以使其无限循环旋转。
3.2 带有文字的加载动画
这种loading特效同样使用了CSS3的@keyframes属性，使其产生无限循环的动画效果。不过它有一个额外的功能，它会在loading动画旁边显示一段文字。
.lds-ring {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
}
.lds-ring div {
box-sizing: border-box;
display: block;
position: absolute;
width: 64px;
height: 64px;
margin: 8px;
border: 8px solid #3498db;
border-radius: 50%;
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: #3498db transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
animation-delay: -0.15s;
}
@keyframes lds-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loading-text {
margin-left: 8px;
font-size: 24px;
color: #3498db;
display: inline-block;
}
box-sizing属性可以确定元素的盒模型，animation-delay属性可以延迟动画的开始时间，使得每个圈圈的动画效果错开。
3.3 侧边栏加载动画
这种加载动画在侧边栏上贴着，loading动画会在侧边栏内部旋转
.sidebar-wrapper {
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 200px;
background-color: #fff;
border-right: 2px solid #ddd;
}
.sidebar-overlay {
position: fixed;
top: 0;
bottom: 0;
left: 200px;
right: 0;
background-color: rgba(0, 0, 0, 0.3);
z-index: 9998;
}
.sidebar-content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: -200px;
overflow-y: auto;
transition: all .3s ease-in-out;
}
.loading {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
animation: spin .8s linear infinite;
}
.loading::before {
content: '';
width: 5px;
height: 5px;
border-radius: 50%;
background-color: #d10a00;
position: absolute;
top: 12.5px;
left: -25px;
animation: pulse .8s ease infinite alternate;
}
.loading::after {
content: '';
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #d10a00;
position: absolute;
top: -10px;
left: -10px;
animation: pulse .8s ease infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
@keyframes pulse {
0% {
opacity: .5;
}
100% {
opacity: 1;
}
}
这种loading动画需要创建一个侧边栏，使用绝对定位将其移出视图。在侧边栏内部放入loading元素，其中心点位置要放置在侧边栏外侧的25px处，这样就可以使其在边框旋转。
3.4 加载时的模糊背景
这种loading特效可以让loading元素在页面中心旋转，同时背景模糊。
@keyframes ldio-3k3up3jvrbl-r {
0% {
transform: translate(23.6741px, 23.6741px) scale(0);
}
100% {
transform: translate(0, 0) scale(1);
}
}
.loader {
position: absolute;
border: 4px solid rgba(255,255,255,7);
width: 90px;
height: 90px;
animation-name: ldio-3k3up3jvrbl-r;
animation-duration: 1.2s;
animation-timing-function: cubic-bezier(0,0,.2,1);
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.ldio-3k3up3jvrbl-r div {
transform-origin: 45px 45px;
}
.ldio-3k3up3jvrbl-r div:nth-child(1) {
animation: ldio-3k3up3jvrbl-r .6s linear -1.2s infinite;
transform: rotate(0deg);
width: 40px;
height: 40px;
left: 25px;
top: 25px;
position: absolute;
border-radius: 100px 0 0 0;
background: #fff;
}
.ldio-3k3up3jvrbl-r div:nth-child(2) {
animation: ldio-3k3up3jvrbl-r .6s linear -.9s infinite;
transform: rotate(45deg);
width: 40px;
height: 40px;
left: 0px;
top: 25px;
position: absolute;
border-radius: 0 100px 0 0;
background: #fff;
}
.ldio-3k3up3jvrbl-r div:nth-child(3) {
animation: ldio-3k3up3jvrbl-r .6s linear -.6s infinite;
transform: rotate(90deg);
width: 40px;
height: 40px;
left: 0px;
top: 0px;
position: absolute;
border-radius: 0 0 0 100px;
background: #fff;
}
.ldio-3k3up3jvrbl-r div:nth-child(4) {
animation: ldio-3k3up3jvrbl-r .6s linear -.3s infinite;
transform: rotate(135deg);
width: 40px;
height: 40px;
left: 25px;
top: 0px;
position: absolute;
border-radius: 0 0 100px 0;
background: #fff;
}
.ldio-3k3up3jvrbl-r div:nth-child(5) {
animation: ldio-3k3up3jvrbl-r .6s linear 0s infinite;
transform: rotate(180deg);
width: 40px;
height: 40px;
left: 50px;
top: 0px;
position: absolute;
border-radius: 0 0 0 100px;
background: #fff;
}
.ldio-3k3up3jvrbl-r div:nth-child(6) {
animation: ldio-3k3up3jvrbl-r .6s linear .3s infinite;
transform: rotate(225deg);
width: 40px;
height: 40px;
left: 75px;
top: 0px;
position: absolute;
border-radius: 0 100px 0 0;
background: #fff;
}
.ldio-3k3up3jvrbl-r div:nth-child(7) {
animation: ldio-3k3up3jvrbl-r .6s linear .6s infinite;
transform: rotate(270deg);
width: 40px;
height: 40px;
left: 75px;
top: 25px;
position: absolute;
border-radius: 0 0 100px 0;
background: #fff;
}
.ldio-3k3up3jvrbl-r div:nth-child(8) {
animation: ldio-3k3up3jvrbl-r .6s linear .9s infinite;
transform: rotate(315deg);
width: 40px;
height: 40px;
left: 50px;
top: 25px;
position: absolute;
border-radius: 100px 0 0 0;
background: #fff;
}
.blur-wrapper {
filter: blur(2px);
height: 100vh;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
在这个例子中，关键在于filter: blur(2px);这一行，它会给背景添加一个2像素的模糊。同时，加载元素的旋转效果的实现方式与其他例子相同。
3.5 多边形加载动画
这种loading动画使用的是pure CSS，通过多边形的变换和移动，产生优美的加载动画效果。
.spinner {
margin: 100px auto;
width: 40px;
height: 40px;
position: relative;
text-align: center;
-webkit-animation: sk-rotate 2s infinite linear;
}
.shape {
width: 20px;
height: 20px;
border-radius: 20px 0 0 0;
position: absolute;
top: 0;
left: 0;
-webkit-animation: sk-scaleout 1.5s infinite ease-in-out;
}
.shape:nth-child(1) {
background-color: #333;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
.shape:nth-child(2) {
background-color: #333;
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
}
.shape:nth-child(3) {
background-color: #333;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.shape:nth-child(4) {
background-color: #333;
-webkit-transform: rotate(120deg);
transform: rotate(120deg);
}
.shape:nth-child(5) {
background-color: #333;
-webkit-transform: rotate(150deg);
transform: rotate(150deg);
}
.shape:nth-child(6) {
background-color: #333;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.shape:nth-child(7) {
background-color: #333;
-webkit-transform: rotate(210deg);
transform: rotate(210deg);
}
.shape:nth-child(8) {
background-color: #333;
-webkit-transform: rotate(240deg);
transform: rotate(240deg);
}
.shape:nth-child(9) {
background-color: #333;
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
.shape:nth-child(10) {
background-color: #333;
-webkit-transform: rotate(300deg);
transform: rotate(300deg);
}
.shape:nth-child(11) {
background-color: #333;
-webkit-transform: rotate(330deg);
transform: rotate(330deg);
}
.shape:nth-child(2n) {
-webkit-animation: sk-scaleout 1.5s infinite ease-in-out;
animation: sk-scaleout 1.5s infinite ease-in-out;
}
@-webkit-keyframes sk-rotate {
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes sk-rotate {
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-webkit-keyframes sk-scaleout {
0% { -webkit-transform: scale(0) }
100% {
-webkit-transform: scale(1.0);
opacity: 0;
}
}
@keyframes sk-scaleout {
0% {
-webkit-transform: scale(0);
transform: scale(0);
} 100% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
opacity: 0;
}
}
transform: rotate(deg);可以将元素绕自身中心旋转，而-webkit-animation可以指定动画效果，其中@-webkit-keyframes会在动画效果中连续产生形状变化。
3.6 颜色变换加载动画
这种loading特效让loading动画的颜色不断变换。
@keyframes changeColor {
0% {
background-color: #3498db;
}
50% {
background-color: #f39c12;
}
100% {
background-color: #3498db;
}
}
.spinner {
margin: 100px auto;
width: 40px;
height: 40px;
position: relative;
text-align: center;
-webkit-animation: changeColor 3s infinite;
animation: changeColor 3s infinite;
}
.spinner > div {
width: 10px;
height: 10px;
background-color: #fff;
border-radius: 100%;
display: inline-block;
-webkit-animation: bouncedelay .6s infinite ease-in-out;
animation: bouncedelay .6s infinite ease-in-out;
/* Prevent first frame from flickering when animation starts */
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
top: 15px;
}
.spinner .b1 {
left: 0px;
-webkit-animation-delay: -0.24s;
animation-delay: -0.24s;
}
.spinner .b2 {
left: 15px;
-webkit-animation-delay: -0.12s;
animation-delay: -0.12s;
}
.spinner .b3 {
left: