用CSS3实现的加载动画效果代码分享

这篇文章主要讲解了“用CSS3实现的加载动画效果代码分享”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“用CSS3实现的加载动画效果代码分享”吧！

很棒的loading效果，收藏一下

一

HTML 代码：

代码如下:

<div class="spinner">
 <div class="rect1"></div>
 <div class="rect2"></div>
 <div class="rect3"></div>
 <div class="rect4"></div>
 <div class="rect5"></div>
</div>

CSS 代码：

代码如下:

.spinner {
 margin: 100px auto;
 width: 50px;
 height: 60px;
 text-align: center;
 font-size: 10px;
}
.spinner > div {
 background-color: #67CF22;
 height: 100%;
 width: 6px;
 display: inline-block;
 -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
 animation: stretchdelay 1.2s infinite ease-in-out;
}
.spinner .rect2 {
 -webkit-animation-delay: -1.1s;
 animation-delay: -1.1s;
}
.spinner .rect3 {
 -webkit-animation-delay: -1.0s;
 animation-delay: -1.0s;
}
.spinner .rect4 {
 -webkit-animation-delay: -0.9s;
 animation-delay: -0.9s;
}
.spinner .rect5 {
 -webkit-animation-delay: -0.8s;
 animation-delay: -0.8s;
}
@-webkit-keyframes stretchdelay {
 0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
 20% { -webkit-transform: scaleY(1.0) }
}
@keyframes stretchdelay {
 0%, 40%, 100% {
   transform: scaleY(0.4);
   -webkit-transform: scaleY(0.4);
 }  20% {
   transform: scaleY(1.0);
   -webkit-transform: scaleY(1.0);
 }
}

https://jsfiddle.net/kh77oz8o/embedded/result/

二

HTML 代码：

代码如下:

<div class="spinner"></div>

CSS 代码：

代码如下:

.spinner {
 width: 60px;
 height: 60px;
 background-color: #67CF22;
 margin: 100px auto;
 -webkit-animation: rotateplane 1.2s infinite ease-in-out;
 animation: rotateplane 1.2s infinite ease-in-out;
}
@-webkit-keyframes rotateplane {
 0% { -webkit-transform: perspective(120px) }
 50% { -webkit-transform: perspective(120px) rotateY(180deg) }
 100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}
@keyframes rotateplane {
 0% {
   transform: perspective(120px) rotateX(0deg) rotateY(0deg);
   -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
 } 50% {
   transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
   -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
 } 100% {
   transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
   -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
 }
}

https://jsfiddle.net/kh77oz8o/1/embedded/result/

三

HTML 代码：

代码如下:

<div class="spinner">
 <div class="double-bounce1"></div>
 <div class="double-bounce2"></div>
</div>

CSS 代码：

代码如下:

.spinner {
 width: 60px;
 height: 60px;
 position: relative;
 margin: 100px auto;
}
.double-bounce1, .double-bounce2 {
 width: 100%;
 height: 100%;
 border-radius: 50%;
 background-color: #67CF22;
 opacity: 0.6;
 position: absolute;
 top: 0;
 left: 0;
 -webkit-animation: bounce 2.0s infinite ease-in-out;
 animation: bounce 2.0s infinite ease-in-out;
}
.double-bounce2 {
 -webkit-animation-delay: -1.0s;
 animation-delay: -1.0s;
}
@-webkit-keyframes bounce {
 0%, 100% { -webkit-transform: scale(0.0) }
 50% { -webkit-transform: scale(1.0) }
}
@keyframes bounce {
 0%, 100% {
   transform: scale(0.0);
   -webkit-transform: scale(0.0);
 } 50% {
   transform: scale(1.0);
   -webkit-transform: scale(1.0);
 }
}

https://jsfiddle.net/kh77oz8o/2/embedded/result/

四

HTML 代码：

代码如下:

<div class="spinner">
 <div class="cube1"></div>
 <div class="cube2"></div>
</div>

CSS 代码：

代码如下:

