zoukankan      html  css  js  c++  java
  • View.js 之加载动画

    <div class="init-loading">
        <div class="loader"></div>
    </div>
    var loading = View.find('.init-loading');
    loading.setAttribute('class', 'hide');
    @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);
        }
    }
    .loader {
        position: absolute;
        top: calc(50% - 1.25em);
        left: calc(50% - 1.25em);
        width: 2.5em;
        height: 2.5em;
        transform: rotate(165deg);
    }
    .loader:before, .loader:after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        display: block;
        width: 0.5em;
        height: 0.5em;
        border-radius: 0.25em;
        transform: translate(-50%, -50%);
    }
    .loader:before {
        animation: before 2s infinite;
    }
    .loader:after {
        animation: after 2s infinite;
    }
    
    .init-loading{
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 99999;
        background: #eee;
    }
    .init-loading.hide {
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.5s;
    }
  • 相关阅读:
    Java 中的 TreeSet
    自定义全局异常处理器(Java)
    GitHub Open Feign 使用总结
    搭建 Maven 仓库
    MySQL 的 SQL 笔记
    一道算法题:查找数组 arr 中第 k 小的奇数
    Java 的参数传递
    接口限流的几种算法
    Java 实现一个自定义分布式 Session
    函数反汇编
  • 原文地址:https://www.cnblogs.com/yang-2018/p/13672993.html
Copyright © 2011-2022 走看看