<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="loading"> <span>Loading...</span> </div> </body> </html>style.css
body{ margin: 0; padding: 0; background: #34495e; height: 100vh; display: flex; align-items: center; justify-content: center; font-family: "montserrat",sans-serif; } .loading{ width: 200px; height: 200px; box-sizing: border-box; border-radius: 50%; border-top: 10px solid #e74c3c; position: relative; animation: a1 2s linear infinite; } .loading::before,.loading::after{ content: ''; width: 200px; height: 200px; position: absolute; left: 0; top: -10px; box-sizing: border-box; border-radius: 50%; } .loading::before{ border-top: 10px solid #e67e22; transform: rotate(120deg); } .loading::after{ border-top: 10px solid #3498db; transform: rotate(240deg); } .loading span{ position: absolute; width: 200px; height: 200px; color: #fff; text-align: center; line-height: 200px; animation: a2 2s linear infinite; } @keyframes a1 { to{ transform: rotate(360deg); } } @keyframes a2 { to{ transform: rotate(-360deg); } }

获取源码: Loading Animation
下载数:55人次, 文件大小: 1.0 KB, 上传日期: 2020年-11月-25日
1,027 人查阅
获取资源构建和完善自己的源码库
源码可以在本地直接演示
同时研究和体验 如何将一些具体的想法的实现过程
源码可以直接嫁接到自己的网站里复用
稍作修改成为自己的作品
您需要先支付 6元 才能查看此处内容!立即支付