.spinner {
 margin: 100px auto;
 width: 32px;
 height: 32px;
 position: relative;
}
.cube1, .cube2 {
 background-color: #67CF22;
 width: 30px;
 height: 30px;
 position: absolute;
 top: 0;
 left: 0;
 -webkit-animation: cubemove 1.8s infinite ease-in-out;
 animation: cubemove 1.8s infinite ease-in-out;
}
.cube2 {
 -webkit-animation-delay: -0.9s;
 animation-delay: -0.9s;
}
@-webkit-keyframes cubemove {
 25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) }
 50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) }
 75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }
 100% { -webkit-transform: rotate(-360deg) }
}
@keyframes cubemove {
 25% {
   transform: translateX(42px) rotate(-90deg) scale(0.5);
   -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
 } 50% {
   transform: translateX(42px) translateY(42px) rotate(-179deg);
   -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
 } 50.1% {
   transform: translateX(42px) translateY(42px) rotate(-180deg);
   -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
 } 75% {
   transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
   -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
 } 100% {
   transform: rotate(-360deg);
   -webkit-transform: rotate(-360deg);
 }
}

https://jsfiddle.net/kh77oz8o/3/embedded/result/

五

HTML 代码：

代码如下:

<div class="spinner">
 <div class="dot1"></div>
 <div class="dot2"></div>
</div>

CSS 代码：

代码如下:

.spinner {
 margin: 100px auto;
 width: 90px;
 height: 90px;
 position: relative;
 text-align: center;
 -webkit-animation: rotate 2.0s infinite linear;
 animation: rotate 2.0s infinite linear;
}
.dot1, .dot2 {
 width: 60%;
 height: 60%;
 display: inline-block;
 position: absolute;
 top: 0;
 background-color: #67CF22;
 border-radius: 100%;
 -webkit-animation: bounce 2.0s infinite ease-in-out;
 animation: bounce 2.0s infinite ease-in-out;
}
.dot2 {
 top: auto;
 bottom: 0px;
 -webkit-animation-delay: -1.0s;
 animation-delay: -1.0s;
}
@-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg) }}
@keyframes rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }}
@-webkit-keyframes bounce {
 0%, 100% { -webkit-transform: scale(0.0) }
 50% { -webkit-transform: scale(1.0) }
}
@keyframes bounce {
 0%, 100% {
   transform: scale(0.0);
   -webkit-transform: scale(0.0);
 } 50% {
   transform: scale(1.0);
   -webkit-transform: scale(1.0);
 }
}

https://jsfiddle.net/kh77oz8o/4/embedded/result/

六

HTML 代码：

代码如下:

<div class="spinner">
 <div class="bounce1"></div>
 <div class="bounce2"></div>
 <div class="bounce3"></div>
</div>

CSS 代码：

代码如下:

.spinner {
 margin: 100px auto 0;
 width: 150px;
 text-align: center;
}
.spinner > div {
 width: 30px;
 height: 30px;
 background-color: #67CF22;
 border-radius: 100%;
 display: inline-block;
 -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
 animation: bouncedelay 1.4s infinite ease-in-out;
 /* Prevent first frame from flickering when animation starts */
 -webkit-animation-fill-mode: both;
 animation-fill-mode: both;
}
.spinner .bounce1 {
 -webkit-animation-delay: -0.32s;
 animation-delay: -0.32s;
}
.spinner .bounce2 {
 -webkit-animation-delay: -0.16s;
 animation-delay: -0.16s;
}
@-webkit-keyframes bouncedelay {
 0%, 80%, 100% { -webkit-transform: scale(0.0) }
 40% { -webkit-transform: scale(1.0) }
}
@keyframes bouncedelay {
 0%, 80%, 100% {
   transform: scale(0.0);
   -webkit-transform: scale(0.0);
 } 40% {
   transform: scale(1.0);
   -webkit-transform: scale(1.0);
 }
}

https://jsfiddle.net/kh77oz8o/5/embedded/result/

七

HTML 代码：

代码如下:

<div class="spinner"></div>

CSS 代码：

代码如下:

