前端开发 之 15个页面加载特效下【附完整源码】

文章目录

      • 十二:铜钱3D圆环加载特效
          • 1.效果展示
          • 2.`HTML`完整代码
      • 十三:扇形百分比加载特效
          • 1.效果展示
          • 2.`HTML`完整代码
      • 十四:四色圆环显现加载特效
          • 1.效果展示
          • 2.`HTML`完整代码
      • 十五:跷跷板加载特效
          • 1.效果展示
          • 2.`HTML`完整代码

十二:铜钱3D圆环加载特效

1.效果展示

在这里插入图片描述

2.HTML完整代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>铜钱3D圆环加载特效</title><style>body {display: flex;/* 设置body为弹性盒布局 */justify-content: center;/* 水平居中 */align-items: center;/* 垂直居中 */height: 100vh;/* 高度为视口高度的100% */margin: 0;/* 外边距为0 */background-color: #222;/* 背景颜色为深灰色 */overflow: hidden;/* 隐藏溢出的内容 */}.loader {position: relative;/* 相对定位 */width: 80px;/* 宽度80像素 */height: 80px;/* 高度80像素 */transform-style: preserve-3d;/* 保持3D转换效果 */animation: outerRotate 8s infinite linear;/* 应用outerRotate动画,时长8秒,无限循环,线性动画 */box-shadow: 0 0 20px rgba(255, 255, 255, 0.2),0 0 40px rgba(255, 255, 255, 0.2),0 0 60px rgba(255, 255, 255, 0.2),0 0 80px rgba(255, 255, 255, 0.2),0 0 100px rgba(255, 255, 255, 0.2);/* 添加多层阴影效果,模拟发光 */}.loader div {position: absolute;/* 绝对定位 */width: 100%;/* 宽度100% */height: 100%;/* 高度100% */border-radius: 50%;/* 边框圆角为50%,形成圆形 */border: 4px solid transparent;/* 边框4像素宽,透明色 */transform-origin: center center;/* 转换原点为中心点 */animation: spin 2s infinite linear;/* 应用spin动画,时长2秒,无限循环,线性动画 */}.loader div:nth-child(1) {transform: translateZ(40px);/* 在Z轴上移动40像素 */animation-delay: 0s;/* 动画无延迟 */border-top-color: #e74c3c;/* 顶部边框颜色 */}.loader div:nth-child(2) {transform: translateZ(40px);/* 在Z轴上移动40像素 */animation-delay: -0.5s;/* 动画延迟-0.5秒,即提前0.5秒开始 */border-top-color: #9b59b6;/* 顶部边框颜色 */}.loader div:nth-child(3) {transform: translateZ(40px);/* 在Z轴上移动40像素 */animation-delay: -1s;/* 动画延迟-1秒,即提前1秒开始 */border-top-color: #2ecc71;/* 顶部边框颜色 */}.loader div:nth-child(4) {transform: translateZ(40px);/* 在Z轴上移动40像素 */animation-delay: -1.5s;/* 动画延迟-1.5秒,即提前1.5秒开始 */border-top-color: #f1c40f;/* 顶部边框颜色 */}@keyframes outerRotate {0% {transform: rotateY(0deg);/* 初始状态,Y轴旋转0度 */}100% {transform: rotateY(360deg);/* 结束状态,Y轴旋转360度 */}}@keyframes spin {0% {transform: rotateX(0deg) rotateY(0deg);/* 初始状态,X轴和Y轴都旋转0度 */}100% {transform: rotateX(360deg) rotateY(360deg);/* 结束状态,X轴和Y轴都旋转360度 */}}</style>
</head>
<body><div class="loader"><!-- 加载特效的容器 --><div></div><div></div><div></div><div></div></div>
</body>
</html>

十三:扇形百分比加载特效

1.效果展示

在这里插入图片描述

2.HTML完整代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>扇形百分比加载特效</title><style>body, html {margin: 0;padding: 0;/* 设置body和html元素的边距和填充为0 */width: 100%;height: 100%;/* 设置body和html元素的宽度和高度为100% */display: flex;justify-content: center;align-items: center;/* 使用Flexbox布局,使内容居中 */background: radial-gradient(circle, #1e3c72, transparent);/* 设置背景为径向渐变,颜色从#1e3c72渐变到透明 */font-family: Arial, sans-serif;color: white;/* 设置字体和文本颜色 */overflow: hidden;/* 隐藏溢出内容 */}.loader {position: relative;width: 200px;height: 200px;/* 设置加载器的位置和大小 */display: flex;justify-content: center;align-items: center;/* 使用Flexbox布局,使内部内容居中 */}.circle {width: 100%;height: 100%;/* 设置圆的宽度和高度为100% */border-radius: 50%;/* 设置边框圆角为50%,形成圆形 */border: 15px solid transparent;/* 设置边框宽度为15px,颜色为透明 */border-top-color: #3498db;border-right-color: #2ecc71;border-bottom-color: #e74c3c;border-left-color: #f1c40f;/* 分别设置四个边框的颜色 */animation: spinGradient 3s linear infinite;/* 应用动画,使边框颜色旋转 */box-shadow: 0 0 20px rgba(255, 255, 255, 0.5), 0 0 40px rgba(255, 255, 255, 0.5), 0 0 60px rgba(255, 255, 255, 0.5);/* 添加阴影效果 */}@keyframes spinGradient {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }/* 定义动画,从0度旋转到360度 */}.progress {position: absolute;top: 50%;left: 50%;width: 170px;height: 170px;/* 设置进度条的位置和大小 */border-radius: 50%;/* 设置圆角为50%,形成圆形 */background: conic-gradient(rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) var(--progress, 0%), transparent var(--progress, 0%), transparent 100%);/* 使用锥形渐变创建进度条效果 */transform: translate(-50%, -50%);/* 将进度条居中 */}.percentage {position: absolute;bottom: -40px;left: 50%;transform: translateX(-50%);/* 设置百分比文本的位置,并水平居中 */font-size: 24px;font-weight: bold;/* 设置字体大小和加粗 */text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);/* 添加文本阴影效果 */animation: fadeInOut 2s infinite alternate;/* 应用淡入淡出动画 */}@keyframes fadeInOut {0%, 100% { opacity: 1; }50% { opacity: 0.5; }/* 定义淡入淡出动画 */}</style>
</head>
<body><div class="loader"><!-- 加载器的容器 --><div class="circle"></div><!-- 旋转的彩色圆圈 --><div class="progress"></div><!-- 显示加载进度的圆形进度条 --><div class="percentage">0%</div><!-- 显示加载百分比的文本 --></div><script>document.addEventListener("DOMContentLoaded", function() {// 当文档内容加载完成后执行以下代码const progress = document.querySelector(".progress");const percentage = document.querySelector(".percentage");// 获取进度条和百分比文本的DOM元素let loadProgress = 0;// 初始化加载进度为0const simulateLoading = setInterval(() => {// 设置定时器,每隔一定时间更新加载进度loadProgress += 1;// 每次循环加载进度增加1percentage.innerText = loadProgress + "%";// 更新百分比文本的显示progress.style.setProperty('--progress', `${loadProgress * 3.6}deg`);// 更新进度条的CSS变量--progress,以显示加载进度if (loadProgress >= 100) {// 当加载进度达到100%时clearInterval(simulateLoading);// 清除定时器setTimeout(() => {window.location.href = "your-actual-page.html";}, 500);// 延迟500毫秒后跳转到指定页面}}, 100);// 定时器每隔100毫秒执行一次});</script>
</body>
</html>

十四:四色圆环显现加载特效

1.效果展示

在这里插入图片描述

2.HTML完整代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>四色圆环显现加载</title> <style>body, html {height: 100%; /* 高度设为100% */margin: 0; /* 去掉默认的外边距 */display: flex; /* 使用flex布局 */justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */background-color: #f0f0f0; /* 背景颜色设为浅灰色 */
}.loader-container {position: relative; /* 设置相对定位 */width: 150px; /* 宽度设为150px */height: 150px; /* 高度设为150px */
}.loader {border: 16px solid rgba(0, 0, 0, 0.1); /* 设置边框为16px宽,颜色为半透明的黑色 */border-radius: 50%; /* 边框圆角设为50%,形成圆形 */border-left-color: #ff0000; /* 左边框颜色设为红色 */border-right-color: #00ff00; /* 右边框颜色设为绿色 */border-top-color: #0000ff; /* 上边框颜色设为蓝色 */border-bottom-color: #ffff00; /* 下边框颜色设为黄色 */width: 0; /* 初始宽度设为0 */height: 0; /* 初始高度设为0 */animation: spin 1s linear infinite; /* 应用旋转动画,持续1秒,线性速度,无限循环 */position: absolute; /* 设置绝对定位 */top: 50%; /* 顶部偏移设为50% */left: 50%; /* 左侧偏移设为50% */transform: translate(-50%, -50%); /* 使用transform属性将元素移动到父容器的中心 */box-sizing: border-box; /* 使用border-box盒模型 */
}@keyframes spin {0% { transform: rotate(0deg); } /* 动画开始,旋转0度 */100% { transform: rotate(360deg); } /* 动画结束,旋转360度 */
}.loader.loading {width: 150px; /* 宽度设为150px */height: 150px; /* 高度设为150px */border-width: 8px; /* 边框宽度设为8px */animation: expand 2s cubic-bezier(0.42, 0, 0.58, 1) forwards; /* 应用扩展动画,持续2秒,使用贝塞尔曲线控制速度,动画结束后保持最终状态 */
}.loader.hidden {display: none; /* 隐藏加载特效 */
}@keyframes expand {0% {width: 0; /* 动画开始,宽度为0 */height: 0; /* 动画开始,高度为0 */border-width: 16px; /* 动画开始,边框宽度为16px */}100% {width: 150px; /* 动画结束,宽度为150px */height: 150px; /* 动画结束,高度为150px */border-width: 8px; /* 动画结束,边框宽度为8px */}
}</style>
</head>
<body><div class="loader-container"> <!-- 加载特效的容器 --><div class="loader"></div> <!-- 加载特效的元素 --></div>
</body>
<script>// 当DOM内容加载完成后执行document.addEventListener('DOMContentLoaded', () => {const loader = document.querySelector('.loader'); // 获取加载特效的元素let cycleCount = 0; // 循环计数器// 定义一个函数来控制加载特效的循环function animateLoader() {if (cycleCount < 3) {// 添加loading类,触发动画loader.classList.add('loading');loader.classList.remove('hidden'); // 确保特效是可见的// 在动画结束后,隐藏加载特效并准备下一次循环setTimeout(() => {loader.classList.remove('loading');loader.classList.add('hidden'); // 隐藏特效// 设置延时后再次触发动画,模拟循环效果setTimeout(animateLoader, 500); // 延时500毫秒后开始下一次循环cycleCount++; // 增加循环计数器}, 2000); // 动画持续2秒,所以延时2秒执行} else {// 循环三次后,显示加载完成的信息loader.classList.remove('loading', 'hidden'); // 移除所有动画类loader.style.display = 'none'; // 隐藏加载特效元素const content = document.createElement('div'); // 创建一个新的div元素content.textContent = '加载完成!'; // 设置div的文本内容content.style.fontSize = '24px'; // 设置div的字体大小content.style.color = '#333'; // 设置div的字体颜色document.body.appendChild(content); // 将div添加到body中}}// 初始调用动画函数animateLoader();});
</script>
</html>

十五:跷跷板加载特效

1.效果展示

在这里插入图片描述

2.HTML完整代码
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="utf-8"><title>跷跷板加载</title><style>html, body {height: 100%;/* 设置html和body元素的高度为100% */margin: 0;/* 去除html和body元素的外边距 */display: flex;/* 设置html和body元素为flexbox布局 */justify-content: center;/* 使子元素在主轴(水平方向)上居中 */align-items: center;/* 使子元素在交叉轴(垂直方向)上居中 */}.app {width: 100px; /* 可以根据需要调整大小 *//* 设置.app元素的宽度为100px */height: 100px;/* 设置.app元素的高度为100px */background-color: #ffffff;/* 设置.app元素的背景颜色为白色 */display: flex;/* 设置.app元素为flexbox布局 */justify-content: center;/* 使子元素在主轴(水平方向)上居中 */align-items: center;/* 使子元素在交叉轴(垂直方向)上居中 */}.loading {width: 80px;/* 设置.loading73元素的宽度为80px */height: 80px;/* 设置.loading73元素的高度为80px */position: relative;/* 设置.loading73元素的定位方式为相对定位 */display: flex;/* 设置.loading73元素为flexbox布局 */justify-content: center;/* 使子元素在主轴(水平方向)上居中 */align-items: center;/* 使子元素在交叉轴(垂直方向)上居中 */transform-origin: center center;/* 设置.loading73元素的变换原点为中心点 */animation: effbox 3s cubic-bezier(0, 0.6, 1, 0.4) infinite;/* 为.loading73元素应用名为effbox73的动画,动画时长为3秒,使用自定义的贝塞尔曲线作为过渡效果,动画无限循环 */}@keyframes effbox {0% {transform: rotate(-30deg);/* 动画开始时,元素旋转-30度 */}40% {transform: rotate(30deg);/* 动画进行到40%时,元素旋转30度 */}50% {transform: rotate(30deg);/* 动画进行到50%时,元素保持旋转30度 */}90% {transform: rotate(-30deg);/* 动画进行到90%时,元素旋转回-30度 */}100% {transform: rotate(-30deg);/* 动画结束时,元素保持旋转-30度 */}}.loading::before {content: '';/* 为.loading73元素的伪元素::before设置内容为空,以便可以对其应用样式 */width: 100%;/* 设置伪元素的宽度为100% */height: 4px;/* 设置伪元素的高度为4px */background-color: #000;/* 设置伪元素的背景颜色为黑色 */position: absolute;/* 设置伪元素的定位方式为绝对定位 */left: 0;/* 设置伪元素的左边距为0,使其紧贴父元素的左侧 */}.loading::after {content: '';/* 为.loading73元素的伪元素::after设置内容为空,以便可以对其应用样式 */width: 16px;/* 设置伪元素的宽度为16px */height: 16px;/* 设置伪元素的高度为16px */background-color: #ea990c;/* 设置伪元素的背景颜色为橙黄色 */position: absolute;/* 设置伪元素的定位方式为绝对定位 */top: 21px;/* 设置伪元素的顶部边距为21px,以便定位到合适的位置 */left: 0;/* 设置伪元素的左边距为0,使其紧贴父元素的左侧 */border-radius: 3px;/* 设置伪元素的边框圆角为3px,使其呈现圆角效果 */animation: eff 3s ease-in-out infinite;/* 为伪元素应用名为eff73的动画,动画时长为3秒,使用ease-in-out过渡效果,动画无限循环 */}@keyframes eff {0% {transform: translateX(0) rotate(0);/* 动画开始时,伪元素不进行平移和旋转 */}10% {transform: translateX(16px) rotate(90deg);/* 动画进行到10%时,伪元素向右平移16px并旋转90度 */}20% {transform: translateX(32px) rotate(180deg);/* 动画进行到20%时,伪元素继续向右平移至32px并旋转180度 */}30% {transform: translateX(48px) rotate(270deg);/* 动画进行到30%时,伪元素继续向右平移至48px并旋转270度 */}40% {transform: translateX(64px) rotate(360deg);/* 动画进行到40%时,伪元素继续向右平移至64px并完成一圈旋转 */}50% {transform: translateX(64px) rotate(360deg);/* 动画进行到50%时,伪元素保持位置不变和旋转状态 */}60% {transform: translateX(48px) rotate(270deg);/* 动画进行到60%时,伪元素向左平移回48px并旋转回270度 */}70% {transform: translateX(32px) rotate(180deg);/* 动画进行到70%时,伪元素继续向左平移至32px并旋转回180度 */}80% {transform: translateX(16px) rotate(90deg);/* 动画进行到80%时,伪元素继续向左平移至16px并旋转回90度 */}90% {transform: translateX(0) rotate(0);/* 动画进行到90%时,伪元素平移回原位并停止旋转 */}100% {transform: translateX(0) rotate(0);/* 动画结束时,伪元素保持原位和停止旋转的状态 */}}</style>
</head>
<body><div class="app"><!-- 创建一个.app元素作为动画的容器 --><div class="loading"></div></div>
</body>
</html>

END~温轻舟

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/484189.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

微信 创建小程序码-有数量限制

获取小程序码&#xff1a;小程序码为圆图&#xff0c;有数量限制。 目录 文档 接口地址 功能描述 注意事项 请求参数 对接 获取小程序码 调用获取 小程序码示例 总结 文档 接口地址 https://api.weixin.qq.com/wxa/getwxacode?access_tokenaccess_token 功能描述 …

DP、CP、Mn是什么?有什么关系?双径节齿轮又是什么?

有一些刚刚接触齿轮的小伙伴们&#xff0c;经常听到和齿轮相关的是Mn这个代号&#xff0c;有时候拿到图纸会碰到DP和CP的图纸&#xff0c;今天就简单数一数他们三个的关系&#xff1a; 径节DP 齿轮的节距定义为两个相邻齿轮齿上两个相同点之间的距离。在理想情况下&#xff0c…

Linux之socket编程(一)

前言 网络通信的目的 我们已经大致了解了网络通信的过程: 如果主机A想发送数据给主机B, 就需要不断地对本层的协议数据单元(PDU)封装, 然后经过交换设备的转发发送给目的主机, 最终解封装获取数据. 那么网络传输的意义只是将数据由一台主机发送到另一台主机吗&#xff1f; …

视频 的 音频通道提取 以及 视频转URL 的在线工具!

视频 的 音频通道提取 以及 视频转URL 的在线工具&#xff01; 工具地址: https://www.lingyuzhao.top/toolsPage/VideoTo.html 它提供了便捷的方法来处理视频文件&#xff0c;具体来说是帮助用户从视频中提取音频轨道&#xff0c;并将视频转换为可以通过网络访问的URL链接。无…

Java环境变量配置

在Java 的开发环境的准备中&#xff0c;一般安装完JDK之后会进行Java相关的环境变量的配置&#xff0c; 那么&#xff1a; 需要配置哪些环境变量呢&#xff1f;为什么要配置这些环境变量呢&#xff1f; Java 相关的环境变量 JAVA_HOME &#xff0c; &#xff3b;新增环境变量…

sizeof和strlen区分,(好多例子)

sizeof算字节大小 带\0 strlen算字符串长度 \0之前

STM32 DMA直接存储器存取原理及DMA转运模板代码

DMA简介&#xff1a; 存储器映像&#xff1a; 注意&#xff1a;FLASH是只读的&#xff0c;DMA不能写入&#xff0c;但是可以读取写到其他存储器里 变量是存在运行内存SRAM里的&#xff0c;常量&#xff08;const&#xff09;是放在程序存储器FLASH里的 DMA框图&#xff1a; …

释放超凡性能,打造鸿蒙原生游戏卓越体验

11月26日在华为Mate品牌盛典上&#xff0c;全新Mate70系列及多款全场景新品正式亮相。在游戏领域&#xff0c;HarmonyOS NEXT加持下游戏的性能得到充分释放。HarmonyOS SDK为开发者提供了软硬协同的系统级图形加速解决方案——Graphics Accelerate Kit&#xff08;图形加速服务…

【专题】计算机网络之运输层(传输层)

1. 运输层协议概述 1.1 进程之间的通信 (1) 运输层的作用 运输层提供进程间的逻辑通信。 运输层的屏蔽作用&#xff1a; 运输层向高层用户屏蔽了下面网络核心的细节&#xff08;如网络拓扑、所采用的路由选择协议等&#xff09;&#xff0c;使应用进程看见的就是好像在两个运…

四轮阿克曼(前轮转向、后轮驱动)车子仿真控制

目录 写在前面的话调用 libgazebo_ros_ackermann_drive.so 插件属性介绍补充 steering_wheel_joint 配置键盘控制命令 结果演示 写在前面的话 这里增加一个四轮阿克曼&#xff08;前轮转向、后轮驱动&#xff09;车子仿真控制的版本&#xff0c;使用的事gazebo的插件 参考资料…

移植NIOS10.1工程,NIOS10.1路径修改

移植NIOS10.1工程&#xff0c;NIOS10.1路径修改 因工程的需要&#xff0c;使用的NIOS10.1&#xff0c;比较老&#xff0c;这个版本的路径是使用的绝对路径&#xff0c;导致移植工程市回报路径的错误&#xff0c;在13.1之后改为了相对路径&#xff0c;不存在这个问题。 需要修…

【ElasticSearch】倒排索引与ik分词器

ElasticSearch&#xff0c;简称ES(后文将直接使用这一简称)&#xff0c;是一款卓越的开源分布式搜索引擎。其独特之处在于其近乎实时的数据检索能力&#xff0c;为用户提供了迅速、高效的信息查询体验。 它能够解决全文检索&#xff0c;模糊查询、数据分析等问题。那么它的搜索…

【从零开始的LeetCode-算法】74. 搜索二维矩阵

给你一个满足下述两条属性的 m x n 整数矩阵&#xff1a; 每行中的整数从左到右按非严格递增顺序排列。每行的第一个整数大于前一行的最后一个整数。 给你一个整数 target &#xff0c;如果 target 在矩阵中&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。…

基于图像变化检测的毁伤效果评估——学习笔记

前言 闲的无聊&#xff0c;看看论文。 基本评估步骤 第一步&#xff1a;图像预处理。通过图像配准、不同波段提取、图像校正、图像滤波等手段&#xff0c;统一图像格式&#xff08;文中统一为灰度图&#xff09;&#xff0c;得到待检测图像&#xff1b; 第二步&#xff1a;…

容易被遗忘的测试用例

网络服务器启动了吗&#xff1f;应用程序服务器启动了吗&#xff1f;数据库上线了吗&#xff1f;测试数据是否预先加载到数据库中&#xff1f;每当我们准备开始测试应用程序时&#xff0c;一切都应该已经准备妥当。 然而&#xff0c;当测试开始后&#xff0c;我们可能会漏掉一些…

从excel数据导入到sqlsever遇到的问题

1、格式问题时间格式&#xff0c;excel中将日期列改为日期未生效&#xff0c;改完后&#xff0c;必须手动单击这个单元格才能生效&#xff0c;那不可能一个一个去双击。解决方案如下 2、导入之后表字段格式问题&#xff0c;数据类型的用navicat导入之后默认是nvarchar类型的&a…

【算法】图论——树的重心

目录 题目解析 算法原理 图的存储 算法实现 题目解析 题目解析 给定一颗树&#xff0c;树中包含n个结点&#xff08;编号&#xff09;和n-1条无向边。请找到树的重心&#xff0c;并输出将重心删除后&#xff0c;剩余各个连通块中点数的最大值。 什么是重心&#xff1f; 重…

全面UI组件库Telerik 2024 Q4全新发布——官方宣布支持.NET 9

Telerik DevCraft包含一个完整的产品栈来构建您下一个Web、移动和桌面应用程序。它使用HTML和每个.NET平台的UI库&#xff0c;加快开发速度。Telerik DevCraft提供最完整的工具箱&#xff0c;用于构建现代和面向未来的业务应用程序&#xff0c;目前提供UI for ASP.NET MVC、Ken…

数据分析(一): 掌握STDF 掌握金钥匙-码农切入半导体的捷径

中国的半导体行业必然崛起&#xff01;看清这个大势&#xff0c;就会有很多机会。 今天&#xff0c;我们一起来了解一下半导体行业的一朵金花&#xff1a;STDF。 实际上这只是一种文件格式&#xff0c;但是当你熟练掌握解析这种文件的时候&#xff0c;你就已经打开在这个基础…

【批处理脚本】更改Windows系统中的 hosts 解析文件

概述 作用 修改 Windows 系统中的 hosts 文件&#xff0c;可以实现 插入 或 删除 条目。该脚本允许用户以管理员权限执行&#xff0c;将特定的域名解析到指定的 IP 地址 应用场景 非常适用于需要频繁或批量修改 hosts 文件的场景&#xff1a; 屏蔽网站、域名重定向、DNS 污染防…