CSS3 loadding加载代码

快乐打工仔 分类:实例代码
本章节分享一段代码实例,它实现了loadding加载效果。

这个效果并不是常见的旋转方式,而是小虫爬动的方式,非常生动。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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>
一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

回复

我来回复
  • 暂无回复内容