文章
73
标签
63
分类
24
主页
归档
标签
分类
链接
关于
目录
  1. 1. 实现效果
  2. 2. Loading-00
  3. 3. Loading-01
  4. 4. Loading-02
  5. 5. Loading-03
  6. 6. Loading-04
  7. 7. Loading-05
  8. 8. Loading-06 & Loading-07
  9. 9. Loading-08
  10. 10. Loading-09
  11. 11. Loading-10
通过CSS3实现各种Loading效果
|webcss
字数总计: 1.8k|阅读时长: 7 分钟|阅读量: 99

Loading效果现在在实际开发中是很常见的，现在网页的体积较大，又或者是使用Vue一类的前端库，尤其是在Ajax请求的时候，浏览器在打开网页的时候会出现一段时间的白屏，这个时候Loading的出现可以给用户一个很好的交互体验。

具体代码可以前往github查看 仓库地址>>

实现效果

首先先看看所实现的效果

接下来来看看一个个是怎么实现的。

Loading-00

loading-00的效果就如音乐播放时的动态条一般，不停的连续执行。

其主要实现思路如下：

  • 每个竖状条都是一个简单的div，div为一个小的圆形。
  • 给每个div加上一个动画效果，该动画的效果是高度逐渐变长，最后再变回原样。
  • 每个div延迟不同的时间才开始执行，这样就会有先后的层次感。

然后来看看各个部分的代码实现。

  • 基本的div元素

    基本的div元素是一个小的圆形。

    scss
    1
    .line {
    2
       display: inline-block;
    3
       width: 15px;
    4
       height: 15px;
    5
       border-radius: 15px;
    6
       margin-top: 20px;
    7
    }

  • 定义动画

    定义的动画主要是改变div的高度，在完成50%的时候达到最高值，完成100%时恢复到原来高度。

    scss
    1
    @keyframes loadingTranslate {
    2
      50% {
    3
        height: 40px;
    4
      }
    5
      100% {
    6
        height: 15px;
    7
      }
    8
    }

  • 设置动画

    将定义的动画添加至animation属性，设置一个动画总执行时间，然后给5个div设置不同的延时时间。

    scss
    1
    .line1 {
    2
      animation: loadingTranslate 1.5s 0s infinite;
    3
    }
    4
    .line2 {
    5
      animation: loadingTranslate 1.5s 0.3s infinite;
    6
    }
    7
    .line3 {
    8
      animation: loadingTranslate 1.5s 0.6s infinite;
    9
    }
    10
    .line4 {
    11
      animation: loadingTranslate 1.5s 0.9s infinite;
    12
    }
    13
    .line5 {
    14
      animation: loadingTranslate 1.5s 1.2s infinite;
    15
    }

  • HTML元素

    将以上设置的CSS属性都添加至HTML元素中。

    html
    1
    <div class="loading">
    2
      <p>loading-00</p>
    3
      <div class="line line1"></div>
    4
      <div class="line line2"></div>
    5
      <div class="line line3"></div>
    6
      <div class="line line4"></div>
    7
      <div class="line line5"></div>
    8
    </div>

最后的实现效果：

Loading-01

如果细心的看完loading-00的实现过程，一定可以联想到loading-01的实现。

loading-00是通过给高度加动画，那么loading-01就是通过给宽度加动画，同样给5个div不同的延迟时间。

这里只给出其动画定义，其他的内容与loading-00类似，详细的内容可以通过Github查看

scss
1
@keyframes loadingTranslate {
2
  50% {
3
    width: 40px;
4
  }
5
  100% {
6
    width: 15px;
7
  }
8
}

最后实现效果：

Loading-02

loading-02的实现效果如下。

在loading-00和loading-01中是通过给高度和宽度增加动画实现的，而loading-02是通过给五个div增加纵向位移实现的。

loading-02实现的关键点就在于translateY的使用，因为动画是从下往上跳动，所以在完成度50%时，translateY设定为负值。

其定义的动画部分代码如下所示。

scss
1
@keyframes loadingTranslate {
2
  50% {
3
    transform: translateY(-20px);
4
  }
5
  100% {
6
    transform: translateY(0px);
7
  }
8
}

最终效果呈现：

Loading-03

loading-03的实现效果如下。

通过效果图我们发现有两点差异：

  • loading过程中透明度会发生变化，这个通过opacity实现。
  • 在接近完成时有个上下轻微抖动的效果，这个通过设置小单位的正负translateY值。

