代码 HTML文档,包含一个自定义的加载器

2024-11-19 09:21:12 +0800 CST views 1142

该文本展示了一个简单的HTML文档,包含一个自定义的加载器。加载器使用CSS样式实现了旋转动画和百分比显示效果。文档设置了黑色背景,并通过CSS定义了加载器的外观和动画效果,旨在提供视觉反馈。

<!DOCTYPE html>
<html lang="zh">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
 </head>
 <style>
  body{background-color: #212121;}.loader{margin-top:300px;display:flex;justify-content:center;align-items:center;position:relative;cursor:not-allowed;scale:0.7;}.central{display:flex;justify-content:center;align-items:center;position:relative;width:10em;height:10em;border-radius:50%;box-shadow:0.5em 1em 1em blueviolet,-0.5em 0.5em 1em blue,0.5em -0.5em 1em purple,-0.5em -0.5em 1em cyan;}.external-shadow{width:10em;height:10em;border-radius:50%;display:flex;justify-content:center;align-items:center;position:relative;box-shadow:0.5em 0.5em 3em blueviolet,-0.5em 0.5em 3em blue,0.5em -0.5em 3em purple,-0.5em -0.5em 3em cyan;z-index:999;animation:rotate 3s linear infinite;background-color:#212121;}.intern{position:absolute;color:white;z-index:9999;}.intern::before{content:"100%";animation:percent 2s ease-in-out infinite;}@keyframes rotate{0%{transform:rotate(0deg);}50%{transform:rotate(180deg);}100%{transform:rotate(360deg);}}@keyframes percent{0%{content:'0%';}25%{content:'25%';}33%{content:'33%';}42%{content:'42%';}51%{content:'51%';}67%{content:'67%';}74%{content:'74%';}75%{content:'75%';}86%{content:'86%';}95%{content:'95%';}98%{content:'98%';}99%{content:'99%';}}
 </style>
 <body>
  <div class="loader">
        <div class="intern">
        </div>
    <div class="external-shadow">
      <div class="central">
      </div>
    </div>
  </div>
 </body>
 <script>
 </script>
</html>
复制全文 生成海报 前端开发 网页设计 动画效果

推荐文章

120个实用CSS技巧汇总合集
2025-06-23 13:19:55 +0800 CST
api远程把word文件转换为pdf
2024-11-19 03:48:33 +0800 CST
内网穿透技术详解与工具对比
2025-04-01 22:12:02 +0800 CST
基于Flask实现后台权限管理系统
2024-11-19 09:53:09 +0800 CST
在Vue3中实现代码分割和懒加载
2024-11-17 06:18:00 +0800 CST
百度开源压测工具 dperf
2024-11-18 16:50:58 +0800 CST
js函数常见的写法以及调用方法
2024-11-19 08:55:17 +0800 CST
淘宝npm镜像使用方法
2024-11-18 23:50:48 +0800 CST
Go 开发中的热加载指南
2024-11-18 23:01:27 +0800 CST
Golang Select 的使用及基本实现
2024-11-18 13:48:21 +0800 CST
PHP 压缩包脚本功能说明
2024-11-19 03:35:29 +0800 CST
Golang 中你应该知道的 Range 知识
2024-11-19 04:01:21 +0800 CST
Vue3中的Store模式有哪些改进?
2024-11-18 11:47:53 +0800 CST
PHP openssl 生成公私钥匙
2024-11-17 05:00:37 +0800 CST
Nginx 防盗链配置
2024-11-19 07:52:58 +0800 CST
Golang Sync.Once 使用与原理
2024-11-17 03:53:42 +0800 CST
go发送邮件代码
2024-11-18 18:30:31 +0800 CST
PHP中获取某个月份的天数
2024-11-18 11:28:47 +0800 CST
如何使用go-redis库与Redis数据库
2024-11-17 04:52:02 +0800 CST
Vue3 vue-office 插件实现 Word 预览
2024-11-19 02:19:34 +0800 CST
程序员茄子在线接单