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

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

news 2025/9/18 7:39:12

文章目录

- - 一：彩球环绕加载特效
  - - - 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

内存分配函数malloc kmalloc vmalloc

内存分配函数malloc kmalloc vmalloc malloc实现步骤： 1）请求大小调整：首先，malloc 需要调整用户请求的大小，以适应内部数据结构（例如，可能需要存储额外的元数据）。通常，这包括对齐调整，确保分配的内存地址满足特定硬件要求（如对齐到8字节或16字节边界）。 2）空闲…...

编程新知 2025/7/16 16:51:12

深入剖析AI大模型：大模型时代的 Prompt 工程全解析

今天聊的内容，我认为是AI开发里面非常重要的内容。它在AI开发里无处不在，当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"，或者让翻译模型 "将这段合同翻译成商务日语" 时，输入的这句话就是 Prompt。…...

编程新知 2025/9/18 5:24:07

【杂谈】-递归进化：人工智能的自我改进与监管挑战

递归进化：人工智能的自我改进与监管挑战文章目录递归进化：人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管？3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

编程新知 2025/7/7 5:39:43

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

编程新知 2025/9/9 15:02:38

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口目录第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

编程新知 2025/9/10 3:41:08

什么？连接服务器也能可视化显示界面？：基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录什么是X11？环境准备实战步骤1️⃣ 服务器端配置（CentOS）2️⃣ 客户端配置（MobaXterm）3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...

编程新知 2025/7/24 7:13:48

C# 求圆面积的程序（Program to find area of a circle）

给定半径r，求圆的面积。圆的面积应精确到小数点后5位。例子： 输入：r 5 输出：78.53982 解释：由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982，因为我们只保留小数点后 5 位数字。输…...

编程新知 2025/9/9 10:10:10

Xen Server服务器释放磁盘空间

disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...

编程新知 2025/7/18 2:39:54

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

FTP 客服管理系统实现kefu123登录，不允许匿名访问，kefu只能访问/data/kefu目录，不能查看其他目录创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...

编程新知 2025/9/3 19:49:50

Qemu arm操作系统开发环境

使用qemu虚拟arm硬件比较合适。步骤如下： 安装qemu apt install qemu-system安装aarch64-none-elf-gcc 需要手动下载，下载地址：https://developer.arm.com/-/media/Files/downloads/gnu/13.2.rel1/binrel/arm-gnu-toolchain-13.2.rel1-x…...

编程新知 2025/9/4 22:48:54

文章目录

一：彩球环绕加载特效

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`完整代码