前端开发 之 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~温轻舟
相关文章：
前端开发 之 15个页面加载特效下【附完整源码】
文章目录 十二：铜钱3D圆环加载特效1.效果展示2.HTML完整代码 十三：扇形百分比加载特效1.效果展示2.HTML完整代码 十四：四色圆环显现加载特效1.效果展示2.HTML完整代码 十五：跷跷板加载特效1.效果展示2.HTML完整代码 十二ÿ…...
详解八大排序（六）------（三路划分，自省排序，归并排序外排序）
文章目录 1. 快排之三路划分1. 1 三路划分的诞生由来1. 2 三路划分的具体思路1. 3 代码实现 2. 快排之自省排序2. 1 自省排序的目的2. 2 自省排序的思路2. 3 自省排序的实现代码 3. 归并排序外排序3. 1 外排序介绍3. 2 归并排序外排序的思路3. 3 归并排序的实现代码 1. 快排之三…...
【Java从入门到放弃 之 从字节码的角度异常处理】
从字节码的角度异常处理 生成字节码Javap 命令的使用基本语法 字节码文件testTryCatchtestTryCatchFinallytestTryWithResource 如果大家对与java的异常使用还有问题或者还不太了解，建议先看一下我之前写的Java异常了解一下基本 的异常处理知识，再看这篇…...
Java虚拟机（JVM）中的元空间（Metaspace）一些关键点的总结
• 元空间的引入：在Java 8中，JVM的内存结构经历了变化，其中方法区被替代为元空间（Metaspace）。元空间用于存储类的元数据信息，包括类的名称、方法、字段等信息。 • 存储位置：与方法区不同&…...
小程序 模版与配置
WXML模版语法 一、数据绑定 1、数据绑定的基本原则 （1）在data中定义数据 （2）在WXML中使用数据 2、在data中定义页面的数据 3、Mustache语法的格式（双大括号） 4、Mustache语法的应用场景 （…...
当大的div中有六个小的div，上面三个下面三个，当外层div高变大的时候我希望里面的小的div的高也变大
问： 当大的div中有六个小的div，上面三个下面三个，当外层div高变大的时候我希望里面的小的div的高也变大 回答： 这时候我们就不能写死六个小的div的高度，否则上下的小的div的间距就会变大，因为他们的高度…...
MySQL——操作
一.库的操作 1.基本操作 创建数据库 create database 数据库名称; 查看数据库 show databases; 删除数据库 drop database 数据库名称; 执行删除之后的结果: 数据库内部看不到对应的数据库 对应的数据库文件夹被删除，级联删除，里面的数据表全部被删…...
Python语法之正则表达式详解以及re模块中的常用函数
正则表达式详解及re模块中的常用函数 概念、作用和步骤 概念： 本身也是一个字符串，其中的字符具有特殊含义，将来我们可以根据这个字符串【正则表达式】去处理其他的字符串，比如可以对其他字符串进行匹配，切分…...
《地球化学》
《地球化学》主要报道近代地球化学, 特别是其主要分支学科, 如岩石地球化学、元素地球化学、有机地球化学、环境地球化学、矿床地球化学、实验地球化学、生物地球化学、天体化学、计算地球化学、分析地球化学、海洋地球化学、沉积地球化学、纳米地球化学、油气地球化学和同位素…...
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...
【AI模型对比】AI新宠Kimi与ChatGPT的全面对比：技术、性能、应用全揭秘
文章目录 Moss前沿AI技术背景Kimi人工智能的技术积淀ChatGPT的技术优势 详细对比列表模型研发Kimi大模型的研发历程ChatGPT的发展演进 参数规模与架构Kimi大模型的参数规模解析ChatGPT的参数体系 模型表现与局限性Kimi大模型的表现ChatGPT的表现 结论：如何选择适合自…...
【C#设计模式(17)——迭代器模式(Iterator Pattern)】
前言 迭代器模式可以使用统一的接口来遍历不同类型的集合对象，而不需要关心其内部的具体实现。 代码 //迭代器接口 public interface Iterator {bool HashNext();object Next(); } //集合接口 public interface Collection {Iterator CreateIterator(); } //元素迭…...
二、部署docker
二、安装与部署 2.1 安装环境概述 Docker划分为CE和EE，CE为社区版（免费，支持周期三个月），EE为企业版（强调安全，付费使用）。 Docker CE每月发布一个Edge版本（17.03&…...
FFmpeg 4.3 音视频-多路H265监控录放C++开发十九，ffmpeg封装
封装就是将 一个h264，和一个aac文件重新封装成一个mp4文件。 这里我们的h264 和 aac都是来源于另一个mp4文件，也就是说，我们会将 in.mp4文件解封装成一路videoavstream 和 一路 audioavstream，然后 将这两路的 avstream 合并成一…...
ML 系列：第 39 节 - 估计方法：最大似然估计 (MLE)
目录 一、说明 二、什么是最大似然估计 (MLE)？ 2.1 理解公式 2.2 MLE 的定义 2.3 我们何时使用 MLE？ 三、结论 一、说明 在统计学领域，我们经常需要根据观察到的数据估计统计模型的参数。为此目的广泛使用的两种关键方法是最大似然估计 ( MLE…...
Linux 权限管理：用户分类、权限解读与常见问题剖析
🌟 快来参与讨论💬，点赞👍、收藏⭐、分享📤，共创活力社区。🌟 🚩用通俗易懂且不失专业性的文字，讲解计算机领域那些看似枯燥的知识点🚩 目录 💯L…...
网络原理之 UDP 协议
目录 1. UDP 协议报文格式 2. UDP 的特点 (1) 无连接 (2) 不可靠 (3) 面向数据报 (4) 全双工 3. 基于 UDP 的应用层协议 前文是：UDP 的使用 首先了解一下基础知识： 1. UDP 协议报文格式 传输层最重要的协议有两个，一个是 TCP&#x…...
并发框架disruptor实现生产-消费者模式
Disruptor是LMAX公司开源的高性能内存消息队列，单线程处理能力可达600w订单/秒。本文将使用该框架实现生产-消费者模式。一、框架的maven依赖 <!-- https://mvnrepository.com/artifact/com.lmax/disruptor --><dependency><groupId>com.lmax<…...
【Vivado】xdc约束文件编写
随手记录一下项目中学到的约束文件编写技巧。 时序约束 创建生成时钟 参考链接： Vivado Design Suite Tcl Command Reference Guide (UG835) Vivado Design Suite User Guide: Using Constraints (UG903) 通过Clocking Wizard IP创建的时钟（MMCM或…...
Redis使用场景-缓存-缓存雪崩
前言 之前在针对实习面试的博文中讲到Redis在实际开发中的生产问题，其中缓存穿透、击穿、雪崩在面试中问的最频繁，本文加了图解，希望帮助你更直观的了解缓存雪崩😀 （放出之前写的针对实习面试的关于Redis生产问题的博…...
概率论相关知识随记
作为基础知识的补充，随学随记，方便以后查阅。 概率论相关知识随记 期望（Expectation）期望的定义离散型随机变量的期望示例：掷骰子的期望 连续型随机变量的期望示例：均匀分布的期望 期望的性质线性性质期望的…...
【PlantUML系列】序列图（二）
目录 一、参与者 二、消息交互顺序 三、其他技巧 3.1 改变参与者的顺序 3.2 使用 as 重命名参与者 3.3 注释 3.4 页眉和页脚 一、参与者 使用 participant、actor、boundary、control、entity 和 database 等关键字来定义不同类型的参与者。例如： Actor&…...
WPF+MVVM案例实战与特效（三十四）- 日志管理：使用 log4net 实现高效日志记录
文章目录 1、概述2、日志案例实现1、LogHelper 类详解2、代码解释3、配置文件4、实际应用案例场景 1：记录系统运行日志场景 2：记录数据库操作日志场景 3：记录 HTTP 请求日志5、总结1、概述 在WPF软件开发中，良好的日志记录机制对于系统的调试、维护和性能优化至关重要。lo…...
前端测试框架 jasmine 的使用
最近的项目在使用AngulaJs,对JS代码的测试问题就摆在了面前。通过对比我们选择了 Karma jasmine ,使用 Jasmine做单元测试 ，Karma 自动化完成，当然了如果使用 Karma jasmine 前提是必须安装 Nodejs。 安装好 Nodejs ，使用 npm 安装好必要…...
Qwen2-VL视觉大模型微调实战：LaTex公式OCR识别任务（完整代码）
《SwanLab机器学习实战教程》是一个主打「开箱即用」的AI训练系列教程，我们致力于提供完善的数据集、源代码、实验记录以及环境安装方式，手把手帮助你跑起训练，解决问题。 Qwen2-VL是通义千问团队最近开源的大语言模型，由阿里云通…...
「Mac玩转仓颉内测版42」小学奥数篇5 - 圆和矩形的面积计算
本篇将通过 Python 和 Cangjie 双语解决简单的几何问题：计算圆的面积和矩形的面积。通过这道题，学生将掌握如何使用公式解决几何问题，并学会用编程实现数学公式。 关键词 小学奥数Python Cangjie几何计算 一、题目描述 编写一个程序&#…...
Groom Blender to UE5
Groom Blender to UE5 - Character & Animation - Epic Developer Community Forums Hello, 你好， While exporting my “groom” from blender to UE5, I notice that the curves have a minimal resolution in Unreal. However I would like to get the same …...
开发一套ERP 第十弹 图片作为配置文件,本地读取图片,定时更新图片类型
echo Hello World在同一数据库中在建一个图床数据表,产品一,一对应,图片命名 最优的方案，使用 rust 在构建一个 http server 用于管理非数据库资源,也可以将来对接不同的图床，部署方便 考虑到数据库资源和图片资源,都可以被远程访问这种方法最佳...
第七十六条：努力保持故障的原子性
当对象抛出异常之后，通常我们期望这个对象仍然保持在一种定义良好的可用状态之中，即使失败是发生在执行某个操作的过程中间。对于受检的异常而言，这尤为重要，因为调用者期望能从这种异常中进行恢复。一般而言，失败的方…...
Word分栏后出现空白页解决方法
Word分栏后出现空白页解决方法 只需要在后面的空白页设置相同的页面布局(分栏格式)，然后按Ctrl backspace即可删除该空白页。 参考文章：Word分栏出现空白怎么解决。...