當(dāng)前位置：首頁 > 前端技术 > CSS >内容正文

CSS

10种CSS3实现的Loading效果

發(fā)布時間：2024/6/21 CSS 35 豆豆

生活随笔收集整理的這篇文章主要介紹了 10种CSS3实现的Loading效果小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

原文鏈接：http://www.cnblogs.com/jr1993/p/4622039.html

第一種效果：

代碼如下：

CSS代碼：

.loading{width: 80px;height: 40px;margin: 0 auto;margin-top:100px;}.loading span{display: inline-block;width: 8px;height: 100%;border-radius: 4px;background: lightgreen;-webkit-animation: load 1s ease infinite;}@-webkit-keyframes load{0%,100%{height: 40px;background: lightgreen;}50%{height: 70px;margin: -15px 0;background: lightblue;}}.loading span:nth-child(2){-webkit-animation-delay:0.2s;}.loading span:nth-child(3){-webkit-animation-delay:0.4s;}.loading span:nth-child(4){-webkit-animation-delay:0.6s;}.loading span:nth-child(5){-webkit-animation-delay:0.8s;}

第二種效果：

HTML代碼

CSS代碼

.loading{width: 150px;height: 4px;border-radius: 2px;margin: 0 auto;margin-top:100px;position: relative;background: lightgreen;-webkit-animation: changeBgColor 1.04s ease-in infinite alternate;}.loading span{display: inline-block;width: 16px;height: 16px;border-radius: 50%;background: lightgreen;position: absolute;margin-top: -7px;margin-left:-8px;-webkit-animation: changePosition 1.04s ease-in infinite alternate;}@-webkit-keyframes changeBgColor{0%{background: lightgreen;}100%{background: lightblue;}}@-webkit-keyframes changePosition{0%{background: lightgreen;}100%{margin-left: 142px;background: lightblue;}}

第三、四、五種效果

HTML代碼

CSS代碼

.loading{width: 150px;height: 15px;margin: 0 auto;margin-top:100px;}.loading span{display: inline-block;width: 15px;height: 100%;margin-right: 5px;border-radius: 50%;background: lightgreen;-webkit-animation: load 1.04s ease infinite;}.loading span:last-child{margin-right: 0px; }@-webkit-keyframes load{0%{opacity: 1;}100%{opacity: 0;}}.loading span:nth-child(1){-webkit-animation-delay:0.13s;}.loading span:nth-child(2){-webkit-animation-delay:0.26s;}.loading span:nth-child(3){-webkit-animation-delay:0.39s;}.loading span:nth-child(4){-webkit-animation-delay:0.52s;}.loading span:nth-child(5){-webkit-animation-delay:0.65s;} .loading{width: 150px;height: 15px;margin: 0 auto;margin-top:100px;}.loading span{display: inline-block;width: 15px;height: 100%;margin-right: 5px;border-radius: 50%;background: lightgreen;-webkit-animation: load 1.04s ease infinite;}.loading span:last-child{margin-right: 0px; }@-webkit-keyframes load{0%{opacity: 1;-webkit-transform: scale(1.3);}100%{opacity: 0.2;-webkit-transform: scale(.3);}}.loading span:nth-child(1){-webkit-animation-delay:0.13s;}.loading span:nth-child(2){-webkit-animation-delay:0.26s;}.loading span:nth-child(3){-webkit-animation-delay:0.39s;}.loading span:nth-child(4){-webkit-animation-delay:0.52s;}.loading span:nth-child(5){-webkit-animation-delay:0.65s;} .loading{width: 150px;height: 15px;margin: 0 auto;position: relative;margin-top:100px;}.loading span{position: absolute;width: 15px;height: 100%;border-radius: 50%;background: lightgreen;-webkit-animation: load 1.04s ease-in infinite alternate;}@-webkit-keyframes load{0%{opacity: 1;-webkit-transform: translate(0px);}100%{opacity: 0.2;-webkit-transform: translate(150px);}}.loading span:nth-child(1){-webkit-animation-delay:0.13s;}.loading span:nth-child(2){-webkit-animation-delay:0.26s;}.loading span:nth-child(3){-webkit-animation-delay:0.39s;}.loading span:nth-child(4){-webkit-animation-delay:0.52s;}.loading span:nth-child(5){-webkit-animation-delay:0.65s;}

第六、七、八種效果

HTML代碼

CSS代碼

