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

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

news 2025/12/24 7:40:18

文章目录

- - 一：彩球环绕加载特效
  - - - 1.效果展示
      - 2.`HTML`完整代码
  - 二：跷跷板加载特效
  - - - 1.效果展示
      - 2.`HTML`完整代码
  - 三：两个圆形加载特效
  - - - 1.效果展示
      - 2.`HTML`完整代码
  - 四：半环加载特效
  - - - 1.效果展示
      - 2.`HTML`完整代码
  - 五：音乐波动加载特效
  - - - 1.效果展示
      - 2.`HTML`完整代码
  - 六：四色圆环加载特效
  - - - 1.效果展示
      - 2.`HTML`完整代码
  - 七：圆环加载特效
  - - - 1.效果展示
      - 2.`HTML`完整代码

一：彩球环绕加载特效

1.效果展示

在这里插入图片描述

2.`HTML`完整代码

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="utf-8"><title>彩球环绕加载</title><style>body, html {height: 100%;/* 设置body和html元素高度为100% */margin: 0;/* 设置外边距为0 */display: flex;/* 使用弹性盒布局 */justify-content: center;/* 水平居中 */align-items: center;/* 垂直居中 */}.app {width: 100%;/* 设置宽度为100% */height: 100vh;/* 设置高度为视口高度的100% */background-color: #ffffff;/* 设置背景颜色为白色 */position: relative;/* 设置定位方式为相对定位 */display: flex;/* 使用弹性盒布局 */justify-content: center;/* 水平居中 */align-items: center;/* 垂直居中 */}.loading {width: 150px;/* 设置宽度为150px */height: 150px;/* 设置高度为150px */position: relative;/* 设置定位方式为相对定位 */display: flex;/* 使用弹性盒布局 */justify-content: center;/* 水平居中 */align-items: center;/* 垂直居中 */}.circle {width: 24px;/* 设置圆形宽度为24px */height: 24px;/* 设置圆形高度为24px */border-radius: 50%;/* 设置边框圆角为50%，使其成为圆形 */position: absolute;/* 设置定位方式为绝对定位 */animation: eff 2.5s ease-in-out infinite;/* 应用动画，持续时间为2.5秒，缓动效果为ease-in-out，无限循环 */mix-blend-mode: darken;/* 设置混合模式为darken */filter: blur(2px);/* 设置模糊效果为2px */}/* 为每个圆形设置不同的背景颜色和动画延迟 */.circle:nth-child(1) { background-color: #FF0000; animation-delay: 0s; }/* 第一个圆形，红色，无延迟 */.circle:nth-child(2) { background-color: #00FF00; animation-delay: 0.5s; }/* 第二个圆形，绿色，延迟0.5秒 */.circle:nth-child(3) { background-color: #0000FF; animation-delay: 1s; }/* 第三个圆形，蓝色，延迟1秒 */.circle:nth-child(4) { background-color: #FFFF00; animation-delay: 1.5s; }/* 第四个圆形，黄色，延迟1.5秒 */.circle:nth-child(5) { background-color: #FF00FF; animation-delay: 2s; }/* 第五个圆形，紫色，延迟2秒 */@keyframes eff {0% { transform: rotate(0deg) translateX(70px) rotate(0deg); }/* 初始状态，无旋转和位移 */20% { transform: rotate(72deg) translateX(70px) rotate(-72deg); }/* 20%时，旋转72度并位移，然后反向旋转72度 */40% { transform: rotate(144deg) translateX(70px) rotate(-144deg); }/* 40%时，继续旋转并位移，然后反向旋转 */60% { transform: rotate(216deg) translateX(70px) rotate(-216deg); }/* 60%时，继续旋转并位移，然后反向旋转 */80% { transform: rotate(288deg) translateX(70px) rotate(-288deg); }/* 80%时，继续旋转并位移，然后反向旋转 */100% { transform: rotate(360deg) translateX(70px) rotate(-360deg); }/* 100%时，完成一圈旋转并回到初始位置 */}</style>
</head>
<body><div class="app"><div class="loading"><!-- 加载效果容器 --><div class="circle"></div><!-- 圆形1 --><div class="circle"></div><!-- 圆形2 --><div class="circle"></div><!-- 圆形3 --><div class="circle"></div><!-- 圆形4 --><div class="circle"></div><!-- 圆形5 --></div></div>
</body>
</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;/* 设置外边距为0 */display: flex;/* 使用弹性盒布局 */justify-content: center;/* 水平居中 */align-items: center;/* 垂直居中 */background-color: #282c34;/* 设置背景颜色为深灰色 */}.app {width: 200px; /* 设置app容器宽度为200px，增大尺寸以展示更多细节 */height: 200px;/* 设置app容器高度为200px */display: flex;/* 使用弹性盒布局 */justify-content: center;/* 水平居中 */align-items: center;/* 垂直居中 */}.loading73 {width: 100px;/* 设置加载动画元素宽度为100px */height: 100px;/* 设置加载动画元素高度为100px */position: relative;/* 设置定位方式为相对定位 */display: flex;/* 使用弹性盒布局 */justify-content: center;/* 水平居中 */align-items: center;/* 垂直居中 */transform-origin: center center;/* 设置变换原点为中心点 */animation: effbox73 4s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;/* 应用动画，持续时间为4秒，缓动效果为cubic-bezier，无限循环 */}@keyframes effbox73 {0% {transform: rotate(-45deg);/* 初始状态旋转-45度 */}25% {transform: rotate(45deg);/* 25%时旋转45度 */}50% {transform: rotate(-45deg);/* 50%时再次旋转-45度 */}75% {transform: rotate(45deg);/* 75%时再次旋转45度 */}100% {transform: rotate(-45deg);/* 100%时回到初始状态旋转-45度 */}}.loading73::before {content: '';/* 伪元素必须设置content属性 */width: 100%;/* 设置伪元素宽度为100% */height: 6px;/* 设置伪元素高度为6px */background: linear-gradient(to right, #ff7e5f, #feb47b);/* 设置背景为线性渐变颜色 */position: absolute;/* 设置定位方式为绝对定位 */left: 0;/* 设置左边距为0 */top: 50%;/* 设置上边距为50% */transform: translateY(-50%);/* 垂直居中 */border-radius: 3px;/* 设置边框圆角为3px */}.loading73::after {content: '';/* 伪元素必须设置content属性 */width: 20px;/* 设置伪元素宽度为20px */height: 20px;/* 设置伪元素高度为20px */background: radial-gradient(circle, #ea990c, #ff5f6d);/* 设置背景为径向渐变颜色 */position: absolute;/* 设置定位方式为绝对定位 */top: 15px;/* 设置上边距为15px */left: -10px;/* 设置左边距为-10px，使其部分移出父元素 */border-radius: 50%;/* 设置边框圆角为50%，使其成为圆形 */animation: eff73 4s ease-in-out infinite;/* 应用动画，持续时间为4秒，缓动效果为ease-in-out，无限循环 */box-shadow: 0 0 10px rgba(255, 95, 109, 0.7);/* 设置盒阴影效果 */}@keyframes eff73 {0% {transform: translateX(0) scale(1);/* 初始状态不移动，不缩放 */}20% {transform: translateX(40px) scale(1.2) rotate(90deg);/* 20%时向右移动40px，缩放1.2倍，旋转90度 */}40% {transform: translateX(80px) scale(1) rotate(180deg);/* 40%时向右移动80px，不缩放，旋转180度 */}60% {transform: translateX(40px) scale(0.8) rotate(270deg);/* 60%时向右移动40px，缩放0.8倍，旋转270度 */}80% {transform: translateX(0) scale(1) rotate(360deg);/* 80%时不移动，不缩放，旋转360度 */}100% {transform: translateX(0) scale(1);/* 100%时回到初始状态不移动，不缩放 */}}</style>
</head>
<body><div class="app"><div class="loading73"></div></div>
</body>
</html>

三：两个圆形加载特效

1.效果展示

在这里插入图片描述

2.`HTML`完整代码

<!DOCTYPE html>
<html lang="zh"><head><meta charset="utf-8"><title>两个圆形加载</title><style>body, html {height: 100%; /* 设置高度为100% */margin: 0; /* 设置外边距为0 */display: flex; /* 设置布局为弹性盒布局 */justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */}.app{width: 100%; /* 宽度为100% */height: 100vh; /* 高度为视口高度的100% */background-color: #ffffff; /* 背景颜色为白色 */position: relative; /* 设置定位方式为相对定位 */display: flex; /* 设置布局为弹性盒布局 */justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */
}
.loading{width: 100px; /* 宽度为100像素 */height: 60px; /* 高度为60像素 */position: relative; /* 设置定位方式为相对定位 */display: flex; /* 设置布局为弹性盒布局 */justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */
}
.circle{width: 24px; /* 宽度为24像素 */height: 24px; /* 高度为24像素 */border-radius: 50%; /* 边框圆角为50%，形成圆形 */position: absolute; /* 设置定位方式为绝对定位 */animation: eff 2s ease-in-out infinite; /* 应用动画eff64，持续2秒，缓动效果为ease-in-out，无限循环 */mix-blend-mode: darken; /* 混合模式为darken */filter: blur(2px); /* 模糊效果为2像素 */
}
.circle:nth-child(1){background-color: #00FFFF; /* 背景颜色为青色 */
}
.circle:nth-child(2) {background-color: #FFFF00; /* 背景颜色为黄色 */animation-delay: 1s; /* 动画延迟1秒执行 */
}
@keyframes eff{0%, 50%, 100% {transform: translateX(0) /* 在0%、50%、100%时，水平位移为0 */}25% {transform: translateX(70%) /* 在25%时，水平位移为70% */}75% {transform: translateX(-70%) /* 在75%时，水平位移为-70% */}
}</style></head><body><div class="app"><div class="loading"><div class="circle"></div><div class="circle"></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 {display: flex; /* 设置body为弹性盒布局 */justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */height: 100vh; /* 设置高度为视口高度的100% */margin: 0; /* 设置外边距为0 */background-color: #282c34; /* 设置背景颜色为深灰色 */overflow: hidden; /* 防止滚动条出现，隐藏超出视口的内容 */
}.loader {position: relative; /* 设置相对定位 */width: 100px; /* 设置宽度为100像素 */height: 100px; /* 设置高度为100像素 */
}.loader::before, .loader::after {content: ''; /* 伪元素必须设置content属性 */position: absolute; /* 设置绝对定位 */top: 0; /* 设置顶部距离为0 */left: 0; /* 设置左边距离为0 */width: 100%; /* 设置宽度为100% */height: 100%; /* 设置高度为100% */border-radius: 50%; /* 设置边框圆角为50%，形成圆形 */border: 6px solid transparent; /* 设置边框为6像素宽，透明色 */border-top-color: #3498db; /* 设置顶部边框颜色为蓝色 */animation: spin 1.5s linear infinite, gradientColor 6s ease infinite; /* 应用两个动画：旋转和颜色渐变，无限循环 */
}.loader::after {border-top-color: #ff5733; /* 另一层使用橙色作为顶部边框颜色 */animation-delay: -0.75s; /* 使两层动画错开，形成视觉效果差异 */transform: scale(0.8); /* 使第二层稍小一些，形成层次感 */
}@keyframes spin {0% {transform: rotate(0deg); /* 初始状态，不旋转 */}100% {transform: rotate(360deg); /* 结束状态，旋转360度 */}
}@keyframes gradientColor {0%, 100% {border-top-color: #3498db; /* 动画开始和结束时，顶部边框颜色为蓝色 */}50% {border-top-color: #9b59b6; /* 动画中间时，顶部边框颜色变为紫色 */}
}</style>
</head>
<body><div class="loader"></div>
</body>
</html>

五：音乐波动加载特效

1.效果展示

在这里插入图片描述

2.`HTML`完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>音乐波动加载</title><style>body, html {height: 100%; /* 设置高度为100% */margin: 0; /* 设置外边距为0 */display: flex; /* 设置布局为弹性盒布局 */justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */}.boxMain {width: 84px; /* 设置宽度为84px */height: 32px; /* 设置高度为32px */display: flex; /* 设置布局为弹性盒布局 */justify-content: space-between; /* 子元素之间均匀分布空间 */align-items: flex-end; /* 子元素在交叉轴上向下对齐 */position: relative; /* 相对于其正常位置进行定位 */}.boxItem {width: 6px; /* 设置宽度为6px */box-sizing: border-box; /* 设置盒模型为边框盒模型 */background-color: #97e138; /* 设置背景颜色 */animation: itemAnimate 2s linear infinite; /* 应用动画，持续2秒，线性，无限循环 */box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #97e138; /* 设置盒阴影 */}.boxItem:nth-of-type(2) {background-color: #0421b1; /* 设置背景颜色 */animation-delay: 0.3s; /* 动画延迟0.3秒 */animation-duration: 2.0s; /* 动画持续2.0秒 */box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #0421b1; /* 设置盒阴影 */}.boxItem:nth-of-type(3) {background-color: #c00ee8; /* 设置背景颜色 */animation-delay: 0.38s; /* 动画延迟0.38秒 */box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #c00ee8; /* 设置盒阴影 */}.boxItem:nth-of-type(4) {background-color: #eb2406; /* 设置背景颜色 */animation-delay: 0.5s; /* 动画延迟0.5秒 */box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #eb2406; /* 设置盒阴影 */}.boxItem:nth-of-type(5) {background-color: #fff200; /* 设置背景颜色 */animation-duration: 2.4s; /* 动画持续2.4秒 */box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #fff200; /* 设置盒阴影 */}@keyframes itemAnimate {0% {height: 0; /* 动画开始时高度为0 */}50% {height: 32px; /* 动画进行到50%时高度为32px */}100% {height: 0; /* 动画结束时高度为0 */}}</style>
</head>
<body><div class="boxMain"><div class="boxItem"></div><div class="boxItem"></div><div class="boxItem"></div><div class="boxItem"></div><div class="boxItem"></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 {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) infinite alternate; /* 应用扩展动画，持续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 loading"></div> </div>
</body>
<script>document.addEventListener('DOMContentLoaded', () => {const loader = document.querySelector('.loader');});
</script>
</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;/* 设置外边距为0 */padding: 0;/* 设置内边距为0 */width: 100%;/* 设置宽度为100% */height: 100%;/* 设置高度为100% */font-family: Arial, sans-serif;/* 设置字体 */display: flex;/* 使用弹性盒布局 */justify-content: center;/* 水平居中 */align-items: center;/* 垂直居中 */background-color: #1e1e1e;/* 设置背景颜色 */overflow: hidden;/* 隐藏超出容器的内容 */}#loader-wrapper {position: fixed;/* 固定定位 */width: 100%;/* 设置宽度为100% */height: 100%;/* 设置高度为100% */display: flex;/* 使用弹性盒布局 */flex-direction: column;/* 设置为垂直方向 */justify-content: center;/* 垂直居中 */align-items: center;/* 水平居中 */z-index: 9999;/* 设置层叠顺序 */background: linear-gradient(to right, #ff7e5f, #feb47b);/* 设置背景为线性渐变 */animation: gradient-animation 5s infinite;/* 应用渐变动画，5秒无限循环 */}@keyframes gradient-animation {0% { background-position: 0% 50%; }/* 起始位置 */50% { background-position: 100% 50%; }/* 中间位置 */100% { background-position: 0% 50%; }/* 结束位置，回到起始 */}#loader {border: 16px solid #f3f3f3;/* 设置边框颜色 */border-radius: 50%;/* 设置边框圆角为50%，形成圆形 */border-top: 16px solid #3498db;/* 设置顶部边框颜色，形成旋转效果 */width: 120px;/* 设置宽度 */height: 120px;/* 设置高度 */animation: spin 2s linear infinite;/* 应用旋转动画，2秒线性无限循环 */}#loader-text {margin-top: 20px;/* 设置上边距 */font-size: 24px;/* 设置字体大小 */color: #fff;/* 设置字体颜色 */font-weight: bold;/* 设置字体加粗 */text-transform: uppercase;/* 设置文本为大写 */letter-spacing: 2px;/* 设置字符间距 */animation: fade-in-out 2s infinite;/* 应用淡入淡出动画，2秒无限循环 */}@keyframes spin {0% { transform: rotate(0deg); }/* 起始角度 */100% { transform: rotate(360deg); }/* 结束角度，旋转一圈 */}@keyframes fade-in-out {0%, 100% { opacity: 1; }/* 起始和结束时完全不透明 */50% { opacity: 0.5; }/* 中间半透明 */}</style>
</head>
<body><div id="loader-wrapper"><div id="loader"></div><div id="loader-text">加载中...</div></div>
</body>
</html>

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

文章目录一：彩球环绕加载特效1.效果展示2.HTML完整代码二：跷跷板加载特效1.效果展示2.HTML完整代码三：两个圆形加载特效1.效果展示2.HTML完整代码四：半环加载特效1.效果展示2.HTML完整代码五：音乐波动加载特效1.效…...

编程日记 2024/12/4 8:21:41

Spring Boot使用JDK 21虚拟线程

JDK 21引入的虚拟线程（Virtual Threads）是 Project Loom 的一部分，旨在显著简化并发编程并提高 Java 应用的可扩展性。以下是虚拟线程的主要特点： 1. 概念虚拟线程是轻量级线程，与传统的操作系统线程不同&#xff0…...

编程日记 2024/12/4 8:19:38

《从0到1常用Map集合核心摘要 + 不深不浅底层核心》

《从0到1常用Map集合核心摘要不深不浅底层核心》前置知识什么是键值对键值对是一种数据结构，键是唯一标识，值是对应数据，用来快速查找信息。例： {"name": "Alice"}，键是name，…...

编程日记 2024/12/4 8:18:37

12 设计模式之工厂方法模式

一、什么是工厂方法模式？ 1.定义在软件开发中，设计模式是解决常见软件设计问题的最佳实践。而工厂方法模式（Factory Method Pattern） 作为创建型设计模式之一，常常被用来解决对象创建问题。它通过将对象的创建交给…...

编程日记 2024/12/4 8:16:34

spaCy 入门与实战：强大的自然语言处理库

spaCy 入门与实战：强大的自然语言处理库 spaCy 是一个现代化、工业级的自然语言处理（NLP）库，以高效、易用和功能丰富著称。它被广泛应用于文本处理、信息提取和机器学习任务中。本文将介绍 spaCy 的核心功能，并通过一…...

编程日记 2024/12/4 8:15:33

python包的管理和安装——笔记

1.列出包 pip list pip freeze 用这2个可以查看当前python 下所有的包和版本，还有下载地址如果只是想导出当前的环境可以用 2.安装pipreqs pip install pipreqs，pipreqs ./可以导出当前项目的包这个包遇到编码报错 pipreqs ./ --encodingutf8 p…...

编程日记 2024/12/4 8:12:29

Vue前端页面内嵌套本项目iframe窗口的通信传输方式

一、目的想要在iframe中使用本项目页面、并能够与其父页面组件实现实时通信。Vue前端页面内嵌套本项目iframe窗口的通信传输方式-星林社区 https://www.jl1mall.com/forum/PostDetail?postId20241202172800023969 二、iframe通信方式 1.接收消息页面需要监听 message 事件…...

编程日记 2024/12/4 8:11:28

【WEB开发.js】addEventListener事件监听器的绑定和执行次数的问题（小心踩坑）

假设我们有一个按钮，用户点击该按钮后，会选择一个文件，且我们希望每次点击按钮时只触发一次文件处理。下面我会给你一个简单的例子，展示放在函数内部和放在函数外部的区别。 1. 将事件监听器放在函数内部（问题的根源&…...

编程日记 2024/12/4 8:10:27

用于LiDAR测量的1.58um单芯片MOPA（一）

--翻译自M. Faugeron、M. Krakowski1等人2014年的文章 1.简介如今，人们对高功率半导体器件的兴趣日益浓厚，这些器件主要用于遥测、激光雷达系统或自由空间通信等应用。与固态激光器相比，半导体器件更紧凑且功耗更低，这在低功率供…...

编程日记 2024/12/4 8:08:25

【GPT】代谢概念解读

以下是对代谢中分解代谢和合成代谢两个概念的深入解读，用简单易懂的方式展开说明： 1. 分解代谢（Catabolism） 什么是分解代谢？ 分解代谢是身体把大分子“拆开”的过程。就像把一个三明治分解成面包片、肉片和菜叶&#…...

编程日记 2024/12/4 8:06:23

Devops-git篇-01-git环境配置

环境配置设置用户签名配置用户名： git config --global user.name 你的用户名配置邮箱： git config --global user.email 注册的邮箱配置好之后，可以用git config --global --list命令查看配置是否OK $ git config --global --list u…...

编程日记 2024/12/4 8:05:22

STM32 HAL库开发学习1.STM32CubeMX 新建工程

STM32 HAL库开发学习1.STM32CubeMX 新建工程一、 STM32 CubeMX 下载二、CubeMX 功能介绍1. 固件包路径设置2. 新建工程三、创建项目实例1. 新建项目2. GPIO 管脚设置3. GPIO 窗口配置4. 调试设置5. 时钟配置6. 项目管理（1）项目信息（2&#…...

编程日记 2024/12/4 8:03:18

JS学习（2）（浏览器执行JS过程、JS的ECMAScript、DOM、BOM）

目录一、浏览器如何执行JS？ （1）浏览器主要的组成部分。 1、渲染引擎。 2、JS引擎。 （2）演示。二、JS的组成。 （1）JS主要由三部分组成。 1、JS基础。 2、JS-API。 （2）EC…...

编程日记 2024/12/4 8:01:16

如何解决服务器扫描出的ASP木马问题

随着互联网的发展，网站安全问题日益凸显。其中，ASP（Active Server Pages）木马因其隐蔽性和危害性成为攻击者常用的手段之一。本文将详细介绍如何检测和清除服务器上的ASP木马，以保障网站的安全。 1. ASP木马概述 ASP…...

编程日记 2024/12/4 7:59:11

SpringBoot 架构助力夕阳红公寓管理系统可持续发展战略

摘要如今社会上各行各业，都在用属于自己专用的软件来进行工作，互联网发展到这个时候，人们已经发现离不开了互联网。互联网的发展，离不开一些新的技术，而新技术的产生往往是为了解决现有问题而产生的。针对于夕阳红公…...

编程日记 2024/12/4 7:58:10

TCP、HTTP、RPC

一、TCP (Transmission Control Protocol) 定义 TCP（传输控制协议）是一种面向连接、可靠传输的传输层协议，用于在计算机网络中提供端到端的数据通信服务。它是互联网协议套件的一部分，与IP（互联网协议）一…...

编程日记 2024/12/4 7:57:09

《C++ 中 RNN 及其变体梯度问题的深度剖析与解决之道》

在当今人工智能蓬勃发展的浪潮中，递归神经网络（RNN）及其变体长短期记忆网络（LSTM）和门控循环单元（GRU）在处理序列数据方面展现出了强大的潜力。然而，当我们在 C中着手实现这些网络时…...

编程日记 2024/12/4 7:56:08

TypeScript 在 React 中的应用

文章目录前言一、为什么要在 React 中使用 TypeScript？二、如何在React中使用 TypeScript三、高级类型结语前言随着前端开发的复杂度不断提升，开发者对于代码质量、可维护性和开发效率的要求也日益增高。TypeScript 作为一种为 JavaScript 添加静态类…...

编程日记 2024/12/4 7:50:59

黑马2024AI+JavaWeb开发入门Day07-部门管理-日志技术飞书作业

视频地址：哔哩哔哩讲义作业飞书地址：day07作业完成新增班级和查询班级的接口开发 1、ClazzController.java package org.example.controller;import lombok.extern.slf4j.Slf4j; import org.example.pojo.Clazz; import org.example.service.Clazz…...

编程日记 2024/12/4 7:46:54

UIlicious - 自动化端到端测试

在现代软件开发中，测试自动化已然成为产品交付质量的基石。而端到端测试（E2E），作为验证整个应用流畅运行的关键，常常是测试工作中最具挑战性的一环。这时，一款简单高效的自动化测试工具——UIlicious&#…...

编程日记 2024/12/4 7:45:52

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用，操作系统：Ubuntu24.04，Neofj版本：2025.04.0。 Apt安装 Neofj可以进行官网安装：Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法最新版…...

编程新知 2025/12/22 11:05:42

使用VSCode开发Django指南

使用VSCode开发Django指南一、概述 Django 是一个高级 Python 框架，专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。本文将创建一个简单的 Django 应用，其中包含三个使用通用基本模板的页面。在此…...

编程新知 2025/12/22 9:14:39

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述：iview使用table 中type: "index",分页之后 ，索引还是从1开始，试过绑定后台返回数据的id, 这种方法可行，就是后台返回数据的每个页面id都不完全是按照从1开始的升序，因此百度了下，找到了…...

编程新知 2025/12/19 16:13:46

【机器视觉】单目测距——运动结构恢复

ps：图是随便找的，为了凑个封面前言在前面对光流法进行进一步改进，希望将2D光流推广至3D场景流时，发现2D转3D过程中存在尺度歧义问题，需要补全摄像头拍摄图像中缺失的深度信息，否则解空间不收敛&#xf…...

编程新知 2025/12/21 2:20:57

使用van-uploader 的UI组件，结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui（适配 Vue2 版本 ）实现截图中照片上传预览、删除功能，并封装成可复用组件的完整代码，包含样式和逻辑实现，可直接在 Vue2 项目中使用： 1. 封装的图片上传组件 ImageUploader.vue <te…...

编程新知 2025/10/1 2:59:48

【论文笔记】若干矿井粉尘检测算法概述

总的来说，传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度，通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

编程新知 2025/10/14 10:52:24

JUC笔记(上)-复习涉及死锁 volatile synchronized CAS 原子操作

一、上下文切换即使单核CPU也可以进行多线程执行代码，CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短，所以CPU会不断地切换线程执行，从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...

编程新知 2025/12/16 16:33:37

ios苹果系统，js 滑动屏幕、锚定无效

现象：window.addEventListener监听touch无效，划不动屏幕，但是代码逻辑都有执行到。 scrollIntoView也无效。原因：这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作，从而会影响…...

编程新知 2025/12/21 1:58:35

开放MySQL白名单可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务： test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...

编程新知 2025/8/25 19:12:45

AI，如何重构理解、匹配与决策？

AI 时代，我们如何理解消费？ 作者｜王彬封面｜Unplash 人们通过信息理解世界。曾几何时，PC 与移动互联网重塑了人们的购物路径：信息变得唾手可得，商品决策变得高度依赖内容。但 AI 时代的来…...

编程新知 2025/12/20 2:03:51

文章目录

一：彩球环绕加载特效

1.效果展示

2.HTML完整代码

二：跷跷板加载特效

1.效果展示

2.HTML完整代码

三：两个圆形加载特效

1.效果展示

2.HTML完整代码

四：半环加载特效

1.效果展示

2.HTML完整代码

五：音乐波动加载特效

1.效果展示

2.HTML完整代码

六：四色圆环加载特效

1.效果展示

2.HTML完整代码

七：圆环加载特效

1.效果展示

2.HTML完整代码

相关文章：

2.`HTML`完整代码

2.`HTML`完整代码

2.`HTML`完整代码

2.`HTML`完整代码

2.`HTML`完整代码

2.`HTML`完整代码

2.`HTML`完整代码