.spinner {
 width: 40px;
 height: 40px;
 margin: 100px auto;
 background-color: #333;
 border-radius: 100%;
 -webkit-animation: scaleout 1.0s infinite ease-in-out;
 animation: scaleout 1.0s infinite ease-in-out;
}
@-webkit-keyframes scaleout {
 0% { -webkit-transform: scale(0.0) }
 100% {
   -webkit-transform: scale(1.0);
   opacity: 0;
 }
}
@keyframes scaleout {
 0% {
   transform: scale(0.0);
   -webkit-transform: scale(0.0);
 } 100% {
   transform: scale(1.0);
   -webkit-transform: scale(1.0);
   opacity: 0;
 }
}

https://jsfiddle.net/kh77oz8o/6/embedded/result/

八

HTML 代码：

代码如下:

<div class="spinner">
 <div class="spinner-container container1">
   <div class="circle1"></div>
   <div class="circle2"></div>
   <div class="circle3"></div>
   <div class="circle4"></div>
 </div>
 <div class="spinner-container container2">
   <div class="circle1"></div>
   <div class="circle2"></div>
   <div class="circle3"></div>
   <div class="circle4"></div>
 </div>
 <div class="spinner-container container3">
   <div class="circle1"></div>
   <div class="circle2"></div>
   <div class="circle3"></div>
   <div class="circle4"></div>
 </div>
</div>

CSS 代码：

代码如下:

.spinner {
 margin: 100px auto;
 width: 20px;
 height: 20px;
 position: relative;
}
.container1 > div, .container2 > div, .container3 > div {
 width: 6px;
 height: 6px;
 background-color: #333;
 border-radius: 100%;
 position: absolute;
 -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
 animation: bouncedelay 1.2s infinite ease-in-out;
 -webkit-animation-fill-mode: both;
 animation-fill-mode: both;
}
.spinner .spinner-container {
 position: absolute;
 width: 100%;
 height: 100%;
}
.container2 {
 -webkit-transform: rotateZ(45deg);
 transform: rotateZ(45deg);
}
.container3 {
 -webkit-transform: rotateZ(90deg);
 transform: rotateZ(90deg);
}
.circle1 { top: 0; left: 0; }
.circle2 { top: 0; right: 0; }
.circle3 { right: 0; bottom: 0; }
.circle4 { left: 0; bottom: 0; }
.container2 .circle1 {
 -webkit-animation-delay: -1.1s;
 animation-delay: -1.1s;
}
.container3 .circle1 {
 -webkit-animation-delay: -1.0s;
 animation-delay: -1.0s;
}
.container1 .circle2 {
 -webkit-animation-delay: -0.9s;
 animation-delay: -0.9s;
}
.container2 .circle2 {
 -webkit-animation-delay: -0.8s;
 animation-delay: -0.8s;
}
.container3 .circle2 {
 -webkit-animation-delay: -0.7s;
 animation-delay: -0.7s;
}
.container1 .circle3 {
 -webkit-animation-delay: -0.6s;
 animation-delay: -0.6s;
}
.container2 .circle3 {
 -webkit-animation-delay: -0.5s;
 animation-delay: -0.5s;
}
.container3 .circle3 {
 -webkit-animation-delay: -0.4s;
 animation-delay: -0.4s;
}
.container1 .circle4 {
 -webkit-animation-delay: -0.3s;
 animation-delay: -0.3s;
}
.container2 .circle4 {
 -webkit-animation-delay: -0.2s;
 animation-delay: -0.2s;
}
.container3 .circle4 {
 -webkit-animation-delay: -0.1s;
 animation-delay: -0.1s;
}
@-webkit-keyframes bouncedelay {
 0%, 80%, 100% { -webkit-transform: scale(0.0) }
 40% { -webkit-transform: scale(1.0) }
}
@keyframes bouncedelay {
 0%, 80%, 100% {
   transform: scale(0.0);
   -webkit-transform: scale(0.0);
 } 40% {
   transform: scale(1.0);
   -webkit-transform: scale(1.0);
 }
}

感谢各位的阅读，以上就是“用CSS3实现的加载动画效果代码分享”的内容了，经过本文的学习后，相信大家对用CSS3实现的加载动画效果代码分享这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！