Difference between revisions of "Template:CSU CHINA"

Line 134: Line 134:
 
     </nav>
 
     </nav>
  
 +
    <style>
 +
        #labLoad,
 +
        #labLoad img,
 +
        #labLoad div{
 +
            display: flex;
 +
            justify-content: center;
 +
            align-items: center;
 +
        }
 +
        #labLoad div{
 +
            width: 300px;
 +
            height: 300px;
 +
        }
 +
        #labload h1,
 +
        #labLoad img,
 +
        #labLoad .lodt,
 +
        #labLoad .lodo,
 +
        #labLoad .lodb{
 +
            position: absolute;
 +
        }
 +
        #labLoad .lodt{
 +
            border-top: 10px solid tomato;
 +
        }
 +
        #labLoad .lodo{
 +
            border-top: 10px solid orange;
 +
            transform: rotate(120deg);
 +
        }
 +
        #labLoad .lodb{
 +
            border-top: 10px solid dodgerblue;
 +
            transform: rotate(240deg);
 +
        }
 +
        #labLoad img{
 +
            width: 200px;
 +
            height: 200px;
 +
            overflow: hidden;
 +
        }
 +
        #labLoad .lodt,
 +
        #labLoad .lodo,
 +
        #labLoad .lodb{
 +
            animation: loading linear 0.5s infinite;
 +
        }
 +
        @keyframes loading { to{ transform: rotate(360deg); }}
 +
    </style>
 +
 +
    <div class="container-fluid bg-dark align-middle fixed-top h-100" id="labLoad">
 +
        <div>
 +
            <img class="rounded-circle" src="金牌.png" alt="">
 +
            <div class="rounded-circle lodt"></div>
 +
            <div class="rounded-circle lodo"></div>
 +
            <div class="rounded-circle lodb"></div>
 +
        </div>
 +
        <h1 class="text-center text-light display-3 font-weight-bold ml-5 display-3">loading……</h1>
 +
    </div>
 +
    <script> $(document).ready(()=>{ setTimeout(()=>{ $("#labLoad").hide(); }, 800) });</script>
  
 
</body>
 
</body>
  
 
</html>
 
</html>

Revision as of 12:17, 16 November 2019

loading……