Question

我现在非常谦卑。我试图将此Skype styled preloader添加到我正在制作的主题中，但我不知道如何调用该函数。我觉得好像它需要Javascript，但它不在网站上。请＆amp;感谢您以后的参考

<!-- HTML FILES -->
    <div class="table">
      <div class="table--cell">
        <div class="loader">
          <span class="loader--ball loader--ball__first"></span>
          <span class="loader--ball"></span>
          <span class="loader--ball"></span>
          <span class="loader--ball"></span>
        </div>
      </div>
    </div>

<!-- CSS FILE -->
    html body{
      background-color:#2980b9;
      width:100%;
      height:100vh;
    }
    .table{
      width:100%;
      height:100%;
      display:table;
      .table--cell{
        display:table-cell;
        vertical-align:middle;
        text-align:center;
      }
    }
    .loader{
      display:inline-block;
      width:120px;
      height:120px;
      .loader--ball{
        position:absolute;
        left:0;
        right:0;
        margin:0 auto;
        width:10px;
        height:10px;
        border-radius:50%;
        background:#ecf0f1;
        transform-origin:0 60px;
        display:block;
        animation: 2s rotate cubic-bezier(0.775, 0.030, 0.350, 1.000) infinite;
          @for $i from 1 through 4 {
          &:nth-child(#{$i}) { 
            animation-delay:(0.1s * $i); 
          }
        }
      }
    }

    @keyframes rotate { 
      0%   { transform: rotate(0deg); } 
      100% { transform: rotate(360deg); }
    }

    .loader--ball:first-child{
      background:none;
    }
    .loader--ball__first:before{
     content:'';
     width:10px;
     height:10px;
      position:absolute;
      z-index:10;
      top:0;
      bottom:0;
      background:#ecf0f1;
      display:block;
      border-radius:50%;
     animation:2s grow cubic-bezier(0.775, 0.035, 0.310, 1.000)   infinite;
    }

    @keyframes grow {
      0%, 
      10% {
           width:20px; 
           height:20px;
           top:-2px;
           left:-5px;
          }

      50% { 
        width:10px; 
        height:10px;
        left:-5px;
      }
      85%, 100% {
        width:20px; 
        height:20px;
        top:-2px;
        left:-5px;
      }
    }

Answer 1

示例使用SASS（scss）。如果你不使用Sass，你需要编译的css。 Example with compiled CSS

编译CSS：

html body {
  background-color: #2980b9;
  width: 100%;
  height: 100vh;
}

.table {
  width: 100%;
  height: 100%;
  display: table;
}
.table .table--cell {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.loader {
  display: inline-block;
  width: 120px;
  height: 120px;
}
.loader .loader--ball {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ecf0f1;
  -webkit-transform-origin: 0 60px;
      -ms-transform-origin: 0 60px;
          transform-origin: 0 60px;
  display: block;
  -webkit-animation: 2s rotate cubic-bezier(0.775, 0.03, 0.35, 1) infinite;
          animation: 2s rotate cubic-bezier(0.775, 0.03, 0.35, 1) infinite;
}
.loader .loader--ball:nth-child(1) {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}
.loader .loader--ball:nth-child(2) {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
.loader .loader--ball:nth-child(3) {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
.loader .loader--ball:nth-child(4) {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}

@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.loader--ball:first-child {
  background: none;
}

.loader--ball__first:before {
  content: '';
  width: 10px;
  height: 10px;
  position: absolute;
  z-index: 10;
  top: 0;
  bottom: 0;
  background: #ecf0f1;
  display: block;
  border-radius: 50%;
  -webkit-animation: 2s grow cubic-bezier(0.775, 0.035, 0.31, 1) infinite;
          animation: 2s grow cubic-bezier(0.775, 0.035, 0.31, 1) infinite;
}

@-webkit-keyframes grow {
  0%, 
  10% {
    width: 20px;
    height: 20px;
    top: -2px;
    left: -5px;
  }
  50% {
    width: 10px;
    height: 10px;
    left: -5px;
  }
  85%, 100% {
    width: 20px;
    height: 20px;
    top: -2px;
    left: -5px;
  }
}

@keyframes grow {
  0%, 
  10% {
    width: 20px;
    height: 20px;
    top: -2px;
    left: -5px;
  }
  50% {
    width: 10px;
    height: 10px;
    left: -5px;
  }
  85%, 100% {
    width: 20px;
    height: 20px;
    top: -2px;
    left: -5px;
  }
}

试图添加只有HTML / CSS的预加载器

1 个答案: