CSS3不同样式的loading效果

女爷i 2023-06-23 09:56 21阅读 0赞

效果如下：

![20190726210235728.gif][]

各种炫酷动画可参考网站：[https://www.html5tricks.com/tag/loading动画/][https_www.html5tricks.com_tag_loading]

html代码

这里为了减少代码量，并没有做兼容性处理，一般我们需要在上述代码animation、animation-delay、keyframes前加入-webkit-在写一次样式。

上面代码中宽高等都是用的em作为单位，这个的好处在于可以用font-size来控制其大小。

1.第一个动画的实现

<style>

body {
        background: #56b4ab;
    }
    
    .loader,
    .loader:before,
    .loader:after {
        background: #FFF;
        /*
        * load1：执行的动画名
        * 1s：执行一秒
        * infinite：执行无限次
        * ease-in-out：动画以低速开始和结束
        */
        animation: load1 1s infinite ease-in-out;
        width: 1em;
        height: 4em;
    }
    
    .loader:before,
    .loader:after {
        position: absolute;
        top: 0;
        content: '';
    }
    
    .loader:before {
        left: -1.5em;
    }
    
    .loader {
        text-indent: -9999em;
        margin: 40% auto;
        position: relative;
        font-size: 11px;
        /* 延时0.16s */
        animation-delay: 0.16s;
    }
    
    .loader:after {
        left: 1.5em;
        /* 延时0.32s */
        animation-delay: 0.32s;
    }
    
    @keyframes load1 {
        0%,
        80%,
        100% {
            box-shadow: 0 0 #FFF;
            height: 4em;
        }
        40% {
            /* 实现上部拉伸 */
            box-shadow: 0 -2em #ffffff;
            /* 实现下部拉伸 */
            height: 5em;
        }
    }

</style>

2.第二个动画的实现

body {
        background: #56b4ab;
    }
    
    .loader,
    .loader:before,
    .loader:after {
        border-radius: 50%;
    }
    
    .loader:before,
    .loader:after {
        position: absolute;
        top: -0.1em;
        content: '';
        width: 5.2em;
        height: 10.2em;
        background: #56b4ab;
    }
    
    .loader {
        font-size: 11px;
        text-indent: -99999em;
        margin: 30% auto;
        position: relative;
        width: 10em;
        height: 10em;
        box-shadow: inset 0 0 0 1em #FFF;
    }
    
    .loader:before {
        border-radius: 10.2em 0 0 10.2em;
        left: -0.1em;
        /* 设置旋转元素的基点位置 */
        transform-origin: 5.2em 5.1em;
        /*
          * load2：执行的动画名
          * 2s：执行2秒
          * infinite：执行无限次 
          * 1.5s：延时1.5秒
          */
        animation: load2 2s infinite 1.5s;
    }
    
    .loader:after {
        border-radius: 0 10.2em 10.2em 0;
        left: 5.1em;
        transform-origin: 0px 5.1em;
        animation: load2 2s infinite;
    }
    
    @keyframes load2 {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }

这个动画主要利用了旋转和颜色遮挡来实现动画效果。

3.第三个动画的实现

body{
        background: #56b4ab;
    }
    .loader {
        font-size: 10px;
        margin: 30% auto;
        text-indent: -9999em;
        width: 11em;
        height: 11em;
        border-radius: 50%;
        /* 线性渐变，从左到右，从白色到透明，0％代表起点和100％是终点 */
        background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
        position: relative;
        animation: load3 1.4s infinite linear;
    }
    .loader:before,
    .loader:after{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
    }
    .loader:before {
        width: 50%;
        height: 50%;
        background: #FFF;
        border-radius: 100% 0 0 0;
    }
    .loader:after {
        background: #56b4ab;
        width: 75%;
        height: 75%;
        border-radius: 50%;
        margin: auto;
        bottom: 0;
        right: 0;
    }
    @keyframes load3 {
      0% {
            transform: rotate(0deg);
        }
      100% {
             transform: rotate(360deg);
         }
    }

实现：线性渐变+颜色遮挡+旋转

4.第四个动画的实现

body{
        background: #56b4ab;
    }
    .loader {
        font-size: 20px;
        margin: 45% auto;
        width: 1em;
        height: 1em;
        border-radius: 50%;
        position: relative;
        text-indent: -9999em;
        /* liner：规定以相同速度开始至结束的过渡效果*/
        animation: load4 1.3s infinite linear;
    }
    @keyframes load4 {
      0%,
      100% {
            box-shadow: 
            0em -3em 0em 0.2em #ffffff, 
            2em -2em 0 0em #ffffff, 
            3em 0em 0 -0.5em #ffffff, 
            2em 2em 0 -0.5em #ffffff, 
            0em 3em 0 -0.5em #ffffff, 
            -2em 2em 0 -0.5em #ffffff, 
            -3em 0em 0 -0.5em #ffffff, 
            -2em -2em 0 0em #ffffff;
        }
      12.5% {
              box-shadow: 
                0em -3em 0em 0em #ffffff, 
                2em -2em 0 0.2em #ffffff, 
                3em 0em 0 0em #ffffff, 
                2em 2em 0 -0.5em #ffffff, 
                0em 3em 0 -0.5em #ffffff, 
                -2em 2em 0 -0.5em #ffffff, 
                -3em 0em 0 -0.5em #ffffff, 
                -2em -2em 0 -0.5em #ffffff;
              }
      25% {
            box-shadow: 
                0em -3em 0em -0.5em #ffffff, 
                2em -2em 0 0em #ffffff, 
                3em 0em 0 0.2em #ffffff, 
                2em 2em 0 0em #ffffff, 
                0em 3em 0 -0.5em #ffffff, 
                -2em 2em 0 -0.5em #ffffff, 
                -3em 0em 0 -0.5em #ffffff, 
                -2em -2em 0 -0.5em #ffffff;
             }
      37.5% {
              box-shadow: 
                0em -3em 0em -0.5em #ffffff, 
                2em -2em 0 -0.5em #ffffff, 
                3em 0em 0 0em #ffffff, 
                2em 2em 0 0.2em #ffffff, 
                0em 3em 0 0em #ffffff, 
                -2em 2em 0 -0.5em #ffffff, 
                -3em 0em 0 -0.5em #ffffff, 
                -2em -2em 0 -0.5em #ffffff;
               }
      50% {
            box-shadow: 
                0em -3em 0em -0.5em #ffffff, 
                2em -2em 0 -0.5em #ffffff, 
                3em 0em 0 -0.5em #ffffff, 
                2em 2em 0 0em #ffffff, 
                0em 3em 0 0.2em #ffffff, 
                -2em 2em 0 0em #ffffff, 
                -3em 0em 0 -0.5em #ffffff, 
                -2em -2em 0 -0.5em #ffffff;
             }
      62.5% {
              box-shadow: 
                0em -3em 0em -0.5em #ffffff, 
                2em -2em 0 -0.5em #ffffff, 
                3em 0em 0 -0.5em #ffffff, 
                2em 2em 0 -0.5em #ffffff, 
                0em 3em 0 0em #ffffff, 
                -2em 2em 0 0.2em #ffffff, 
                -3em 0em 0 0em #ffffff, 
                -2em -2em 0 -0.5em #ffffff;
               }
      75% {
                box-shadow: 
                0em -3em 0em -0.5em #ffffff, 
                2em -2em 0 -0.5em #ffffff, 
                3em 0em 0 -0.5em #ffffff, 
                2em 2em 0 -0.5em #ffffff, 
                0em 3em 0 -0.5em #ffffff, 
                -2em 2em 0 0em #ffffff, 
                -3em 0em 0 0.2em #ffffff, 
                -2em -2em 0 0em #ffffff;
            }
      87.5% {
              box-shadow: 
                0em -3em 0em 0em #ffffff, 
                2em -2em 0 -0.5em #ffffff, 
                3em 0em 0 -0.5em #ffffff, 
                2em 2em 0 -0.5em #ffffff, 
                0em 3em 0 -0.5em #ffffff, 
                -2em 2em 0 0em #ffffff, 
                -3em 0em 0 0em #ffffff, 
                -2em -2em 0 0.2em #ffffff;
              }
    }

--------------------

![20191229112121499.png][]

想要整理更多的碎片知识，扫码关注下面的公众号，让我们在哪里接着唠！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70][]

[20190726210235728.gif]: https://img-blog.csdnimg.cn/20190726210235728.gif
[https_www.html5tricks.com_tag_loading]: https://www.html5tricks.com/tag/loading%E5%8A%A8%E7%94%BB/
[20191229112121499.png]: https://img-blog.csdnimg.cn/20191229112121499.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191229112346758.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0,size_16,color_FFFFFF,t_70