[加载动画9]
查看 源码
html
<div class="loadingNine"> <span></span> <span></span> <span></span> <span></span> <span></span> </div>
css
.loadingNine{ width: 150px; height: 15px; margin: 0 auto; margin-top:100px; text-align: center; } .loadingNine span{ display: inline-block; width: 15px; height: 100%; margin-right: 5px; background: lightgreen; -webkit-animation: loadnine 1.04s ease infinite; } .loadingNine span:last-child{ margin-right: 0px; } @-webkit-keyframes loadnine{ 0%{ opacity: 1; -webkit-transform: scale(1.2); } 100%{ opacity: .2; -webkit-transform: scale(.2); } } .loadingNine span:nth-child(1){ -webkit-animation-delay:0.13s; } .loadingNine span:nth-child(2){ -webkit-animation-delay:0.26s; } .loadingNine span:nth-child(3){ -webkit-animation-delay:0.39s; } .loadingNine span:nth-child(4){ -webkit-animation-delay:0.52s; } .loadingNine span:nth-child(5){ -webkit-animation-delay:0.65s; }
[加载动画10]
查看源码
html
<div class="loadingTen"> <span></span> </div>
css
.loadingTen{ width: 150px; height: 8px; border-radius: 4px; margin: 0 auto; margin-top:100px; position: relative; background: lightblue; overflow: hidden; } .loadingTen span{ display:block; width: 100%; height: 100%; border-radius: 3px; background: lightgreen; -webkit-animation: changePosition 4s linear infinite; } @-webkit-keyframes changePosition{ 0%{ -webkit-transform: translate(-150px); } 50%{ -webkit-transform: translate(0); } 100%{ -webkit-transform: translate(150px); } }
[加载动画11]
查看源码
html
<div class="loadingEleven"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div>
css
.loadingEleven{ width: 100px; height: 100px; position: relative; margin: 0 auto; margin-top:100px; } .loadingEleven span{ display: inline-block; width: 30px; height: 10px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; background: lightgreen; position: absolute; -webkit-animation: loadeleven 1.04s ease infinite; } @-webkit-keyframes loadeleven{ 0%{ opacity: 1; } 100%{ opacity: 0.2; } } .loadingEleven span:nth-child(1){ left: 0; top: 50%; margin-top:-5px; -webkit-animation-delay:0.13s; } .loadingEleven span:nth-child(2){ left: 10px; top: 20px; -webkit-transform: rotate(45deg); -webkit-animation-delay:0.26s; } .loadingEleven span:nth-child(3){ left: 50%; top: 10px; margin-left: -15px; -webkit-transform: rotate(90deg); -webkit-animation-delay:0.39s; } .loadingEleven span:nth-child(4){ top: 20px; right:10px; -webkit-transform: rotate(135deg); -webkit-animation-delay:0.52s; } .loadingEleven span:nth-child(5){ right: 0; top: 50%; margin-top:-5px; -webkit-transform: rotate(180deg); -webkit-animation-delay:0.65s; } .loadingEleven span:nth-child(6){ right: 10px; bottom:20px; -webkit-transform: rotate(225deg); -webkit-animation-delay:0.78s; } .loadingEleven span:nth-child(7){ bottom: 10px; left: 50%; margin-left: -15px; -webkit-transform: rotate(270deg); -webkit-animation-delay:0.91s; } .loadingEleven span:nth-child(8){ bottom: 20px; left: 10px; -webkit-transform: rotate(315deg); -webkit-animation-delay:1.04s; }
[加载动画12]
查看源码
html
<div class="loadingTwl"> <span></span> <span></span> <span></span> <span></span> <span></span> </div>
css
.loadingTwl{ position:relative; width: 100px; height: 50px; position: relative; margin: 0 auto; } .loadingTwl span{ display:block; bottom:0px; width: 9px; height: 5px; background:#9b59b6; position:absolute; -webkit-animation: loadingtwl 1.5s infinite ease-in-out; -moz-animation: loadingtwl 1.5s infinite ease-in-out; -ms-animation: loadingtwl 1.5s infinite ease-in-out; -o-animation: loadingtwl 1.5s infinite ease-in-out; animation: loadingtwl 1.5s infinite ease-in-out; } .loadingTwl span:nth-child(2){ left:11px; -webkit-animation-delay: .2s; -moz-animation-delay: .2s; -ms-animation-delay: .2s; -o-animation-delay: .2s; animation-delay: .2s; } .loadingTwl span:nth-child(3){ left:22px; -webkit-animation-delay: .4s; -moz-animation-delay: .4s; -ms-animation-delay: .4s; -o-animation-delay: .4s; animation-delay: .4s; } .loadingTwl span:nth-child(4){ left:33px; -webkit-animation-delay: .6s; -moz-animation-delay: .6s; -ms-animation-delay: .6s; -o-animation-delay: .6s; animation-delay: .6s; } .loadingTwl span:nth-child(5){ left:44px; -webkit-animation-delay: .8s; -moz-animation-delay: .8s; -ms-animation-delay: .8s; -o-animation-delay: .8s; animation-delay: .8s; } @-webkit-keyframes loadingtwl { 0% {height:5px;-webkit-transform:translateY(0px);background:#9b59b6;} 25% {height:30px;-webkit-transform:translateY(15px);background:#3498db;} 50% {height:5px;-webkit-transform:translateY(0px);background:#9b59b6;} 100% {height:5px;-webkit-transform:translateY(0px);background:#9b59b6;} } @-moz-keyframes loadingtwl { 0% {height:5px;-moz-transform:translateY(0px);background:#9b59b6;} 25% {height:30px;-moz-transform:translateY(15px);background:#3498db;} 50% {height:5px;-moz-transform:translateY(0px);background:#9b59b6;} 100% {height:5px;-moz-transform:translateY(0px);background:#9b59b6;} } @-ms-keyframes loadingtwl { 0% {height:5px;-ms-transform:translateY(0px);background:#9b59b6;} 25% {height:30px;-ms-transform:translateY(15px);background:#3498db;} 50% {height:5px;-ms-transform:translateY(0px);background:#9b59b6;} 100% {height:5px;-ms-transform:translateY(0px);background:#9b59b6;} } @keyframes loadingtwl { 0% {height:5px;transform:translateY(0px);background:#9b59b6;} 25% {height:30px;transform:translateY(15px);background:#3498db;} 50% {height:5px;transform:translateY(0px);background:#9b59b6;} 100% {height:5px;transform:translateY(0px);background:#9b59b6;} }
[加载动画13]
查看源码
html
<div class="loadingThi"> <span></span> <span></span> <span></span> <span></span> </div>
css
.loadingThi{ position: relative; width: 40px; height: 40px; margin:0 auto; } .loadingThi span{ display:block; bottom:0px; width: 20px; height: 20px; background:#9b59b6; position:absolute; } .loadingThi span:nth-child(1){ -webkit-animation: loadingThi2_1 1.5s infinite ease-in-out; -moz-animation: loadingThi2_1 1.5s infinite ease-in-out; -ms-animation: loadingThi2_1 1.5s infinite ease-in-out; animation: loadingThi2_1 1.5s infinite ease-in-out; } .loadingThi span:nth-child(2){ left:20px; -webkit-animation: loadingThi2_2 1.5s infinite ease-in-out; -moz-animation: loadingThi2_2 1.5s infinite ease-in-out; -ms-animation: loadingThi2_2 1.5s infinite ease-in-out; animation: loadingThi2_2 1.5s infinite ease-in-out; } .loadingThi span:nth-child(3){ top:0px; -webkit-animation: loadingThi2_3 1.5s infinite ease-in-out; -moz-animation: loadingThi2_3 1.5s infinite ease-in-out; -ms-animation: loadingThi2_3 1.5s infinite ease-in-out; animation: loadingThi2_3 1.5s infinite ease-in-out; } .loadingThi span:nth-child(4){ top:0px; left:20px; -webkit-animation: loadingThi2_4 1.5s infinite ease-in-out; -moz-animation: loadingThi2_4 1.5s infinite ease-in-out; -ms-animation: loadingThi2_4 1.5s infinite ease-in-out; animation: loadingThi2_4 1.5s infinite ease-in-out; } @-webkit-keyframes loadingThi2_1 { 0% {-webkit-transform: translateX(0px) translateY(0px) rotate(0deg); border-radius:0px;} 50% {-webkit-transform: translateX(-20px) translateY(-10px) rotate(-180deg); border-radius:20px;background:#3498db;} 80% {-webkit-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;} 100% {-webkit-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;} } @-webkit-keyframes loadingThi2_2 { 0% {-webkit-transform: translateX(0px) translateY(0px) rotate(0deg);border-radius:0px;} 50% {-webkit-transform: translateX(20px) translateY(-10px) rotate(180deg);border-radius:20px;background:#f1c40f;} 80% {-webkit-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;} 100% {-webkit-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;} } @-webkit-keyframes loadingThi2_3 { 0% {-webkit-transform: translateX(0px) translateY(0px) rotate(0deg);border-radius:0px;} 50% {-webkit-transform: translateX(-20px) translateY(10px) rotate(-180deg); border-radius:20px;background:#2ecc71;} 80% {-webkit-transform: translateX(0px) translateY(0px) rotate(-360deg);border-radius:0px;} 100% {-webkit-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;} } @-webkit-keyframes loadingThi2_4 { 0% {-webkit-transform: translateX(0px) translateY(0px) rotate(0deg); border-radius:0px;} 50% {-webkit-transform: translateX(20px) translateY(10px) rotate(180deg); border-radius:20px;background:#e74c3c;} 80% {-webkit-transform: translateX(0px) translateY(0px) rotate(360deg); border-radius:0px;} 100% {-webkit-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;} } @-moz-keyframes loadingThi2_1 { 0% {-moz-transform: translateX(0px) translateY(0px) rotate(0deg); border-radius:0px;} 50% {-moz-transform: translateX(-20px) translateY(-10px) rotate(-180deg); border-radius:20px;background:#3498db;} 80% {-moz-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;} 100% {-moz-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;} } @-moz-keyframes loadingThi2_2 { 0% {-moz-transform: translateX(0px) translateY(0px) rotate(0deg);border-radius:0px;} 50% {-moz-transform: translateX(20px) translateY(-10px) rotate(180deg);border-radius:20px;background:#f1c40f;} 80% {-moz-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;} 100% {-moz-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;} } @-moz-keyframes loadingThi2_3 { 0% {-moz-transform: translateX(0px) translateY(0px) rotate(0deg);border-radius:0px;} 50% {-moz-transform: translateX(-20px) translateY(10px) rotate(-180deg); border-radius:20px;background:#2ecc71;} 80% {-moz-transform: translateX(0px) translateY(0px) rotate(-360deg);border-radius:0px;} 100% {-moz-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;} } @-moz-keyframes loadingThi2_4 { 0% {-moz-transform: translateX(0px) translateY(0px) rotate(0deg); border-radius:0px;} 50% {-moz-transform: translateX(20px) translateY(10px) rotate(180deg); border-radius:20px;background:#e74c3c;} 80% {-moz-transform: translateX(0px) translateY(0px) rotate(360deg); border-radius:0px;} 100% {-moz-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;} } @-ms-keyframes loadingThi2_1 { 0% {-ms-transform: translateX(0px) translateY(0px) rotate(0deg); border-radius:0px;} 50% {-ms-transform: translateX(-20px) translateY(-10px) rotate(-180deg); border-radius:20px;background:#3498db;} 80% {-ms-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;} 100% {-ms-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;} } @-ms-keyframes loadingThi2_2 { 0% {-ms-transform: translateX(0px) translateY(0px) rotate(0deg);border-radius:0px;} 50% {-ms-transform: translateX(20px) translateY(-10px) rotate(180deg);border-radius:20px;background:#f1c40f;} 80% {-ms-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;} 100% {-ms-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;} } @-ms-keyframes loadingThi2_3 { 0% {-ms-transform: translateX(0px) translateY(0px) rotate(0deg);border-radius:0px;} 50% {-ms-transform: translateX(-20px) translateY(10px) rotate(-180deg); border-radius:20px;background:#2ecc71;} 80% {-ms-transform: translateX(0px) translateY(0px) rotate(-360deg);border-radius:0px;} 100% {-ms-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;} } @-ms-keyframes loadingThi2_4 { 0% {-ms-transform: translateX(0px) translateY(0px) rotate(0deg); border-radius:0px;} 50% {-ms-transform: translateX(20px) translateY(10px) rotate(180deg); border-radius:20px;background:#e74c3c;} 80% {-ms-transform: translateX(0px) translateY(0px) rotate(360deg); border-radius:0px;} 100% {-ms-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;} } @-keyframes loadingThi2_1 { 0% {-transform: translateX(0px) translateY(0px) rotate(0deg); border-radius:0px;} 50% {-transform: translateX(-20px) translateY(-10px) rotate(-180deg); border-radius:20px;background:#3498db;} 80% {-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;} 100% {-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;} } @-keyframes loadingThi2_2 { 0% {-transform: translateX(0px) translateY(0px) rotate(0deg);border-radius:0px;} 50% {-transform: translateX(20px) translateY(-10px) rotate(180deg);border-radius:20px;background:#f1c40f;} 80% {-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;} 100% {-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;} } @-keyframes loadingThi2_3 { 0% {-transform: translateX(0px) translateY(0px) rotate(0deg);border-radius:0px;} 50% {-transform: translateX(-20px) translateY(10px) rotate(-180deg); border-radius:20px;background:#2ecc71;} 80% {-transform: translateX(0px) translateY(0px) rotate(-360deg);border-radius:0px;} 100% {-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;} } @-keyframes loadingThi2_4 { 0% {-transform: translateX(0px) translateY(0px) rotate(0deg); border-radius:0px;} 50% {-transform: translateX(20px) translateY(10px) rotate(180deg); border-radius:20px;background:#e74c3c;} 80% {-transform: translateX(0px) translateY(0px) rotate(360deg); border-radius:0px;} 100% {-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;} }
[加载动画14]
查看源码
html
<div class="loadingThir"></div>
css
.loadingThir{ position:relative; width: 40px; height: 40px; margin:0 auto; } .loadingThir:before{ width:20px; height:20px; border-radius:20px; background:blue; content:''; position:absolute; background:#9b59b6; -webkit-animation: preloader_3_before 1.5s infinite ease-in-out; -moz-animation: preloader_3_before 1.5s infinite ease-in-out; -ms-animation: preloader_3_before 1.5s infinite ease-in-out; animation: preloader_3_before 1.5s infinite ease-in-out; } .loadingThir:after{ width:20px; height:20px; border-radius:20px; background:blue; content:''; position:absolute; background:#2ecc71; left:22px; -webkit-animation: preloader_3_after 1.5s infinite ease-in-out; -moz-animation: preloader_3_after 1.5s infinite ease-in-out; -ms-animation: preloader_3_after 1.5s infinite ease-in-out; animation: preloader_3_after 1.5s infinite ease-in-out; } @-webkit-keyframes preloader_3_before { 0% {-webkit-transform: translateX(0px) rotate(0deg)} 50% {-webkit-transform: translateX(50px) scale(1.2) rotate(260deg); background:#2ecc71;border-radius:0px;} 100% {-webkit-transform: translateX(0px) rotate(0deg)} } @-webkit-keyframes preloader_3_after { 0% {-webkit-transform: translateX(0px)} 50% {-webkit-transform: translateX(-50px) scale(1.2) rotate(-260deg);background:#9b59b6;border-radius:0px;} 100% {-webkit-transform: translateX(0px)} } @-moz-keyframes preloader_3_before { 0% {-moz-transform: translateX(0px) rotate(0deg)} 50% {-moz-transform: translateX(50px) scale(1.2) rotate(260deg); background:#2ecc71;border-radius:0px;} 100% {-moz-transform: translateX(0px) rotate(0deg)} } @-moz-keyframes preloader_3_after { 0% {-moz-transform: translateX(0px)} 50% {-moz-transform: translateX(-50px) scale(1.2) rotate(-260deg);background:#9b59b6;border-radius:0px;} 100% {-moz-transform: translateX(0px)} } @-ms-keyframes preloader_3_before { 0% {-ms-transform: translateX(0px) rotate(0deg)} 50% {-ms-transform: translateX(50px) scale(1.2) rotate(260deg); background:#2ecc71;border-radius:0px;} 100% {-ms-transform: translateX(0px) rotate(0deg)} } @-ms-keyframes preloader_3_after { 0% {-ms-transform: translateX(0px)} 50% {-ms-transform: translateX(-50px) scale(1.2) rotate(-260deg);background:#9b59b6;border-radius:0px;} 100% {-ms-transform: translateX(0px)} } @keyframes preloader_3_before { 0% {transform: translateX(0px) rotate(0deg)} 50% {transform: translateX(50px) scale(1.2) rotate(260deg); background:#2ecc71;border-radius:0px;} 100% {transform: translateX(0px) rotate(0deg)} } @keyframes preloader_3_after { 0% {transform: translateX(0px)} 50% {transform: translateX(-50px) scale(1.2) rotate(-260deg);background:#9b59b6;border-radius:0px;} 100% {transform: translateX(0px)} }
[加载动画15]
查看源码
html
<div class="loadingFiv"></div>
css
.loadingFiv{ position:relative; width:30px; height:30px; background:#3498db; border-radius:50px; -webkit-animation: preloader_5 1.5s infinite linear; -moz-animation: preloader_5 1.5s infinite linear; -ms-animation: preloader_5 1.5s infinite linear; animation: preloader_5 1.5s infinite linear; margin:0 auto; } .loadingFiv:after{ position:absolute; width:50px; height:50px; border-top:10px solid #9b59b6; border-bottom:10px solid #9b59b6; border-left:10px solid transparent; border-right:10px solid transparent; border-radius:50px; content:''; top:-20px; left:-20px; -webkit-animation: preloader_5_after 1.5s infinite linear; -moz-animation: preloader_5_after 1.5s infinite linear; -ms-animation: preloader_5_after 1.5s infinite linear; animation: preloader_5_after 1.5s infinite linear; } @-webkit-keyframes preloader_5 { 0% {-webkit-transform: rotate(0deg);} 50% {-webkit-transform: rotate(180deg);background:#2ecc71;} 100% {-webkit-transform: rotate(360deg);} } @-webkit-keyframes preloader_5_after { 0% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;} 50% {border-top:10px solid #3498db;border-bottom:10px solid #3498db;} 100% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;} } @-moz-keyframes preloader_5 { 0% {-moz-transform: rotate(0deg);} 50% {-moz-transform: rotate(180deg);background:#2ecc71;} 100% {-moz-transform: rotate(360deg);} } @-moz-keyframes preloader_5_after { 0% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;} 50% {border-top:10px solid #3498db;border-bottom:10px solid #3498db;} 100% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;} } @-ms-keyframes preloader_5 { 0% {-ms-transform: rotate(0deg);} 50% {-ms-transform: rotate(180deg);background:#2ecc71;} 100% {-ms-transform: rotate(360deg);} } @-ms-keyframes preloader_5_after { 0% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;} 50% {border-top:10px solid #3498db;border-bottom:10px solid #3498db;} 100% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;} } @keyframes preloader_5 { 0% {transform: rotate(0deg);} 50% {transform: rotate(180deg);background:#2ecc71;} 100% {transform: rotate(360deg);} } @keyframes preloader_5_after { 0% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;} 50% {border-top:10px solid #3498db;border-bottom:10px solid #3498db;} 100% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;} }
[加载动画16]
查看源码
html
<div class="loadingSixs"> <span></span> <span></span> <span></span> <span></span> </div>
css
.loadingSixs{ position:relative; width: 42px; height: 42px; -webkit-animation: preloader_6 5s infinite linear; -moz-animation: preloader_6 5s infinite linear; -ms-animation: preloader_6 5s infinite linear; animation: preloader_6 5s infinite linear; margin:0 auto; } .loadingSixs span{ width:20px; height:20px; position:absolute; background:red; display:block; -webkit-animation: preloader_6_span 1s infinite linear; -moz-animation: preloader_6_span 1s infinite linear; -ms-animation: preloader_6_span 1s infinite linear; animation: preloader_6_span 1s infinite linear; } .loadingSixs span:nth-child(1){ background:#2ecc71; } .loadingSixs span:nth-child(2){ left:22px; background:#9b59b6; -webkit-animation-delay: .2s; -moz-animation-delay: .2s; -ms-animation-delay: .2s; animation-delay: .2s; } .loadingSixs span:nth-child(3){ top:22px; background:#3498db; -webkit-animation-delay: .4s; -moz-animation-delay: .4s; -ms-animation-delay: .4s; animation-delay: .4s; } .loadingSixs span:nth-child(4){ top:22px; left:22px; background:#f1c40f; -webkit-animation-delay: .6s; -moz-animation-delay: .6s; -ms-animation-delay: .6s; animation-delay: .6s; } @-webkit-keyframes preloader_6 { from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(360deg);} } @-webkit-keyframes preloader_6_span { 0% { -webkit-transform:scale(1); } 50% { -webkit-transform:scale(0.5); } 100% { -webkit-transform:scale(1); } } @-moz-keyframes preloader_6 { from {-moz-transform: rotate(0deg);} to {-moz-transform: rotate(360deg);} } @-moz-keyframes preloader_6_span { 0% { -moz-transform:scale(1); } 50% { -moz-transform:scale(0.5); } 100% { -moz-transform:scale(1); } } @-ms-keyframes preloader_6 { from {-ms-transform: rotate(0deg);} to {-ms-transform: rotate(360deg);} } @-ms-keyframes preloader_6_span { 0% { -ms-transform:scale(1); } 50% { -ms-transform:scale(0.5); } 100% { -ms-transform:scale(1); } } @-ms-keyframes preloader_6 { from {-ms-transform: rotate(0deg);} to {-ms-transform: rotate(360deg);} } @keyframes preloader_6_span { 0% { transform:scale(1); } 50% { transform:scale(0.5); } 100% { transform:scale(1); } }