CSS3扁平化Loading动画特效
生活随笔
收集整理的這篇文章主要介紹了
CSS3扁平化Loading动画特效
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
效果預覽：
http://hovertree.com/texiao/css3/42/
?代碼如下：
<!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> <div class="container"><div class="canvas canvas1"><div class="spinner1 spinnerMax"><div class="spinner1 spinnerMid"><div class="spinner1 spinnerMin"></div></div></div></div><div class="canvas canvas2"><div class="spinner2"></div> <div class="hourHand"></div><div class="dot"></div></div><div class="canvas canvas3"><div class="spinner3"></div> </div><div class="canvas canvas4"><div class="spinner4"></div> </div><div class="canvas canvas5"><div class="spinner5"></div> </div><div class="canvas canvas6"><div class="spinner6 p1"></div><div class="spinner6 p2"></div><div class="spinner6 p3"></div><div class="spinner6 p4"></div></div></div><div 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> </div> </body> </html>特效匯總：http://www.cnblogs.com/jihua/p/webfront.html
總結
以上是生活随笔為你收集整理的CSS3扁平化Loading动画特效的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【HTML】前端性能优化之CDN和WPO
- 下一篇： 利用锚点再点事吧丨