zoukankan      html  css  js  c++  java
  • eladmin更新2.0版本之后没有刷新加载动画了

    找到index.html 只需把下列代码style样式和

      <div class="sampleContainer">

    复制到里边即可

    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <meta name="renderer" content="webkit">
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
      <style>
        .sampleContainer {
          position: fixed;
          top: 50%;
          left: 50%;
          -webkit-transform: translateX(-50%) translateY(-50%);
           75px;
          height: 100px
        }
    
        .loader {
          position: relative;
           44px;
          height: 8px;
          margin: 12px auto
        }
    
        .dot {
          display: inline-block;
           8px;
          height: 8px;
          border-radius: 4px;
          background: #ccc;
          position: absolute
        }
    
        .dot_1 {
          animation: animateDot1 1.5s linear infinite;
          left: 12px;
          background: #e579b8
        }
    
        .dot_2 {
          animation: animateDot2 1.5s linear infinite;
          animation-delay: .5s;
          left: 24px
        }
    
        .dot_3 {
          animation: animateDot3 1.5s linear infinite;
          left: 12px
        }
    
        .dot_4 {
          animation: animateDot4 1.5s linear infinite;
          animation-delay: .5s;
          left: 24px
        }
    
        @keyframes animateDot1 {
          0% {
            transform: rotate(0) translateX(-12px)
          }
    
          25% {
            transform: rotate(180deg) translateX(-12px)
          }
    
          75% {
            transform: rotate(180deg) translateX(-12px)
          }
    
          100% {
            transform: rotate(360deg) translateX(-12px)
          }
        }
    
        @keyframes animateDot2 {
          0% {
            transform: rotate(0) translateX(-12px)
          }
    
          25% {
            transform: rotate(-180deg) translateX(-12px)
          }
    
          75% {
            transform: rotate(-180deg) translateX(-12px)
          }
    
          100% {
            transform: rotate(-360deg) translateX(-12px)
          }
        }
    
        @keyframes animateDot3 {
          0% {
            transform: rotate(0) translateX(12px)
          }
    
          25% {
            transform: rotate(180deg) translateX(12px)
          }
    
          75% {
            transform: rotate(180deg) translateX(12px)
          }
    
          100% {
            transform: rotate(360deg) translateX(12px)
          }
        }
    
        @keyframes animateDot4 {
          0% {
            transform: rotate(0) translateX(12px)
          }
    
          25% {
            transform: rotate(-180deg) translateX(12px)
          }
    
          75% {
            transform: rotate(-180deg) translateX(12px)
          }
    
          100% {
            transform: rotate(-360deg) translateX(12px)
          }
        }
      </style>
      <link rel="icon" href="<%= BASE_URL %>favicon.ico">
      <title><%= webpackConfig.name %></title>
    </head>
    
    <body>
      <div id="app">
        <div class="sampleContainer">
          <div class="loader">
            <span class="dot dot_1"></span>
            <span class="dot dot_2"></span>
            <span class="dot dot_3"></span>
            <span class="dot dot_4"></span>
          </div>
        </div>
      </div>
      <!-- built files will be auto injected -->
    </body>
    
    </html>
  • 相关阅读:
    查找整数
    Ling To Xml 学习之 对xml增、删、改、查
    JS获得鼠标
    xml之数据岛绑定到表格
    C# 三种序列化[转]
    编程字体
    Oracle 、C#
    提示信息Javascript
    几个好用的日历控件
    收藏网站
  • 原文地址:https://www.cnblogs.com/lovetl/p/12894082.html
Copyright © 2011-2022 走看看