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