得到的动画代码如下。

scss
1
@keyframes loadingTranslate {
2
  0% {
3
    transform: translateY(0);
4
    opacity: 1;
5
  }
6
  30% {
7
    transform: translateY(0);
8
    opacity: .3;
9
  }
10
  50% {
11
    transform: translateY(-20px);
12
    opacity: .8;
13
  }
14
  70% {
15
    transform: translateY(3px);
16
    opacity: .8;
17
  }
18
  85% {
19
    transform: translateY(-3px);
20
  }
21
  100% {
22
    transform: translateY(0);
23
    opacity: 1;
24
  }
25
}

Loading-04

loading-04的动画效果如下。

loading-04的效果同loading-03类似，loading-03是通过纵向的位移变换，可以通过translateY实现。

loading-04是通过水平方向位移变换，可以通过translateX来实现。

而有一点不同的是，loading-04的div初始位置就是translateX(-300px)，表示从左侧开始运动。

scss
1
@keyframes loadingTranslate {
2
  50% {
3
    transform: translateX(0);
4
    opacity: .8;
5
  }
6
  100% {
7
    transform: translateX(300px);
8
    opacity: 0;
9
  }
10
}

Loading-05

loading-05定义的动画如下所示。

loading-05是旋转效果，可以很容易想到是通过rotate实现。

loading-05中只有一个div，边框设置为虚线即可，其CSS样式如下。

scss
1
.ring {
2
  width: 10px;
3
  height: 10px;
4
  margin: 0 auto;
5
  padding: 10px;
6
  border: 7px dashed #000;
7
  border-radius: 50%;
8
}

其定义的动画样式如下。

scss
1
@keyframes loadingTranslate {
2
  50% {
3
    transform: rotate(180deg);
4
  }
5
  100% {
6
    transform: rotate(360deg);
7
  }
8
}

Loading-06 & Loading-07

loading-06与loading-07的动画效果如下。

loading-06与loading-07类似，loading-07在loading-06的基础上增加了几个点。

loading-06中是通过设置一个纵向的div-1，在该div-1内增加一个div-2，div-2就是转动的圆点，div-2通过绝对定位计算出实际位置，当div-1大小变化时，div-2也应该重新计算位置。

div-2的CSS代码如下所示。

scss
1
.ball {
2
  position: absolute;
3
  top: -10px;
4
  left: -1px;
5
  width: 16px;
6
  height: 16px;
7
  border-radius: 100%;
8
  background: #f44336;
9
}

在loading-07中，div-1内有四个div，分别表示转动的四个圆点，也是通过绝对定位计算偏移位置。

最后设置动画，只需要让div-1在一个动画周期内旋转360度即可。

scss
1
@keyframes loadingTranslate {
2
  100% {
3
    transform: rotate(360deg);
4
  }
5
}

Loading-08

loading-08的效果图如下所示。

loading-08的动画主要涉及到放大缩小和旋转两个方面，放大缩小通过scale实现，旋转通过rotate实现。具体的可以看看github上的完整代码。

Loading-09

主要思路如下：

  • 构造三个并排的圆
  • 通过设置一定的动画延时来使得三个圆有此起彼伏的感觉

infinite表示动画无限次播放，alternate表示动画从头到尾后再从尾到头。

实现代码：

scss
1
@keyframes loadingTranslate {
2
  form {
3
    transform: scale(0.2);
4
  }
5
6
  to {
7
    transform: scale(1.2);
8
  }
9
}

最终实现效果：

Loading-10

这种是最简单的，HTML只需要一个标签，CSS也是寥寥几行。简单说一下思路：

  • 给一个元素设置宽高相等的数值，
  • border-radius设置成50%使其变成一个圆形，
  • 将背景色设置为透明，给元素加上几个像素的边框，并配上自己喜欢的颜色，
  • 需要注意的是，这里要将其中一个边的边框设置为透明，使其看起来像是一个只有四分之三的圆环，
  • 然后为其设置动画，让它动起来就可以了。

实现代码：

scss
1
@keyframes loadingRotate {
2
  from {
3
    transform: translate(0%, 0%) rotate(0deg);
4
  }
5
  to {
6
    transform: translate(0%, 0%) rotate(360deg);
7
  }
8
}

最终实现效果：

参考：

头条号——Coder分享

文章作者: Izzio
文章链接: https://izzio.netlify.com/blog/web/css/20672.html
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Seventy！
CSS
ENG