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

文章目录

- - 十二：铜钱3D圆环加载特效
  - - - 1.效果展示
      - 2.`HTML`完整代码
  - 十三：扇形百分比加载特效
  - - - 1.效果展示
      - 2.`HTML`完整代码
  - 十四：四色圆环显现加载特效
  - - - 1.效果展示
      - 2.`HTML`完整代码
  - 十五：跷跷板加载特效
  - - - 1.效果展示
      - 2.`HTML`完整代码

十二：铜钱3D圆环加载特效

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>铜钱3D圆环加载特效</title>
    <style>
    body {
        display: flex;
        /* 设置body为弹性盒布局 */
        justify-content: center;
        /* 水平居中 */
        align-items: center;
        /* 垂直居中 */
        height: 100vh;
        /* 高度为视口高度的100% */
        margin: 0;
        /* 外边距为0 */
        background-color: #222;
        /* 背景颜色为深灰色 */
        overflow: hidden;
        /* 隐藏溢出的内容 */
    }

    .loader {
        position: relative;
        /* 相对定位 */
        width: 80px;
        /* 宽度80像素 */
        height: 80px;
        /* 高度80像素 */
        transform-style: preserve-3d;
        /* 保持3D转换效果 */
        animation: outerRotate 8s infinite linear;
        /* 应用outerRotate动画，时长8秒，无限循环，线性动画 */
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.2),
                    0 0 40px rgba(255, 255, 255, 0.2),
                    0 0 60px rgba(255, 255, 255, 0.2),
                    0 0 80px rgba(255, 255, 255, 0.2),
                    0 0 100px rgba(255, 255, 255, 0.2);
        /* 添加多层阴影效果，模拟发光 */
    }

    .loader div {
        position: absolute;
        /* 绝对定位 */
        width: 100%;
        /* 宽度100% */
        height: 100%;
        /* 高度100% */
        border-radius: 50%;
        /* 边框圆角为50%，形成圆形 */
        border: 4px solid transparent;
        /* 边框4像素宽，透明色 */
        transform-origin: center center;
        /* 转换原点为中心点 */
        animation: spin 2s infinite linear;
        /* 应用spin动画，时长2秒，无限循环，线性动画 */
    }

    .loader div:nth-child(1) {
        transform: translateZ(40px);
        /* 在Z轴上移动40像素 */
        animation-delay: 0s;
        /* 动画无延迟 */
        border-top-color: #e74c3c;
        /* 顶部边框颜色 */
    }

    .loader div:nth-child(2) {
        transform: translateZ(40px);
        /* 在Z轴上移动40像素 */
        animation-delay: -0.5s;
        /* 动画延迟-0.5秒，即提前0.5秒开始 */
        border-top-color: #9b59b6;
        /* 顶部边框颜色 */
    }

    .loader div:nth-child(3) {
        transform: translateZ(40px);
        /* 在Z轴上移动40像素 */
        animation-delay: -1s;
        /* 动画延迟-1秒，即提前1秒开始 */
        border-top-color: #2ecc71;
        /* 顶部边框颜色 */
    }

    .loader div:nth-child(4) {
        transform: translateZ(40px);
        /* 在Z轴上移动40像素 */
        animation-delay: -1.5s;
        /* 动画延迟-1.5秒，即提前1.5秒开始 */
        border-top-color: #f1c40f;
        /* 顶部边框颜色 */
    }

    @keyframes outerRotate {
        0% {
            transform: rotateY(0deg);
            /* 初始状态，Y轴旋转0度 */
        }
        100% {
            transform: rotateY(360deg);
            /* 结束状态，Y轴旋转360度 */
        }
    }

    @keyframes spin {
        0% {
            transform: rotateX(0deg) rotateY(0deg);
            /* 初始状态，X轴和Y轴都旋转0度 */
        }
        100% {
            transform: rotateX(360deg) rotateY(360deg);
            /* 结束状态，X轴和Y轴都旋转360度 */
        }
    }
    </style>
