Skip to main content
 首页 » 学习笔记 » html5/css3

纯CSS3五点连珠loading

2016年08月06日1192

纯CSS3做的五点连珠loading,效果如下:


附上代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>五点loading</title>
  <style media="screen">
    .spinner{
      position: absolute;
      top:50%;
      left: 50%;
      z-index: 11;
      width: 120px;
      margin-left: -60px;
      margin-top: -6px;
      text-align: center;
    }
    .spinner>div{
      width: 12px;
      height: 12px;
      background-color: #67CF22;
      border-radius: 100%;
      display: inline-block;
      -webkit-animation:bouncedelay 2.8s infinite ease-in-out;
      animation:bouncedelay 2.8s infinite ease-in-out;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
    }
    .spinner .bounce1{
      background-color: #cd402e;
    }
    .spinner .bounce2{
      -webkit-animation-delay: -0.16s;
      animation-delay: -0.16s;
      background-color: #b07da8;
    }
    .spinner .bounce3{
      -webkit-animation-delay: -0.32s;
      animation-delay: -0.32s;
      background-color:#f1b428;
    }
    .spinner .bounce4{
      -webkit-animation-delay: -0.48s;
      animation-delay: -0.48s;
      background-color: #06AAA2;
    }
    .spinner .bounce5{
      -webkit-animation-delay: -0.64s;
      animation-delay: -0.64s;
      background-color: #FF0909;
    }
    @-webkit-keyframes bouncedelay{
      0%{
        -webkit-transform: translate(-400px,0);
        opacity: 0;
      }
      35%,65%{
        -webkit-transform: translate(0,0);
        opacity: 1;
      }
      100%{
        -webkit-transform:translate(400px,0);
        opacity: 0;
      }
    }
    @keyframes bouncedelay{
      0%{
        transform: translate(-400px,0);
        opacity: 0;
      }
      35%,65%{
        transform: translate(0,0);
        opacity: 1;
      }
      100%{
        transform:translate(400px,0);
        opacity: 0;
      }
    }
  </style>
</head>
<body>
<div>
  <div class="bounce1"></div>
  <div class="bounce2"></div>
  <div class="bounce3"></div>
  <div class="bounce4"></div>
  <div class="bounce5"></div>
</div>
</body>
</html>
微信