这是一款css3炫酷3D立方体预加载loading特效。该特效通过简单的HTML元素和CSS3代码，构建几个立方体不停运动的动画特效，适用于做页面的loading效果。
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>纯css加载中loading动画_前端哥</title> <style> * { margin:0; padding:0; } body,html { background-color:#333; position:relative; width:100%; height:100%; } .loader { position:absolute; width:160px; height:100px; left:50%; top:50%; margin-left:-40px; margin-top:-50px; } .loader .dot { left:35%; position:absolute; width:10px; height:10px; background:#ffffff; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; transform-origin:10px 40px; animation:dotrotate 2s cubic-bezier(0.775,0.005,0.310,1.000) infinite; } .loader .dot .first { position:absolute; width:8px; height:8px; top:50%; left:50%; margin-left:-4px; margin-top:-4px; border-radius:50%; background:#ffffff; animation-delay:0.2s; animation:1.7s dotscale cubic-bezier(0.775,0.005,0.310,1.000) infinite; } .loader .dot:nth-of-type(2) { animation-delay:0.2s; } .loader .dot:nth-of-type(3) { animation-delay:0.3s; } .loader .dot:last-of-type { animation-delay:0.4s; } @keyframes dotrotate { 0% { transform:rotate(0deg); } 100% { transform:rotate(360deg); } }@keyframes dotscale { 0%,10% { width:16px; height:16px; margin-left:-8px; margin-top:-8px; } 50% { width:8px; height:8px; margin-left:-4px; margin-top:-4px; } 90%,100% { width:16px; height:16px; margin-left:-8px; margin-top:-8px; } }.loader p { font-size:12px; font-weight:bold; color:#fff; margin:0; position:absolute; bottom:0; text-align:center; width:100%; } .loader p span { animation:1.7s fontMove cubic-bezier(0.775,0.005,0.310,1.000) infinite; } .loader p span:nth-of-type(2) { animation-delay:0.2s; } .loader p span:nth-of-type(3) { animation-delay:0.3s; } .loader p span:last-of-type { animation-delay:0.4s; } @keyframes fontMove { 0% { font-size:12px; } 50% { font-size:14px; } 100% { font-size:12px; } } </style> </head> <body> <div class="loader"> <div class="dot"> <div class="first"></div> </div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <p>正在提交数据,请耐心等待...</p> </div> </body></html>
