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

温轻舟2024-12-05 11:04

文章目录

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

1.效果展示
2.HTML完整代码
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完整代码
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完整代码
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完整代码
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>

END~温轻舟

相关推荐
唐人街都是苦瓜脸3 分钟前
pnpm install 和 npm install 的区别
前端·npm·node.js
戒不掉的伤怀6 分钟前
react，使用echarts过程
前端·react.js·echarts
小白探索世界欧耶！~9 分钟前
react 使用 postcss-px-to-viewport 实现 px 自动转 vw 自适应
前端·javascript·vue.js·程序人生·react.js·postcss
ryipei27 分钟前
vue纯前端根据页面或者后台数据，读取本地文档模板，填充数据后并导出
前端·javascript·vue.js
Gazer_S1 小时前
【Web 应用缓存与部署优化指南】
前端·缓存
老李笔记1 小时前
VUE element table 列合并
javascript·vue.js·ecmascript
滿1 小时前
Vue3 Element Plus 表格默认显示一行
javascript·vue.js·elementui
好了来看下一题1 小时前
TypeScript 项目配置
前端·javascript·typescript
江城开朗的豌豆1 小时前
Vue的双向绑定魔法：如何让数据与视图‘心有灵犀’？
前端·javascript·vue.js
江城开朗的豌豆1 小时前
Vue权限控制小妙招：动态渲染列表的优雅实现
前端·javascript·vue.js
热门推荐
01Coze扣子平台完整体验和实践（附国内和国际版对比）02【图像处理与机器视觉】XJTU期末考点03KGG转MP3工具|非KGM文件|解密音频04零代码入门 | Coze——让大模型接入自己的数据库05从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑06YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】07扣子空间的使用教程与大模型技术思考08海康Visionmaster-常见问题排查方法-启动阶段09【SpeedAI科研小助手】2分钟极速解决知网维普重复率、AIGC率过高，一键全文降！文件格式不变，公式都保留的！10坚果投影仪J10如何用苹果Siri开关机并和米家联动