当前位置：首页 > news >正文

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

news 2025/11/15 7:35:47

文章目录

- - 十二：铜钱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~温轻舟

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

文章目录十二：铜钱3D圆环加载特效1.效果展示2.HTML完整代码十三：扇形百分比加载特效1.效果展示2.HTML完整代码十四：四色圆环显现加载特效1.效果展示2.HTML完整代码十五：跷跷板加载特效1.效果展示2.HTML完整代码十二&#xff…...

编程日记 2024/12/5 9:10:40

详解八大排序（六）------（三路划分，自省排序，归并排序外排序）

文章目录 1. 快排之三路划分1. 1 三路划分的诞生由来1. 2 三路划分的具体思路1. 3 代码实现 2. 快排之自省排序2. 1 自省排序的目的2. 2 自省排序的思路2. 3 自省排序的实现代码 3. 归并排序外排序3. 1 外排序介绍3. 2 归并排序外排序的思路3. 3 归并排序的实现代码 1. 快排之三…...

编程日记 2024/12/5 9:08:38

【Java从入门到放弃之从字节码的角度异常处理】

从字节码的角度异常处理生成字节码Javap 命令的使用基本语法字节码文件testTryCatchtestTryCatchFinallytestTryWithResource 如果大家对与java的异常使用还有问题或者还不太了解，建议先看一下我之前写的Java异常了解一下基本的异常处理知识，再看这篇…...

编程日记 2024/12/5 9:06:36

Java虚拟机（JVM）中的元空间（Metaspace）一些关键点的总结

• 元空间的引入：在Java 8中，JVM的内存结构经历了变化，其中方法区被替代为元空间（Metaspace）。元空间用于存储类的元数据信息，包括类的名称、方法、字段等信息。 • 存储位置：与方法区不同&…...

编程日记 2024/12/5 9:03:32

小程序模版与配置

WXML模版语法一、数据绑定 1、数据绑定的基本原则 （1）在data中定义数据 （2）在WXML中使用数据 2、在data中定义页面的数据 3、Mustache语法的格式（双大括号） 4、Mustache语法的应用场景 （…...

编程日记 2024/12/5 9:00:27

当大的div中有六个小的div，上面三个下面三个，当外层div高变大的时候我希望里面的小的div的高也变大

问： 当大的div中有六个小的div，上面三个下面三个，当外层div高变大的时候我希望里面的小的div的高也变大回答： 这时候我们就不能写死六个小的div的高度，否则上下的小的div的间距就会变大，因为他们的高度…...

编程日记 2024/12/5 8:58:22

MySQL——操作

一.库的操作 1.基本操作创建数据库 create database 数据库名称; 查看数据库 show databases; 删除数据库 drop database 数据库名称; 执行删除之后的结果: 数据库内部看不到对应的数据库对应的数据库文件夹被删除，级联删除，里面的数据表全部被删…...

编程日记 2024/12/5 8:57:19

Python语法之正则表达式详解以及re模块中的常用函数

正则表达式详解及re模块中的常用函数概念、作用和步骤概念： 本身也是一个字符串，其中的字符具有特殊含义，将来我们可以根据这个字符串【正则表达式】去处理其他的字符串，比如可以对其他字符串进行匹配，切分&#xf…...

编程日记 2024/12/5 8:56:18

《地球化学》

《地球化学》主要报道近代地球化学, 特别是其主要分支学科, 如岩石地球化学、元素地球化学、有机地球化学、环境地球化学、矿床地球化学、实验地球化学、生物地球化学、天体化学、计算地球化学、分析地球化学、海洋地球化学、沉积地球化学、纳米地球化学、油气地球化学和同位素…...

编程日记 2024/12/5 8:55:15

alpine openssl 编译

./config no-shared --prefix/usr/local/openssl apk add musl-dev gcc g apk add linux-headers ssh root 登录编辑 SSH 配置文件打开 SSH 配置文件 /etc/ssh/sshd_config： vi /etc/ssh/sshd_config PermitRootLogin yes...

编程日记 2024/12/5 8:54:14

【AI模型对比】AI新宠Kimi与ChatGPT的全面对比：技术、性能、应用全揭秘

文章目录 Moss前沿AI技术背景Kimi人工智能的技术积淀ChatGPT的技术优势详细对比列表模型研发Kimi大模型的研发历程ChatGPT的发展演进参数规模与架构Kimi大模型的参数规模解析ChatGPT的参数体系模型表现与局限性Kimi大模型的表现ChatGPT的表现结论：如何选择适合自…...

编程日记 2024/12/5 8:51:11

【C#设计模式(17)——迭代器模式(Iterator Pattern)】

前言迭代器模式可以使用统一的接口来遍历不同类型的集合对象，而不需要关心其内部的具体实现。代码 //迭代器接口 public interface Iterator {bool HashNext();object Next(); } //集合接口 public interface Collection {Iterator CreateIterator(); } //元素迭…...

编程日记 2024/12/5 8:50:10

二、部署docker

二、安装与部署 2.1 安装环境概述 Docker划分为CE和EE，CE为社区版（免费，支持周期三个月），EE为企业版（强调安全，付费使用）。 Docker CE每月发布一个Edge版本（17.03&…...

编程日记 2024/12/5 8:49:07

FFmpeg 4.3 音视频-多路H265监控录放C++开发十九，ffmpeg封装

封装就是将一个h264，和一个aac文件重新封装成一个mp4文件。这里我们的h264 和 aac都是来源于另一个mp4文件，也就是说，我们会将 in.mp4文件解封装成一路videoavstream 和一路 audioavstream，然后将这两路的 avstream 合并成一…...

编程日记 2024/12/5 8:47:04

ML 系列：第 39 节 - 估计方法：最大似然估计 (MLE)

