用CSS3實(shí)現(xiàn)的加載動(dòng)畫效果代碼分享

這篇文章主要講解了“用CSS3實(shí)現(xiàn)的加載動(dòng)畫效果代碼分享”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“用CSS3實(shí)現(xiàn)的加載動(dòng)畫效果代碼分享”吧！

很棒的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實(shí)現(xiàn)的加載動(dòng)畫效果代碼分享”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)用CSS3實(shí)現(xiàn)的加載動(dòng)畫效果代碼分享這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！