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

創(chuàng)新互聯(lián)是一家專(zhuān)注于網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作與策劃設(shè)計(jì),紫金網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專(zhuān)注于網(wǎng)站建設(shè)十年,網(wǎng)設(shè)計(jì)領(lǐng)域的專(zhuān)業(yè)建站公司;建站業(yè)務(wù)涵蓋:紫金等地區(qū)。紫金做網(wǎng)站價(jià)格咨詢(xún):18982081108

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

名稱(chēng)欄目：用CSS3實(shí)現(xiàn)的加載動(dòng)畫(huà)效果代碼分享
標(biāo)題URL：http://jinyejixie.com/article28/peoccp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、網(wǎng)站制作、網(wǎng)站維護(hù)、云服務(wù)器、全網(wǎng)營(yíng)銷(xiāo)推廣、微信公眾號(hào)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)