目录一、说明二、什么是最大似然估计 (MLE)？ 2.1 理解公式 2.2 MLE 的定义 2.3 我们何时使用 MLE？ 三、结论一、说明在统计学领域，我们经常需要根据观察到的数据估计统计模型的参数。为此目的广泛使用的两种关键方法是最大似然估计 ( MLE…...

编程日记 2024/12/5 8:45:01

Linux 权限管理：用户分类、权限解读与常见问题剖析

🌟 快来参与讨论💬，点赞👍、收藏⭐、分享📤，共创活力社区。🌟 🚩用通俗易懂且不失专业性的文字，讲解计算机领域那些看似枯燥的知识点🚩 目录 💯L…...

编程日记 2024/12/5 8:41:58

网络原理之 UDP 协议

目录 1. UDP 协议报文格式 2. UDP 的特点 (1) 无连接 (2) 不可靠 (3) 面向数据报 (4) 全双工 3. 基于 UDP 的应用层协议前文是：UDP 的使用首先了解一下基础知识： 1. UDP 协议报文格式传输层最重要的协议有两个，一个是 TCP&#x…...

编程日记 2024/12/5 8:35:52

并发框架disruptor实现生产-消费者模式

Disruptor是LMAX公司开源的高性能内存消息队列，单线程处理能力可达600w订单/秒。本文将使用该框架实现生产-消费者模式。一、框架的maven依赖 <dependency><groupId>com.lmax<…...

编程日记 2024/12/5 8:31:48

【Vivado】xdc约束文件编写

随手记录一下项目中学到的约束文件编写技巧。时序约束创建生成时钟参考链接： Vivado Design Suite Tcl Command Reference Guide (UG835) Vivado Design Suite User Guide: Using Constraints (UG903) 通过Clocking Wizard IP创建的时钟（MMCM或…...

编程日记 2024/12/5 8:30:47

Redis使用场景-缓存-缓存雪崩

前言之前在针对实习面试的博文中讲到Redis在实际开发中的生产问题，其中缓存穿透、击穿、雪崩在面试中问的最频繁，本文加了图解，希望帮助你更直观的了解缓存雪崩😀 （放出之前写的针对实习面试的关于Redis生产问题的博…...

编程日记 2024/12/5 8:28:44

【人工智能】神经网络的优化器optimizer（二）：Adagrad自适应学习率优化器

一.自适应梯度算法Adagrad概述 Adagrad（Adaptive Gradient Algorithm）是一种自适应学习率的优化算法，由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率，适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...

编程新知 2025/11/7 19:36:27

渗透实战PortSwigger靶场-XSS Lab 14：大多数标签和属性被阻止

编程新知 2025/11/12 19:48:48

selenium学习实战【Python爬虫】

selenium学习实战【Python爬虫】文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码五、报告文件爬取5.1 提…...

编程新知 2025/11/12 5:18:58

HashMap中的put方法执行流程（流程图）

1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中，其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下： 初始判断与哈希计算： 首先，putVal 方法会检查当前的 table（也就…...

编程新知 2025/11/12 9:56:33

C# 表达式和运算符(求值顺序)

求值顺序表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生变化。例如，已知表达式3*52，依照子表达式的求值顺序，有两种可能的结果，如图9-3所示。如果乘法先执行，结果是17。如果5…...

编程新知 2025/11/12 22:14:37

如何应对敏捷转型中的团队阻力

应对敏捷转型中的团队阻力需要明确沟通敏捷转型目的、提升团队参与感、提供充分的培训与支持、逐步推进敏捷实践、建立清晰的奖励和反馈机制。其中，明确沟通敏捷转型目的尤为关键，团队成员只有清晰理解转型背后的原因和利益，才能降低对变化的…...

编程新知 2025/11/13 19:01:29

内窥镜检查中基于提示的息肉分割|文献速递-深度学习医疗AI最新文献

Title 题目 Prompt-based polyp segmentation during endoscopy 内窥镜检查中基于提示的息肉分割 01 文献速递介绍以下是对这段英文内容的中文翻译： ### 胃肠道癌症的发病率呈上升趋势，且有年轻化倾向（Bray等人，2018&#x…...

编程新知 2025/11/11 16:54:55

云原生安全实战：API网关Envoy的鉴权与限流详解

🔥「炎码工坊」技术弹药已装填！ 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】一、基础概念 1. API网关作为微服务架构的统一入口，负责路由转发、安全控制、流量管理等核心功能。 2. Envoy 由Lyft开源的高性能云原生…...

编程新知 2025/11/10 5:49:13

OPENCV图形计算面积、弧长API讲解（1）

一.OPENCV图形面积、弧长计算的API介绍之前我们已经把图形轮廓的检测、画框等功能讲解了一遍。那今天我们主要结合轮廓检测的API去计算图形的面积，这些面积可以是矩形、圆形等等。图形面积计算和弧长计算常用于车辆识别、桥梁识别等重要功能，常用的API…...

编程新知 2025/11/14 22:50:14

基于Java项目的Karate API测试

Karate 实现了可以只编写Feature 文件进行测试，但是对于熟悉Java语言的开发或是测试人员，可以通过编程方式集成 Karate 丰富的自动化和数据断言功能。本篇快速介绍在Java Maven项目中编写和运行测试的示例。创建Maven项目最简单的创建项目的方式就是创建一个目录，里面…...

编程新知 2025/11/5 23:09:37

文章目录

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

1.效果展示

2.HTML完整代码

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

1.效果展示

2.HTML完整代码

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

1.效果展示

2.HTML完整代码

十五：跷跷板加载特效

1.效果展示

2.HTML完整代码

相关文章：

2.`HTML`完整代码

2.`HTML`完整代码

2.`HTML`完整代码

2.`HTML`完整代码