HTML+CSS 圆形 loading 动画 网页动态特效 含源码

HTML+CSS 圆形 loading 动画 网页动态特效 含源码
<!DOCTYPE html>
<html lang="zh">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="renderer" content="webkit" />
  <meta name="force-rendering" content="webkit" />
  <title></title>
 </head>
 <style>
  body {display: flex;justify-content: center;margin-top: 300px; overflow: hidden;background-color: #000;} 
  .loader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:150px;height:150px;background:transparent;border:3px solid rgba(0,102,255,0.1);border-radius:50%;text-align:center;line-height:150px;font-family:sans-serif;font-size:20px;color:#0066ff;letter-spacing:2px;text-transform:uppercase;text-shadow:0 0 10px #0066ff;box-shadow:0 0 20px rgba(0,0,0,.15);}.loader::before{content:'';position:absolute;top:-3px;left:-3px;width:100%;height:100%;border:3px solid transparent;border-top:3px solid #0066ff;border-right:3px solid #0066ff;border-radius:50%;animation:animateC 2s linear infinite;}.loader span{display:block;position:absolute;top:calc(50% - 2px);left:50%;width:50%;height:4px;background:transparent;transform-origin:left;animation:animate 2s linear infinite;}.loader span::before{content:'';position:absolute;width:16px;height:16px;border-radius:50%;background:#00aeff;top:-6px;right:-8px;box-shadow:0 0 20px 5px #0066ff;}@keyframes animateC{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}@keyframes animate{0%{transform:rotate(45deg);}100%{transform:rotate(405deg);}}
 </style>
 <body>
  <div class="loader">Loading
    <span></span>
  </div>
 </body>
 <script></script>
</html>
© 版权声明
THE END
喜欢就支持一下吧
点赞1 分享
评论 抢沙发

请登录后发表评论

    请登录后查看评论内容