.loading{width: 150px;height: 15px;margin: 0 auto;margin-top:100px;text-align: center;}.loading span{display: inline-block;width: 15px;height: 100%;margin-right: 5px;background: lightgreen;-webkit-animation: load 1.04s ease infinite;}.loading span:last-child{margin-right: 0px; }@-webkit-keyframes load{0%{opacity: 1;}100%{opacity: 0;}}.loading span:nth-child(1){-webkit-animation-delay:0.13s;}.loading span:nth-child(2){-webkit-animation-delay:0.26s;}.loading span:nth-child(3){-webkit-animation-delay:0.39s;}.loading span:nth-child(4){-webkit-animation-delay:0.52s;}.loading span:nth-child(5){-webkit-animation-delay:0.65s;} .loading{width: 150px;height: 15px;margin: 0 auto;margin-top:100px;}.loading span{display: inline-block;width: 15px;height: 100%;margin-right: 5px;background: lightgreen;-webkit-transform-origin: right bottom;-webkit-animation: load 1s ease infinite;}.loading span:last-child{margin-right: 0px; }@-webkit-keyframes load{0%{opacity: 1;}100%{opacity: 0;-webkit-transform: rotate(90deg);}}.loading span:nth-child(1){-webkit-animation-delay:0.13s;}.loading span:nth-child(2){-webkit-animation-delay:0.26s;}.loading span:nth-child(3){-webkit-animation-delay:0.39s;}.loading span:nth-child(4){-webkit-animation-delay:0.52s;}.loading span:nth-child(5){-webkit-animation-delay:0.65s;} .loading{width: 150px;height: 15px;margin: 0 auto;margin-top:100px;}.loading span{display: inline-block;width: 15px;height: 100%;margin-right: 5px;background: lightgreen;-webkit-transform-origin: right bottom;-webkit-animation: load 1s ease infinite;}.loading span:last-child{margin-right: 0px; }@-webkit-keyframes load{0%{opacity: 1;-webkit-transform: scale(1);}100%{opacity: 0;-webkit-transform: rotate(90deg) scale(.3);}}.loading span:nth-child(1){-webkit-animation-delay:0.13s;}.loading span:nth-child(2){-webkit-animation-delay:0.26s;}.loading span:nth-child(3){-webkit-animation-delay:0.39s;}.loading span:nth-child(4){-webkit-animation-delay:0.52s;}.loading span:nth-child(5){-webkit-animation-delay:0.65s;}

第九、十種效果

<div class="loadEffect"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span> </div> .loadEffect{width: 100px;height: 100px;position: relative;margin: 0 auto;margin-top:100px;}.loadEffect span{display: inline-block;width: 16px;height: 16px;border-radius: 50%;background: lightgreen;position: absolute;-webkit-animation: load 1.04s ease infinite;}@-webkit-keyframes load{0%{opacity: 1;}100%{opacity: 0.2;}}.loadEffect span:nth-child(1){left: 0;top: 50%;margin-top:-8px;-webkit-animation-delay:0.13s;}.loadEffect span:nth-child(2){left: 14px;top: 14px;-webkit-animation-delay:0.26s;}.loadEffect span:nth-child(3){left: 50%;top: 0;margin-left: -8px;-webkit-animation-delay:0.39s;}.loadEffect span:nth-child(4){top: 14px;right:14px;-webkit-animation-delay:0.52s;}.loadEffect span:nth-child(5){right: 0;top: 50%;margin-top:-8px;-webkit-animation-delay:0.65s;}.loadEffect span:nth-child(6){right: 14px;bottom:14px;-webkit-animation-delay:0.78s;}.loadEffect span:nth-child(7){bottom: 0;left: 50%;margin-left: -8px;-webkit-animation-delay:0.91s;}.loadEffect span:nth-child(8){bottom: 14px;left: 14px;-webkit-animation-delay:1.04s;} .loadEffect{width: 100px;height: 100px;position: relative;margin: 0 auto;margin-top:100px;}.loadEffect span{display: inline-block;width: 20px;height: 20px;border-radius: 50%;background: lightgreen;position: absolute;-webkit-animation: load 1.04s ease infinite;}@-webkit-keyframes load{0%{-webkit-transform: scale(1.2);opacity: 1;}100%{-webkit-transform: scale(.3);opacity: 0.5;}}.loadEffect span:nth-child(1){left: 0;top: 50%;margin-top:-10px;-webkit-animation-delay:0.13s;}.loadEffect span:nth-child(2){left: 14px;top: 14px;-webkit-animation-delay:0.26s;}.loadEffect span:nth-child(3){left: 50%;top: 0;margin-left: -10px;-webkit-animation-delay:0.39s;}.loadEffect span:nth-child(4){top: 14px;right:14px;-webkit-animation-delay:0.52s;}.loadEffect span:nth-child(5){right: 0;top: 50%;margin-top:-10px;-webkit-animation-delay:0.65s;}.loadEffect span:nth-child(6){right: 14px;bottom:14px;-webkit-animation-delay:0.78s;}.loadEffect span:nth-child(7){bottom: 0;left: 50%;margin-left: -10px;-webkit-animation-delay:0.91s;}.loadEffect span:nth-child(8){bottom: 14px;left: 14px;-webkit-animation-delay:1.04s;}

轉(zhuǎn)載于:https://www.cnblogs.com/macliu/p/6485412.html

總結(jié)

以上是生活随笔為你收集整理的10种CSS3实现的Loading效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。