Bootstrap

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

文章目录

一：彩球环绕加载特效

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>

悦读

道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。 故常无欲，以观其妙，常有欲，以观其徼。 此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。

最新收录
css——网格布局
【嵌入式Linux内核驱动】SPI子系统 | 硬件原理 | 应用编程 | 内核驱动 | 总体框架
Minio安装
什么是PaaS云平台？
C++ STL 总结（algorithm.h）
linux:回车换行+进度条+git理解与使用以及如何解决免密码push问题
科普帖：深度学习中GPU和显存分析
labelme\labelimg标注数据可视化
GIT GUI和 GIT bash区别
PyTorch概述
;