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

文章目录

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