CSS animation动画loading
Posted jrri
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS animation动画loading相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>logging</title> <style> @keyframes beat 70% transform: scale(1,1); 100% transform: scale(1.3,1.3); body margin: 0; padding: 0; background: #000; .box width: 400px; height: 450px; /*border: 2px solid #000;*/ margin: 150px auto 0; text-align: center; .box div float: left; width: 10px; height: 60px; margin: 50px 20px 50px; border-radius: 3px; border: 1px solid rgba(255,237,151,0.3); animation: beat 500ms linear 0s infinite alternate; background: #fff; .box div:nth-child(1) animation-delay: 100ms; .box div:nth-child(2) animation-delay: 200ms; .box div:nth-child(3) animation-delay: 300ms; .box div:nth-child(4) animation-delay: 400ms; .box div:nth-child(5) animation-delay: 500ms; .box div:nth-child(6) animation-delay: 600ms; .box div:nth-child(7) animation-delay: 700ms; </style> </head> <body> <div class="box"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <!-- <p>Loading</p> --> </div> </body> </html>
以上是关于CSS animation动画loading的主要内容，如果未能解决你的问题，请参考以下文章