弄一个好玩的自定义加载动画（超级轻量级）

作者: 不忘初心_d | 来源:发表于2020-05-13 20:45 被阅读0次

弄一个好玩的自定义加载动画（超级轻量级）
Android 加载动画源码资源大全
Android 加载笑脸/哭脸动画
iOS开发中的小技巧9：mjrefresh刷新自定义动画
UITableview上拉加载和下拉刷新（笔记）
iOS 一个好玩的加载动画
Android自定义控件圆角圆柱形
一个支持Material风格的ProgressBar，支持自定义
Dsepicable Me 卑鄙的我是哪个卑
自定义View仿抖音视频加载BufferLineView

效果图：

SDGIF_Rusult_1.gif

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .loading {
              position: relative;
              width: 2.5em;
              height: 2.5em;
              transform: rotate(165deg);
            }
            .loading:before, .loading:after {
              content: '';
              position: absolute;
              top: 50%;
              left: 50%;
              display: block;
              width: 0.5em;
              height: 0.5em;
              border-radius: 0.25em;
              transform: translate(-50%, -50%);
            }
            .loading:before {
              animation: before 2s infinite;
            }
            .loading:after {
              animation: after 2s infinite;
            }
            
            @keyframes before {
              0% {
                width: 0.5em;
                box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
              }
              35% {
                width: 2.5em;
                box-shadow: 0 -0.5em rgba(225, 20, 98, 0.75), 0 0.5em rgba(111, 202, 220, 0.75);
              }
              70% {
                width: 0.5em;
                box-shadow: -1em -0.5em rgba(225, 20, 98, 0.75), 1em 0.5em rgba(111, 202, 220, 0.75);
              }
              100% {
                box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
              }
            }
            @keyframes after {
              0% {
                height: 0.5em;
                box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
              }
              35% {
                height: 2.5em;
                box-shadow: 0.5em 0 rgba(61, 184, 143, 0.75), -0.5em 0 rgba(233, 169, 32, 0.75);
              }
              70% {
                height: 0.5em;
                box-shadow: 0.5em -1em rgba(61, 184, 143, 0.75), -0.5em 1em rgba(233, 169, 32, 0.75);
              }
              100% {
                box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
              }
            }
            .loading {
              position: absolute;
              top: calc(50% - 1.25em);
              left: calc(50% - 1.25em);
            }
        </style>
    </head>
    <body>
        <div class="loading"></div>
    </body>
</html>