网页切换之间的加载动画方案

first 一般情况下，页面打开的时候，初始化的是一个css的动画，比如一个不断变化的图形或者漏斗。

<html>
<div class="loading">
  <div class="loader"></div>
  This is a large  page. May be it will take a few seconds to load.
</div>
<style>
.loading {
  position: fixed;
  z-index: 50;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #f1f1f1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loader {
  --webkit-perspective: 120px;
  --moz-perspective: 120px;
  --ms-perspective: 120px;
  perspective: 120px;
  height: 100px;
}
.loader:before {
  content: "";
  position: absolute;
  left: 25px;
  top: 25px;
  width: 50px;
  height: 50px;
  background-color: #9bffaf;
  animation: flip 1s infinite;  
}
@keyframes flip {
  0% { transform: rotate(0);}
  50%{ transform: rotateY(180deg);}
  100%{ transform: rotateY(180deg) rotateX(180deg);}
}
</style>
</html>

下面是一个沙漏的css动画。
<!DOCTYPE html>
<html lang="en">
<body>
   <div class="loading">
        <span class="top"></span>
        <span class="bottom"></span>
    </div>
</body>
     <style>
        body {
            /* 取消页面内外边距 */
            margin: 0;
            padding: 0;
           /* 渐变背景 */
            background: linear-gradient(200deg, #b5aee4, #505285);
        }

        .loading {
            width: 86px;
            height: 196px;
            /* 相对定位 */
            position: relative;
            /* 弹性布局 */
            display: flex;
            /* 将元素垂直显示 */
            flex-direction: column;
            /* 将元素靠边对齐 */
            justify-content: space-between;
            align-items: center;
            animation: rotating 2s linear infinite;
        }

        /* 沙漏上下两个容器 */
        .top,
        .bottom {
            width: 70px;
            height: 70px;
            position: relative;
            /* 这里把溢出的部分隐藏 */
            overflow: hidden;
        }

      
        /* 容器里的沙 */
        .top::before,
        .bottom::before {
            content: "";
            /* 绝对定位 */
            position: absolute;
            /* inherit表示继承父元素（这里指宽高） */
            width: inherit;
            height: inherit;
            background-color: #cabbe9;
            /* 执行动画，先设置动画的参数，暂时不指定动画名称，我们在下面再来指定 */
            animation: 2s linear infinite;
        }

        .top::before {
            /* 通过设置圆角来改变沙的形状 */
            border-radius: 0 100% 0 0;
            /* 执行指定的动画 */
            animation-name: drop-sand;
        }

        .bottom::before {
            /* 通过设置圆角来改变沙的形状 */
            border-radius: 0 0 0 25%;
            /* 这里我们将下面的沙移出可视范围 */
            transform: translate(50px, -50px);
            /* 执行指定的动画 */
            animation-name: fill-sand;
        }

        /* 到这里我们还少了个沙子流下来的效果 */
        /* 添加流下的元素 */
        .loading::after {
            content: "";
            width: 5px;
            height: 96px;
            background-color: #cabbe9;
            /* 绝对定位 */
            position: absolute;
            top: 20px;
            /* 执行动画：动画 时长 线性的 无限次播放 */
            animation: flow 2s linear infinite;
        }
    </style>
</html>
阅读量: 1173
发布于:
修改于: