利用CSS3扁平化Loading动画特效

时间：2020-11-27 来源：智榕旅游
这篇文章利用CSS3扁平化Loading动画特效
代码如下：
<!doctype html><html><head><meta charset="utf-8"><title>css3旋转加载效果_何问起</title><style>body {
 background: #263238;
 background-size: cover;
 margin: 0;
 padding-top: 5em;
 padding-bottom: 5em;}.container {
 display: flex;
 flex-wrap: wrap;
 height:;
 justify-content: space-around;
 margin: 0 auto;
 max-width: 650px;
 min-width: 200px;}.canvas {
 align-items: center;
 background: #eeeeee;
 border-radius: 50%;
 box-shadow: 0 5px 20px rgba(0,0,0,0.2);
 display: flex;
 height: 10em;
 justify-content: center;
 margin: 1em 1em 2em 1em;
 width: 10em;}/* Spinner 1 starts here */.spinner1 {
 align-items: center;
 border: .3em solid transparent;
 border-top: .3em solid #4DB6AC;
 border-right: .3em solid #4DB6AC;
 border-radius: 100%;
 display: flex;
 justify-content: center;}.spinnerMax {
 animation: spinnerOne 3s linear infinite;
 height: 3em;
 width: 3em;}.spinnerMid {
 animation: spinnerOne 5s linear infinite;
 height: 2.4em;
 width: 2.4em;}.spinnerMin {
 animation: spinnerOne 5s linear infinite;
 height: 1.8em;
 width: 1.8em;}@keyframes spinnerOne {
 0% {
 transform: rotate(0deg) }
 100% {
 transform: rotate(360deg) }}/* Spinner 1 ends here *//* Spinner 2 starts here */.canvas2 {
 position: relative;}.spinner2 {
 animation: spinnerTwo 1s linear infinite;
 background: #4DB6AC;
 border-radius: 100px;
 height: 3em;
 transform-origin: top;
 position: absolute;
 top: 50%;
 width: .22em;}.hourHand {
 animation: spinnerTwo 7s linear infinite;
 background: #4DB6AC;
 border-radius: 100px;
 height: 2em;
 transform-origin: top;
 position: absolute;
 top: 50%;
 width: .2em;}.dot {
 background: #4DB6AC;
 border-radius: 100%;
 height: .5em;
 width: .5em;}@keyframes spinnerTwo {
 0% {
 transform: rotate(0deg) }
 100% {
 transform: rotate(360deg) }}/* Spinner 2 ends here *//* Spinner 3 starts here */.spinner3 {
 animation: spinnerThree 1s linear infinite;
 background: #4DB6AC;
 border-radius: 100%;
 width: 3em;
 height: 3em;}@keyframes spinnerThree {
 0%, 35% {
 background: #4DB6AC;
 transform: scale(1);
 }
 20%, 50% {
 background: #80CBC4;
 transform: scale(1.3);
 }}/* Spinner 3 ends here *//* Spinner 4 starts here */.spinner4 {
 animation: spinnerFour 1s linear infinite;
 border: solid 7px transparent;
 border-top: solid 7px #4DB6AC;
 border-radius: 100%;
 width: 3em;
 height: 3em;}@keyframes spinnerFour {
 0% {
 transform: rotate(0deg);
 }
 100% {
 transform: rotate(360deg);
 }}/* Spinner 4 ends here *//* Spinner 5 starts here */.spinner5 {
 animation: spinnerFive 1s linear infinite;
 border: solid 1.5em #4DB6AC;
 border-right: solid 1.5em transparent;
 border-left: solid 1.5em transparent;
 border-radius: 100%;
 width: 0;
 height: 0;}@keyframes spinnerFive {
 0% {
 transform: rotate(0deg);
 }
 50% {
 transform: rotate(60deg) }
 100% {
 transform: rotate(360deg);
 }}/* Spinner 5 ends here *//* Spinner 6 starts here */.spinner6 {
 background: #4DB6AC;
 border-radius: 50%;
 height: 1em;
 margin: .1em;
 width: 1em;}.p1 {
 animation: fall 1s linear .3s infinite;}.p2 {
 animation: fall 1s linear .2s infinite;}.p3 {
 animation: fall 1s linear .1s infinite;}.p4 {
 animation: fall 1s linear infinite;}@keyframes fall {
 0% {
 transform: translateY(-15px);
 }
 25%, 75% {
 transform: translateY(0);
 }
 100% {
 transform: translateY(-15px);
 }}/* Spinner 6 ends here */@media (max-width: 600px) {
 .container {
 align-items: center;
 flex-direction: column;
 }
 .canvas {
 margin: 1em;
 }}</style></head><body><p class="container">
 
 <p class="canvas canvas1">
 <p class="spinner1 spinnerMax">
 <p class="spinner1 spinnerMid">
 <p class="spinner1 spinnerMin"></p>
 </p>
 </p>
 </p>
 
 <p class="canvas canvas2">
 <p class="spinner2"></p> 
 <p class="hourHand"></p>
 <p class="dot"></p>
 </p>
 
 <p class="canvas canvas3">
 <p class="spinner3"></p> 
 </p>
 
 <p class="canvas canvas4">
 <p class="spinner4"></p> 
 </p>
 
 <p class="canvas canvas5">
 <p class="spinner5"></p> 
 </p>
 
 <p class="canvas canvas6">
 <p class="spinner6 p1"></p>
 <p class="spinner6 p2"></p>
 <p class="spinner6 p3"></p>
 <p class="spinner6 p4"></p>
 </p>
 </p><p style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff"><p>适用浏览器：FireFox、Chrome、Opera、Edge、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p><p>来源：<a href="http://hovertree.com/" target="_blank">何问起</a> <a href="http://hovertree.com/h/bjag/1afxdrm7.htm" target="_blank">查看代码</a></p></p></body></html>