zoukankan      html  css  js  c++  java
  • 防苹果原生加载中

     一 html结构

    <div class="ui-page-loading">
         <div class="ui-loading-item">
         	<div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
         </div>
    </div>
    

    二 css样式

    /*ui-page-loading页面局部加载样式*/
    .ui-page-loading {
      padding: 0.2rem 0;
      position: relative;
      text-align: center;
    }
    .ui-page-loading::after {
    	content: '努力加载中...';
    	margin-left: 0.2rem;
    	font-size: .16rem;
    }
    .ui-loading-item{
    	position: absolute;
    	left:35%;
    	top:45%;
    }
    @-webkit-keyframes page-loading {
      50% {opacity: 0.3; }
      100% {opacity: 1; }
    }
    
    @keyframes page-loading {
      50% {opacity: 0.3; }
      100% {opacity: 1; }
    }
    .ui-loading-item > div {
      background-color: #333;
      0.01rem;
      height:0.05rem;
      border-radius:0.02rem;
      margin:0.001rem;
      -webkit-animation-fill-mode: both;
              animation-fill-mode: both;
      position: absolute;
    }
    .ui-loading-item > div:nth-child(1) {
      top:0.07rem;
      left: 0;
      -webkit-animation: page-loading 1.2s 0.12s infinite ease-in-out;
              animation: page-loading 1.2s 0.12s infinite ease-in-out; }
    .ui-loading-item > div:nth-child(2) {
      top:0.05rem;
      left:0.05rem;
      -webkit-transform: rotate(-45deg);
              transform: rotate(-45deg);
      -webkit-animation: page-loading 1.2s 0.24s infinite ease-in-out;
              animation: page-loading 1.2s 0.24s infinite ease-in-out; }
    .ui-loading-item > div:nth-child(3) {
      top: 0;
      left:0.07rem;
      -webkit-transform: rotate(90deg);
              transform: rotate(90deg);
      -webkit-animation: page-loading 1.2s 0.36s infinite ease-in-out;
              animation: page-loading 1.2s 0.36s infinite ease-in-out; }
    .ui-loading-item > div:nth-child(4) {
      top: -0.05rem;
      left: 0.05rem;
      -webkit-transform: rotate(45deg);
              transform: rotate(45deg);
      -webkit-animation: page-loading 1.2s 0.48s infinite ease-in-out;
              animation: page-loading 1.2s 0.48s infinite ease-in-out; }
    .ui-loading-item > div:nth-child(5) {
      top: -0.07rem;
      left: 0;
      -webkit-animation: page-loading 1.2s 0.6s infinite ease-in-out;
              animation: page-loading 1.2s 0.6s infinite ease-in-out; }
    .ui-loading-item > div:nth-child(6) {
      top: -0.05rem;
      left: -0.05rem;
      -webkit-transform: rotate(-45deg);
              transform: rotate(-45deg);
      -webkit-animation: page-loading 1.2s 0.72s infinite ease-in-out;
              animation: page-loading 1.2s 0.72s infinite ease-in-out; }
    .ui-loading-item > div:nth-child(7) {
      top: 0;
      left: -0.07rem;
      -webkit-transform: rotate(90deg);
              transform: rotate(90deg);
      -webkit-animation: page-loading 1.2s 0.84s infinite ease-in-out;
              animation: page-loading 1.2s 0.84s infinite ease-in-out; }
    .ui-loading-item > div:nth-child(8) {
      top: 0.05rem;
      left: -0.05rem;
      -webkit-transform: rotate(45deg);
              transform: rotate(45deg);
      -webkit-animation: page-loading 1.2s 0.96s infinite ease-in-out;
              animation: page-loading 1.2s 0.96s infinite ease-in-out; }
    /*ui-page-loading页面局部加载样式 end*/
    

      

  • 相关阅读:
    uIP学习笔记
    ALIENTEK 战舰ENC28J60 LWIP和UIP补充例程
    PID整定方法
    ENC28j60以太网芯片驱动程序简介
    Petit FatFs
    如何使用可控硅?(详细教程)
    Linux查看系统资源占用
    驾照科目三考试通过需要注意什么?
    科目三考试
    驾照的科目三考试中,如何完成直线行驶?
  • 原文地址:https://www.cnblogs.com/lily1010/p/5597914.html
Copyright © 2011-2022 走看看