</head>
<body>
    <div class="loader">
        <!-- 加载特效的容器 -->
        <div></div>
        <div></div>
        <div></div>
        <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, html {
            margin: 0;
            padding: 0;
            /* 设置body和html元素的边距和填充为0 */
            width: 100%;
            height: 100%;
            /* 设置body和html元素的宽度和高度为100% */
            display: flex;
            justify-content: center;
            align-items: center;
            /* 使用Flexbox布局，使内容居中 */
            background: radial-gradient(circle, #1e3c72, transparent);
            /* 设置背景为径向渐变，颜色从#1e3c72渐变到透明 */
            font-family: Arial, sans-serif;
            color: white;
            /* 设置字体和文本颜色 */
            overflow: hidden;
            /* 隐藏溢出内容 */
        }

        .loader {
            position: relative;
            width: 200px;
            height: 200px;
            /* 设置加载器的位置和大小 */
            display: flex;
            justify-content: center;
            align-items: center;
            /* 使用Flexbox布局，使内部内容居中 */
        }

        .circle {
            width: 100%;
            height: 100%;
            /* 设置圆的宽度和高度为100% */
            border-radius: 50%;
            /* 设置边框圆角为50%，形成圆形 */
            border: 15px solid transparent;
            /* 设置边框宽度为15px，颜色为透明 */
            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); }
            100% { transform: rotate(360deg); }
            /* 定义动画，从0度旋转到360度 */
        }

        .progress {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 170px;
            height: 170px;
            /* 设置进度条的位置和大小 */
            border-radius: 50%;
            /* 设置圆角为50%，形成圆形 */
            background: conic-gradient(rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) var(--progress, 0%), transparent var(--progress, 0%), transparent 100%);
            /* 使用锥形渐变创建进度条效果 */
            transform: translate(-50%, -50%);
            /* 将进度条居中 */
        }

        .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);
            /* 添加文本阴影效果 */
            animation: fadeInOut 2s infinite alternate;
            /* 应用淡入淡出动画 */
        }

        @keyframes fadeInOut {
            0%, 100% { opacity: 1; }
            50% { opacity: 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");
            // 获取进度条和百分比文本的DOM元素
            let loadProgress = 0;
            // 初始化加载进度为0

            const simulateLoading = setInterval(() => {
                // 设置定时器，每隔一定时间更新加载进度
                loadProgress += 1;
                // 每次循环加载进度增加1
                percentage.innerText = loadProgress + "%";
                // 更新百分比文本的显示
                progress.style.setProperty('--progress', `${loadProgress * 3.6}deg`);
                // 更新进度条的CSS变量--progress，以显示加载进度

                if (loadProgress >= 100) {
                    // 当加载进度达到100%时
                    clearInterval(simulateLoading);
                    // 清除定时器
                    setTimeout(() => {
                        window.location.href = "your-actual-page.html";
                    }, 500);
                    // 延迟500毫秒后跳转到指定页面
                }
            }, 100);
            // 定时器每隔100毫秒执行一次
        });
    </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%; /* 高度设为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) forwards; /* 应用扩展动画，持续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"></div> <!-- 加载特效的元素 -->
    </div>
</body>
<script>
  // 当DOM内容加载完成后执行
  document.addEventListener('DOMContentLoaded', () => {
    const loader = document.querySelector('.loader'); // 获取加载特效的元素
    let cycleCount = 0; // 循环计数器

    // 定义一个函数来控制加载特效的循环
    function animateLoader() {
        if (cycleCount < 3) {
            // 添加loading类，触发动画
            loader.classList.add('loading');
            loader.classList.remove('hidden'); // 确保特效是可见的

            // 在动画结束后，隐藏加载特效并准备下一次循环
            setTimeout(() => {
                loader.classList.remove('loading');
                loader.classList.add('hidden'); // 隐藏特效

                // 设置延时后再次触发动画，模拟循环效果
                setTimeout(animateLoader, 500); // 延时500毫秒后开始下一次循环

                cycleCount++; // 增加循环计数器
            }, 2000); // 动画持续2秒，所以延时2秒执行
        } else {
            // 循环三次后，显示加载完成的信息
            loader.classList.remove('loading', 'hidden'); // 移除所有动画类
            loader.style.display = 'none'; // 隐藏加载特效元素

            const content = document.createElement('div'); // 创建一个新的div元素
            content.textContent = '加载完成!'; // 设置div的文本内容
            content.style.fontSize = '24px'; // 设置div的字体大小
            content.style.color = '#333'; // 设置div的字体颜色
            document.body.appendChild(content); // 将div添加到body中
        }
    }

    // 初始调用动画函数
    animateLoader();
  });
</script>
</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;
            /* 去除html和body元素的外边距 */
            display: flex;
            /* 设置html和body元素为flexbox布局 */
            justify-content: center;
            /* 使子元素在主轴（水平方向）上居中 */
            align-items: center;
            /* 使子元素在交叉轴（垂直方向）上居中 */
        }
        .app {
            width: 100px; /* 可以根据需要调整大小 */
            /* 设置.app元素的宽度为100px */
            height: 100px;
            /* 设置.app元素的高度为100px */
            background-color: #ffffff;
            /* 设置.app元素的背景颜色为白色 */
            display: flex;
            /* 设置.app元素为flexbox布局 */
            justify-content: center;
            /* 使子元素在主轴（水平方向）上居中 */
            align-items: center;
            /* 使子元素在交叉轴（垂直方向）上居中 */
        }
        .loading {
            width: 80px;
            /* 设置.loading73元素的宽度为80px */
            height: 80px;
            /* 设置.loading73元素的高度为80px */
            position: relative;
            /* 设置.loading73元素的定位方式为相对定位 */
            display: flex;
            /* 设置.loading73元素为flexbox布局 */
            justify-content: center;
            /* 使子元素在主轴（水平方向）上居中 */
            align-items: center;
            /* 使子元素在交叉轴（垂直方向）上居中 */
            transform-origin: center center;
            /* 设置.loading73元素的变换原点为中心点 */
            animation: effbox 3s cubic-bezier(0, 0.6, 1, 0.4) infinite;
            /* 为.loading73元素应用名为effbox73的动画，动画时长为3秒，使用自定义的贝塞尔曲线作为过渡效果，动画无限循环 */
        }
        @keyframes effbox {
            0% {
                transform: rotate(-30deg);
                /* 动画开始时，元素旋转-30度 */
            }
            40% {
                transform: rotate(30deg);
                /* 动画进行到40%时，元素旋转30度 */
            }
            50% {
                transform: rotate(30deg);
                /* 动画进行到50%时，元素保持旋转30度 */
            }
            90% {
                transform: rotate(-30deg);
                /* 动画进行到90%时，元素旋转回-30度 */
            }
            100% {
                transform: rotate(-30deg);
                /* 动画结束时，元素保持旋转-30度 */
            }
        }
        .loading::before {
            content: '';
            /* 为.loading73元素的伪元素::before设置内容为空，以便可以对其应用样式 */
            width: 100%;
            /* 设置伪元素的宽度为100% */
            height: 4px;
            /* 设置伪元素的高度为4px */
            background-color: #000;
            /* 设置伪元素的背景颜色为黑色 */
            position: absolute;
            /* 设置伪元素的定位方式为绝对定位 */
            left: 0;
            /* 设置伪元素的左边距为0，使其紧贴父元素的左侧 */
        }
        .loading::after {
            content: '';
            /* 为.loading73元素的伪元素::after设置内容为空，以便可以对其应用样式 */
            width: 16px;
            /* 设置伪元素的宽度为16px */
            height: 16px;
            /* 设置伪元素的高度为16px */
            background-color: #ea990c;
            /* 设置伪元素的背景颜色为橙黄色 */
            position: absolute;
            /* 设置伪元素的定位方式为绝对定位 */
            top: 21px;
            /* 设置伪元素的顶部边距为21px，以便定位到合适的位置 */
            left: 0;
            /* 设置伪元素的左边距为0，使其紧贴父元素的左侧 */
            border-radius: 3px;
            /* 设置伪元素的边框圆角为3px，使其呈现圆角效果 */
            animation: eff 3s ease-in-out infinite;
            /* 为伪元素应用名为eff73的动画，动画时长为3秒，使用ease-in-out过渡效果，动画无限循环 */
        }
        @keyframes eff {
            0% {
                transform: translateX(0) rotate(0);
                /* 动画开始时，伪元素不进行平移和旋转 */
            }
            10% {
                transform: translateX(16px) rotate(90deg);
                /* 动画进行到10%时，伪元素向右平移16px并旋转90度 */
            }
            20% {
                transform: translateX(32px) rotate(180deg);
                /* 动画进行到20%时，伪元素继续向右平移至32px并旋转180度 */
            }
            30% {
                transform: translateX(48px) rotate(270deg);
                /* 动画进行到30%时，伪元素继续向右平移至48px并旋转270度 */
            }
            40% {
                transform: translateX(64px) rotate(360deg);
                /* 动画进行到40%时，伪元素继续向右平移至64px并完成一圈旋转 */
            }
            50% {
                transform: translateX(64px) rotate(360deg);
                /* 动画进行到50%时，伪元素保持位置不变和旋转状态 */
            }
            60% {
                transform: translateX(48px) rotate(270deg);
                /* 动画进行到60%时，伪元素向左平移回48px并旋转回270度 */
            }
            70% {
                transform: translateX(32px) rotate(180deg);
                /* 动画进行到70%时，伪元素继续向左平移至32px并旋转回180度 */
            }
            80% {
                transform: translateX(16px) rotate(90deg);
                /* 动画进行到80%时，伪元素继续向左平移至16px并旋转回90度 */
            }
            90% {
                transform: translateX(0) rotate(0);
                /* 动画进行到90%时，伪元素平移回原位并停止旋转 */
            }
            100% {
                transform: translateX(0) rotate(0);
                /* 动画结束时，伪元素保持原位和停止旋转的状态 */
            }
        }
    </style>
</head>
<body>
    <div class="app">
        <!-- 创建一个.app元素作为动画的容器 -->
        <div class="loading"></div>
    </div>
</body>
</html>