CSS3 loadding載入程式碼

admin發表於2018-08-02
CSSS3
本章節分享一段程式碼例項，它實現了loadding載入效果。

這個效果並不是常見的旋轉方式，而是小蟲爬動的方式，非常生動。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
.container {
  position: relative;
  width: 200px;
  height: 20px;
  margin: 0 auto;
}
.loading {
  width: 135px;
  height: 20px;
  color: #ccc;
  font-weight: bold;
  border-bottom: 1px solid #000;
  text-align: center;
  float: left;
}
.bug {
  position: absolute;
  left: 0px;
  height: 20px;
  width: 35px;
  background: transparent;
  border: none;
  animation: bug-move 4s ease infinite;
}
@keyframes bug-move {
  0% {
    left: 0px;
  }
  13% {
    left: 0px;
  }
  25% {
    left: 25px;
  }
  38% {
    left: 25px;
  }
  50% {
    left: 50px;
  }
  63% {
    left: 50px;
  }
  75% {
    left: 75px;
  }
  88% {
    left: 75px;
  }
  100% {
    left: 100px;
  }
}
.bug-head {
  position: relative;
  top: 10px;
  width: 10px;
  height: 10px;
  background: green;
  border: none;
  border-radius: 0 50% 50% 0;
  float: left;
  box-shadow: 2px 2px 2px;
  animation: bug-head-move 1s ease infinite;
}
@keyframes bug-head-move {
  0% {
    width: 10px;
  }
  50% {
    width: 5px;
  }
  100% {
    width: 10px;
  }
}
.bug-eye {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 3px;
  height: 3px;
  background: #000;
  border-radius: 50%;
}
.bug-mouth {
  position: absolute;
  top: 7px;
  right: 1px;
  width: 2px;
  height: 1px;
  background: #000;
  border-radius: 50%;
}
.bug-body-left {
  position: relative;
  top: 10px;
  width: 5px;
  height: 10px;
  background: green;
  border: none;
  border-radius: 50% 0 50% 0;
  float: left;
  box-shadow: 2px 2px 2px;
  animation: bug-body-left-move 1s ease infinite;
}
@keyframes bug-body-left-move {
  0% {
    top: 10px;
    height: 10px;
  }
  50% {
    top: 5px;
    height: 15px;
  }
  100% {
    top: 10px;
    height: 10px;
  }
}
.bug-body {
  position: relative;
  top: 10px;
  width: 3px;
  height: 10px;
  background: green;
  border: none;
  float: left;
  box-shadow: 2px 2px 2px;
  animation: bug-body-move 1s ease infinite;
}
@keyframes bug-body-move {
  0% {
    top: 10px;
  }
  50% {
    top: 5px;
  }
  100% {
    top: 10px;
  }
}
.bug-body-right {
  position: relative;
  top: 10px;
  width: 5px;
  height: 10px;
  background: green;
  border: none;
  border-radius: 0 50% 0 50%;
  float: left;
  box-shadow: 2px 2px 2px;
  animation: bug-body-right-move 1s ease infinite;
}
@keyframes bug-body-right-move {
  0% {
    top: 10px;
    height: 10px;
  }
  50% {
    top: 5px;
    height: 15px;
  }
  100% {
    top: 10px;
    height: 10px;
  }
}
.bug-foot {
  position: relative;
  top: 10px;
  width: 10px;
  height: 10px;
  background: green;
  border: none;
  border-radius: 50% 0 0 50%;
  float: left;
  box-shadow: 2px 2px 2px;
  animation: bug-foot-move 1s ease infinite;
}
@keyframes bug-foot-move {
  0% {
    width: 10px;
  }
  50% {
    width: 5px;
  }
  100% {
    width: 10px;
  }
}
</style>
</head>
<body>
  <div class="container">
    <div class="loading">l o a d i n g</div>
    <div class="bug">
      <div class="bug-foot"></div>
      <div class="bug-body-left"></div>
      <div class="bug-body"></div>
      <div class="bug-body-right"></div>
      <div class="bug-head">
        <div class="bug-eye"></div>
        <div class="bug-mouth"></div>
      </div>
    </div>
  </div>
</body>
</html>

相關文章