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

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

文章目录

  • 前端开发 之 15个页面加载特效中【附完整源码】
      • 八：圆环百分比加载特效
          • 1.效果展示
          • 2.`HTML`完整代码
      • 九：毒药罐加载特效
          • 1.效果展示
          • 2.`HTML`完整代码
      • 十：无限圆环加载特效
          • 1.效果展示
          • 2.`HTML`完整代码
      • 十一：圆点加载特效
          • 1.效果展示
          • 2.`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; /* 去除默认的内边距 */width: 100%; /* 设置宽度为100% */height: 100%; /* 设置高度为100% */display: flex; /* 使用Flexbox布局 */justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */background: radial-gradient(circle, #1e3c72, transparent); /* 设置背景为径向渐变 */font-family: Arial, sans-serif; /* 设置字体 */color: white; /* 设置文字颜色为白色 */overflow: hidden; /* 隐藏溢出内容 */}.loader {position: relative; /* 设置定位方式为相对定位 */width: 200px; /* 设置宽度 */height: 200px; /* 设置高度 */display: flex; /* 使用Flexbox布局 */justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */}.circle {width: 100%; /* 设置宽度为100% */height: 100%; /* 设置高度为100% */border-radius: 50%; /* 设置边框圆角为50%，形成圆形 */border: 15px solid transparent; /* 设置边框宽度、样式和透明颜色 */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); } /* 初始状态，旋转0度 */100% { transform: rotate(360deg); } /* 结束状态，旋转360度 */}.progress {position: absolute; /* 设置定位方式为绝对定位 */top: 50%; /* 设置顶部距离 */left: 50%; /* 设置左侧距离 */width: 170px; /* 设置宽度 */height: 170px; /* 设置高度 */border-radius: 50%; /* 设置边框圆角为50%，形成圆形 */background: radial-gradient(circle closest-side, rgba(255, 255, 255, 0.1), transparent); /* 设置背景为径向渐变 */transform: translate(-50%, -50%); /* 设置位移，使元素居中 */clip-path: circle(0% at 50% 50%); /* 设置裁剪路径，初始为0%的圆形 */transition: clip-path 0.1s ease-in-out; /* 设置过渡效果 */}.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); /* 设置文字阴影 */}</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"); // 获取百分比文本元素let loadProgress = 0; // 初始化加载进度为0// 模拟加载过程const simulateLoading = setInterval(() => {loadProgress += 1; // 每次增加加载进度1percentage.innerText = loadProgress + "%"; // 更新百分比文本const clipPathValue = `circle(${loadProgress}% at 50% 50%)`; progress.style.clipPath = clipPathValue; // 更新进度条的裁剪路径// 当加载进度达到100%时，停止模拟加载，并在0.5秒后跳转到指定页面if (loadProgress >= 100) {clearInterval(simulateLoading); // 停止定时器setTimeout(() => {window.location.href = "your-page.html"; // 跳转到指定页面}, 500);}}, 100); // 每100毫秒执行一次});</script>
</body>
</html>

九：毒药罐加载特效

1.效果展示

在这里插入图片描述

2.HTML完整代码
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="utf-8"><title>毒药罐加载特效</title><style>html {height: 100%;/* 设置HTML元素的高度为100% */margin: 0;/* 移除HTML元素的外边距 */display: flex;/* 设置HTML元素为弹性盒布局 */justify-content: center;/* 水平居中子元素 */align-items: center;/* 垂直居中子元素 */background-image: linear-gradient(90deg, #5a3cc2, rgba(192, 55, 231, 0.34), rgba(213, 30, 152, 0.73));/* 设置背景为线性渐变颜色 */}.TankShaking_bottle {animation: TankShaking_animate__s7STs 2s linear infinite;/* 应用动画，持续2秒，线性无限循环 */background-color: hsla(120, 60%, 20%, 1);/* 设置背景颜色为深绿色 */border-radius: 50%;/* 设置边框圆角为50%，使元素呈现圆形 */height: 200px;/* 设置元素高度 */position: relative;/* 设置元素定位方式为相对定位 */transform-origin: bottom center;/* 设置变形原点为底部中心 */width: 200px;/* 设置元素宽度 */z-index: 2;/* 设置层叠顺序 */}.TankShaking_bottle:before {content: "";/* 伪元素必须设置content属性 */position: absolute;/* 设置定位方式为绝对定位 */top: -10px;/* 设置顶部偏移 */left: 50%;/* 设置左边偏移 */transform: translateX(-50%);/* 水平居中 */width: 120px;/* 设置宽度 */height: 40px;/* 设置高度 */background: linear-gradient(to right, #3ab8ce, #ffffff, #2b7a93);/* 设置背景为线性渐变颜色 */border-radius: 50%;/* 设置边框圆角为50%，使元素呈现圆形 */box-shadow: 0 6.6666666667px 10px #000;/* 设置盒阴影 */}.TankShaking_bottle .PoisonLabel {position: absolute;/* 设置定位方式为绝对定位 */top: -30px;/* 设置顶部偏移 */left: 50%;/* 设置左边偏移 */transform: translateX(-50%);/* 水平居中 */width: 100px;/* 设置宽度 */height: 20px;/* 设置高度 */background-color: black;/* 设置背景颜色为黑色 */color: white;/* 设置文字颜色为白色 */text-align: center;/* 设置文字居中 */line-height: 20px;/* 设置行高 */border-radius: 5px;/* 设置边框圆角 */font-family: Arial, sans-serif;/* 设置字体 */font-size: 12px;/* 设置字体大小 */}.TankShaking_bottle .TankShaking_water {animation: TankShaking_animate2__M8tPD 2s linear infinite;/* 应用动画，持续2秒，线性无限循环 */background-color: #32cd32;/* 设置背景颜色为有毒的绿色 */border-bottom-left-radius: 100px;/* 设置左下角边框圆角 */border-bottom-right-radius: 100px;/* 设置右下角边框圆角 */bottom: 10px;/* 设置底部偏移 */left: 10px;/* 设置左边偏移 */position: absolute;/* 设置定位方式为绝对定位 */right: 10px;/* 设置右边偏移 */top: 50%;/* 设置顶部偏移 */transform-origin: top center;/* 设置变形原点为顶部中心 */}.TankShaking_bottle .TankShaking_water:before {content: "";/* 伪元素必须设置content属性 */position: absolute;/* 设置定位方式为绝对定位 */top: -10px;/* 设置顶部偏移 */left: 0;/* 设置左边偏移 */width: 100%;/* 设置宽度为100% */height: 20px;/* 设置高度 */background-color: #1e90ff;/* 设置背景颜色 */border-radius: 50%;/* 设置边框圆角为50%，使元素呈现圆形 */}.TankShaking_bottleBottom {background-color: hsla(120, 60%, 20%, 0.5);/* 设置背景颜色为半透明深绿色 */border-radius: 50%;/* 设置边框圆角为50%，使元素呈现圆形 */height: 30px;/* 设置高度 */width: 200px;/* 设置宽度 */position: relative;/* 设置定位方式为相对定位 */margin-top: -10px;/* 设置上边距为负值，实现重叠效果 */animation: shadowGradient 3s infinite;/* 应用动态阴影渐变动画，持续3秒，无限循环 */}@keyframes shadowGradient {0% { box-shadow: 0 10px 20px rgba(50, 205, 50, 0.5); }/* 起始状态设置盒阴影 */33% { box-shadow: 0 10px 20px rgba(34, 170, 194, 0.7); }/* 33%时改变盒阴影颜色 */66% { box-shadow: 0 10px 20px rgba(25, 60, 150, 0.9); }/* 66%时再次改变盒阴影颜色 */100% { box-shadow: 0 10px 20px rgba(164, 50, 205, 0.5); }/* 结束时回到起始盒阴影颜色 */}.Smoke {position: absolute;/* 设置定位方式为绝对定位 */top: -50px;/* 设置顶部偏移 */left: 50%;/* 设置左边偏移 */transform: translateX(-50%);/* 水平居中 */width: 20px;/* 设置宽度 */height: 50px;/* 设置高度 */background: radial-gradient(circle, rgba(50, 205, 50, 0.6) 0%, rgba(3, 21, 3, 0) 100%);/* 设置背景为径向渐变颜色 */opacity: 0;/* 设置透明度 */animation: smokeAnimation 6s infinite, smokeColorChange 6s infinite;/* 应用两个动画，持续6秒，无限循环 */}/* 定义烟雾动画，描述烟雾从产生到消失的过程 */@keyframes smokeAnimation {0% {opacity: 0; /* 初始透明度为0，不可见 */transform: translateX(-50%) translateY(0) scale(0.5); /* 初始位置调整，并缩小 */}30% {opacity: 0.7; /* 透明度增加，变得可见 */transform: translateX(-50%) translateY(-30px) scale(1.2); /* 向上移动并稍微放大 */}60% {opacity: 0.3; /* 透明度降低，开始变淡 */transform: translateX(-50%) translateY(-60px) scale(1.5); /* 继续向上移动并更大 */}100% {opacity: 0; /* 透明度为0，完全不可见 */transform: translateX(-50%) translateY(-90px) scale(0.5); /* 移动到最终位置并缩小 */}}/* 定义烟雾颜色变化动画 */@keyframes smokeColorChange {0%, 100% {background: radial-gradient(circle, rgba(50, 205, 50, 0.1) 0%, rgba(3, 21, 3, 0) 100%); /* 初始和结束时为绿色渐变 */}25% {background: radial-gradient(circle, rgba(255, 165, 0, 0.11) 0%, rgba(3, 21, 3, 0) 100%); /* 25%时为橙色渐变 */}50% {background: radial-gradient(circle, rgba(138, 43, 226, 0.12) 0%, rgba(3, 21, 3, 0) 100%); /* 50%时为紫色渐变 */}75% {background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, rgba(3, 21, 3, 0) 100%); /* 75%时为白色渐变 */}}/* 定义水罐摇晃的旋转动画 */@keyframes TankShaking_animate__s7STs {0% { transform: rotate(0) } /* 初始位置，不旋转 */25% { transform: rotate(15deg) } /* 25%时顺时针旋转15度 */50% { transform: rotate(0) } /* 50%时回到初始位置 */75% { transform: rotate(-15deg) } /* 75%时逆时针旋转15度 */to { transform: rotate(0) } /* 动画结束时回到初始位置 */}/* 定义水罐摇晃时的滤镜和旋转动画 */@keyframes TankShaking_animate2__M8tPD {0% {filter: drop-shadow(0 0 50px #32cd32) hue-rotate(0deg); /* 初始时添加绿色阴影，色相不旋转 */transform: rotate(0) /* 不旋转 */}25% { transform: rotate(-15deg) } /* 25%时逆时针旋转15度 */50% { transform: rotate(0) } /* 50%时回到初始位置 */75% { transform: rotate(15deg) } /* 75%时顺时针旋转15度 */to {filter: drop-shadow(0 0 50px #32cd32) hue-rotate(1turn); /* 动画结束时，阴影色相旋转一圈 */transform: rotate(0) /* 回到初始位置 */}}/* 定义水罐摇晃时的水平移动动画 */@keyframes TankShaking_move__yUHoY {0% { transform: translateX(-50%) } /* 初始位置，水平居中 */25% { transform: translateX(calc(-50% + 20px)) } /* 25%时向右移动20px */50% { transform: translateX(-50%) } /* 50%时回到初始位置 */75% { transform: translateX(calc(-50% - 20px)) } /* 75%时向左移动20px */to { transform: translateX(-50%) } /* 动画结束时回到初始位置 */}</style>
</head>
<body><!-- 水罐摇晃效果的容器 --><div class="TankShaking_container"><!-- 水罐瓶子部分 --><div class="TankShaking_bottle"><!-- 水罐中的水部分 --><div class="TankShaking_water"></div><!-- 添加多个烟雾效果，每个烟雾效果有不同的动画延迟，实现连续出现的效果 --><div class="Smoke"></div><div class="Smoke" style="animation-delay: 1s;"></div><div class="Smoke" style="animation-delay: 2s;"></div></div><!-- 水罐瓶底部分 --><div class="TankShaking_bottleBottom"></div></div>
</body>
</html>

十：无限圆环加载特效

1.效果展示

在这里插入图片描述

2.HTML完整代码
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="utf-8"><title>无限圆环加载特效</title><style>body, html {margin: 0;/* 设置body和html的外边距为0 */padding: 0;/* 设置body和html的内边距为0 */width: 100%;/* 设置宽度为100% */height: 100%;/* 设置高度为100% */display: flex;/* 使用Flexbox布局 */justify-content: center;/* 水平居中 */align-items: center;/* 垂直居中 */background: linear-gradient(45deg, #ff6b6b, #f06595, #cc5de8, #556270, #4ecdc4);/* 设置背景为线性渐变，角度为45度，颜色从#ff6b6b渐变到#4ecdc4 */background-size: 300% 300%;/* 设置背景图片的大小为原尺寸的3倍 */animation: gradientBG 15s ease infinite;/* 应用动画gradientBG，持续15秒，缓动效果为ease，无限循环 */overflow: hidden;/* 隐藏超出容器的内容 */}@keyframes gradientBG {0% { background-position: 0% 50%; }/* 动画开始时背景位置 */50% { background-position: 100% 50%; }/* 动画进行到一半时背景位置 */100% { background-position: 0% 50%; }/* 动画结束时背景位置回到初始状态 */}.loader {position: relative;/* 相对定位 */width: 200px;/* 设置宽度为200px */height: 200px;/* 设置高度为200px */display: flex;/* 使用Flexbox布局 */justify-content: center;/* 水平居中 */align-items: center;/* 垂直居中 */}.loader div {box-sizing: border-box;/* 设置盒模型为border-box */display: block;/* 设置元素为块级元素 */position: absolute;/* 绝对定位 */width: 50px;/* 设置宽度为50px */height: 50px;/* 设置高度为50px */background: rgba(255, 255, 255, 0.2);/* 设置背景颜色为半透明的白色 */border: 5px solid rgba(255, 255, 255, 0.9);/* 设置边框为5px，颜色为接近不透明的白色 */border-radius: 50%;/* 设置边框圆角为50%，形成圆形 */animation: loaderSpin 2s ease-in-out infinite alternate;/* 应用loaderSpin动画，持续2秒，缓动效果为ease-in-out，无限循环，交替进行 */}.loader div:nth-child(1) {animation-delay: 0s;/* 第一个div动画无延迟 */}.loader div:nth-child(2) {animation-delay: 0.5s;/* 第二个div动画延迟0.5秒 */}.loader div:nth-child(3) {animation-delay: 1s;/* 第三个div动画延迟1秒 */}.loader div:nth-child(4) {animation-delay: 1.5s;/* 第四个div动画延迟1.5秒 */}@keyframes loaderSpin {/* 定义loaderSpin动画 */0% {transform: scale(0.5) rotate(0deg);/* 动画开始时缩小到0.5倍并旋转0度 */opacity: 0.5;/* 透明度为0.5 */}100% {transform: scale(1.5) rotate(360deg);/* 动画结束时放大到1.5倍并旋转360度 */opacity: 1;/* 透明度为1 */}}.glow {position: absolute;/* 绝对定位 */width: 300px;/* 设置宽度为300px */height: 300px;/* 设置高度为300px */border-radius: 50%;/* 设置边框圆角为50%，形成圆形 */background: radial-gradient(circle, rgba(255,255,255,0.1), transparent);/* 设置背景为径向渐变，从半透明的白色渐变到透明 */filter: blur(15px);/* 应用模糊滤镜，模糊半径为15px */animation: glowPulse 3s infinite;/* 应用glowPulse动画，持续3秒，无限循环 */}@keyframes glowPulse {/* 定义glowPulse动画 */0%, 100% {opacity: 0.6;/* 动画开始和结束时透明度为0.6 */}50% {opacity: 1;/* 动画进行到一半时透明度为1 */}}</style>
</head>
<body><div class="glow"></div><!-- 创建一个带有glow类的div，用于显示背景的发光效果 --><div class="loader"><!-- 创建一个带有loader类的div，作为加载动画的容器 --><div></div><!-- 创建四个div，作为加载动画的小圆环 --><div></div><div></div><div></div></div><script>// 模拟加载完成后跳转到主页setTimeout(() => {// 使用setTimeout函数设置一个定时器// 加载完成后的操作，这里可以替换为实际的页面跳转// window.location.href = '你的主页URL';console.log('加载完成！');// 在控制台输出“加载完成！”}, 5000); // 设置定时器的时间为5000毫秒（5秒）</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%;/* 设置body和html元素的高度为100% */margin: 0;/* 去除默认的边距 */display: flex;/* 使用弹性盒布局 */justify-content: center;/* 使子元素在水平方向上居中 */align-items: center;/* 使子元素在垂直方向上居中 */background: #282c34;/* 设置背景颜色为深灰色 */}.loader {display: flex;/* 为加载器使用弹性盒布局 */justify-content: center;/* 使子元素在主轴上居中 */align-items: center;/* 使子元素在交叉轴上居中 */position: relative;/* 设置定位方式为相对定位，作为子元素绝对定位的参考 */width: 100px;/* 设置加载器的宽度 */height: 100px;/* 设置加载器的高度 */}.circle {position: absolute;/* 设置圆点的定位方式为绝对定位 */width: 20px;/* 设置圆点的宽度 */height: 20px;/* 设置圆点的高度 */background-color: #61dafb;/* 设置圆点的背景颜色为天蓝色 */border-radius: 50%;/* 设置圆角半径为50%，使元素成为圆形 */animation: bounce 1s infinite ease-in-out;/* 应用动画：名称为bounce，持续1秒，无限循环，动画效果为先加速再减速 */}.circle:nth-child(1) {animation-delay: 0s;/* 第一个圆点动画无延迟 */left: 0;/* 定位到父元素的左边 */top: 50%;/* 定位到父元素的垂直中心 */transform: translateY(-50%);/* 向上移动自身高度的50%，实现垂直居中 */}.circle:nth-child(2) {animation-delay: -0.75s;/* 第二个圆点动画延迟-0.75秒，即提前开始 */left: 50%;/* 定位到父元素的水平中心 */top: 0;/* 定位到父元素的顶部 */transform: translateX(-50%);/* 向左移动自身宽度的50%，实现水平居中 */}.circle:nth-child(3) {animation-delay: -0.5s;/* 第三个圆点动画延迟-0.5秒 */right: 0;/* 定位到父元素的右边 */top: 50%;/* 定位到父元素的垂直中心 */transform: translateY(-50%);/* 向上移动自身高度的50%，实现垂直居中 */}.circle:nth-child(4) {animation-delay: -0.25s;/* 第四个圆点动画延迟-0.25秒 */left: 50%;/* 定位到父元素的水平中心 */bottom: 0;/* 定位到父元素的底部 */transform: translateX(-50%);/* 向左移动自身宽度的50%，实现水平居中 */}@keyframes bounce {/* 定义动画名称为bounce */0%, 80%, 100% {transform: scale(0.5);/* 在动画的开始、80%和结束时，将元素缩放到原来的一半 */}40% {transform: scale(1);/* 在动画的40%时，元素恢复到原大小 */}}</style>
</head>
<body><div class="loader"><!-- 加载器的容器 --><div class="circle"></div><!-- 第一个圆点 --><div class="circle"></div><!-- 第二个圆点 --><div class="circle"></div><!-- 第三个圆点 --><div class="circle"></div><!-- 第四个圆点 --></div>
</body>
</html>

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

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

相关文章

C语言练习作业1204

C语言练习作业1204

编写程序实现&#xff1a;strlen&#xff1b;strcpy&#xff1b;strcat&#xff1b;strcmp 的功能。 一、strlen()函数 1.1 分析 size_t strlen(const char *s);【功能】&#xff1a;计算字符串的长度&#xff0c;\0之前的字符串数量&#xff1b;【参数】&#xff1a;s&#…
阅读更多...
查询品牌涉及两张表（brand、brand_admin_mapping）

查询品牌涉及两张表（brand、brand_admin_mapping）

文章目录 1、BrandController2、AdminCommonService3、BrandApiService3、BrandCommonService4、BrandSqlService涉及的表SQL 查询逻辑参数处理执行查询完整 SQL 逻辑参数映射总结 查询指定管理员下的品牌所涉及的表有哪些&#xff1f; http://127.0.0.1:8087/brand/admin/list…
阅读更多...
[go-redis]客户端的创建与配置说明

[go-redis]客户端的创建与配置说明

创建redis client 使用go-redis库进行创建redis客户端比较简单&#xff0c;只需要调用redis.NewClient接口创建一个客户端 redis.NewClient(&redis.Options{Addr: "127.0.0.1:6379",Password: "",DB: 0, })NewClient接口只接收一个参数red…
阅读更多...
Linux CentOS

Linux CentOS

​阿里云开源镜像下载链接 https://mirrors.aliyun.com/centos/7/isos/x86_64/ VMware 安装 CentOS7 自定义 下一步 选择稍后安装操作系统 选择 输入 查看物理机CPU内核数量 CtrlShiftEsc 总数不超过物理机内核数量 推荐内存 自选 推荐 推荐 默认 拆分成多个 默认 自定义硬件…
阅读更多...
【STM32 Modbus编程】-作为主设备读取线圈和输入

【STM32 Modbus编程】-作为主设备读取线圈和输入

作为主设备读取线圈和输入 文章目录 作为主设备读取线圈和输入1、硬件准备与连接1.1 RS452模块介绍1.2 硬件配置与接线1.3 软件准备2、读取线圈2.1 主设备发送请求2.2 从设备响应请求2.3 主机接收数据3、读取输入4、结果本文将在前面文章的基础上，实现主设备通过ModBus协议对从…
阅读更多...
2-2-18-13 QNX系统架构之原生网络（Qnet）

2-2-18-13 QNX系统架构之原生网络（Qnet）

阅读前言 本文以QNX系统官方的文档英文原版资料为参考&#xff0c;翻译和逐句校对后&#xff0c;对QNX操作系统的相关概念进行了深度整理&#xff0c;旨在帮助想要了解QNX的读者及开发者可以快速阅读&#xff0c;而不必查看晦涩难懂的英文原文&#xff0c;这些文章将会作为一个…
阅读更多...
多模态COGMEN详解

多模态COGMEN详解

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢&#xff0c;在这里我会分享我的知识和经验。&am…
阅读更多...
基于频谱处理的音频分离方法

基于频谱处理的音频分离方法

基于频谱处理的音频分离方法 在音频处理领域&#xff0c;音频分离是一个重要的任务&#xff0c;尤其是在语音识别、音乐制作和通信等应用中。音频分离的目标是从混合信号中提取出单独的音频源。通过频谱处理进行音频分离是一种有效的方法&#xff0c;本文将介绍其基本原理、公…
阅读更多...
HTML旋转爱心

HTML旋转爱心

系列文章 序号目录1HTML满屏跳动的爱心&#xff08;可写字&#xff09;2HTML五彩缤纷的爱心3HTML满屏漂浮爱心4HTML情人节快乐5HTML蓝色爱心射线6HTML跳动的爱心&#xff08;简易版&#xff09;7HTML粒子爱心8HTML蓝色动态爱心9HTML跳动的爱心&#xff08;双心版&#xff09;1…
阅读更多...
查看 tomcat信息 jconsole.exe

查看 tomcat信息 jconsole.exe

Where is the jconsole.exe? location: JDK/bin/jconsole.exe
阅读更多...
设计模式10：观察者模式(订阅-发布)

设计模式10：观察者模式(订阅-发布)

系列总链接&#xff1a;《大话设计模式》学习记录_net 大话设计-CSDN博客 参考&#xff1a;简说设计模式——工厂方法模式 - JAdam - 博客园 参考&#xff1a;简单工厂模式(Simple Factory Pattern) - 回忆酿的甜 - 博客园 一&#xff1a;概述 观察者模式&#xff0…
阅读更多...
AIGC 时代的文学：变革与坚守

AIGC 时代的文学：变革与坚守

目录 一.AIGC 带来的文学变革 1.创作方式的改变 2.阅读体验的升级 3.文学市场的重塑 二.文学在 AIGC 时代的坚守 1.人类情感的表达 2.文学的艺术性 3.文学的社会责任 三.AIGC 与人类作家的共生之路 1.相互学习 2.合作创作 3.共同发展 另&#xff1a; 总结 随着人…
阅读更多...
Wwise 使用MIDI文件、采样音频

Wwise 使用MIDI文件、采样音频

第一种&#xff1a;当采样音频只有一个文件的时候 1.拖入MIDI文件到Interactive Music Hierarchy层级 2.拖入采样音频到Actor-Mixer Hierarchy层级 3.勾选MIDI显示出面板&#xff0c;设置Root Note与采样音频音高相同&#xff0c;这里是C#5 4.播放测试&#xff0c;成功&…
阅读更多...
【计算机网络】实验9： 路由信息协议RIP

【计算机网络】实验9： 路由信息协议RIP

实验9 路由信息协议RIP 一、实验目的 本实验的主要目的是深入理解RIP&#xff08;路由信息协议&#xff09;的工作原理&#xff0c;以便掌握其在网络中的应用。通过对RIP的学习&#xff0c;我们将探讨该协议如何实现路由选择和信息传播&#xff0c;从而确保数据包能够在网络中…
阅读更多...
python源码实例游戏开发小程序办公自动化网络爬虫项目开发源码(250+个项目、26.6GB)

python源码实例游戏开发小程序办公自动化网络爬虫项目开发源码(250+个项目、26.6GB)

文章目录 源代码下载地址项目介绍预览 项目备注源代码下载地址 源代码下载地址 点击这里下载源码 项目介绍 python源码实例游戏开发小程序办公自动化网络爬虫项目开发源码(250个项目、26.6GB) 预览 项目备注 1、该资源内项目代码都经过测试运行成功&#xff0c;功能ok的情…
阅读更多...
深入理解AVL树：结构、旋转及C++实现

深入理解AVL树：结构、旋转及C++实现

1. AVL树的概念 什么是AVL树&#xff1f; AVL树是一种自平衡的二叉搜索树&#xff0c;其发明者是Adelson-Velsky和Landis&#xff0c;因此得名“AVL”。AVL树是首个自平衡二叉搜索树&#xff0c;通过对树的平衡因子进行控制&#xff0c;确保任何节点的左右子树高度差最多为1&…
阅读更多...
spark-sql配置教程

spark-sql配置教程

1.前期准备 &#xff08;1&#xff09;首先要把hadoop集群&#xff0c;hive和spark等配置好 hadoop集群&#xff0c;hive的配置可以看看这个博主写的博客 大数据_蓝净云的博客-CSDN博客 或者看看黑马程序员的视频 黑马程序员大数据入门到实战教程&#xff0c;大数据开发必…
阅读更多...
Git分布式版本控制工具 Git基本概念、Git工作流程、Git常用命令、Git远程仓库、IDEA操作Git

Git分布式版本控制工具 Git基本概念、Git工作流程、Git常用命令、Git远程仓库、IDEA操作Git

目录 ​​​​​​ 1.Git基本概念 1.1 概述 1.1.1 开发中的实际场景 1.1.2 版本控制器的方式 1.1.2.1 集中式版本控制工具(SVN) 1.1.2.2 分布式版本控制工具(Git) 2.概述git工作流程 3.Git常用命令 3.1 Git环境配置 3.1.1 下载与安装 3.1.2 基本配置 3.1.3 为常用指令配置别名&…
阅读更多...
“停车费“ 在英语中常见的表达方式，柯桥职场英语生活口语商务英语学习

“停车费“ 在英语中常见的表达方式，柯桥职场英语生活口语商务英语学习

“停车费”用英语怎么说&#xff1f; "停车费" 在英语中有多种表达方式&#xff0c;最常见的是&#xff1a; Parking fee: 这是最直接的翻译&#xff0c;用于各种停车场、路边停车等情况。 Parking c15857575#376harge: 与 parking fee 意思相近&#xff0c;但有时更…
阅读更多...
第31天：安全开发-JS应用WebPack打包器第三方库JQuery安装使用安全检测

第31天：安全开发-JS应用WebPack打包器第三方库JQuery安装使用安全检测

时间轴&#xff1a; 演示案例&#xff1a; 打包器-WebPack-使用&安全 第三方库-JQuery-使用&安全 打包器-WebPack-使用&安全 参考&#xff1a;https://mp.weixin.qq.com/s/J3bpy-SsCnQ1lBov1L98WA Webpack 是一个模块打包器。在 Webpack 中会将前端的所有资源…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023