CSS3加载等待动画效果

2018-2-28 09:58| 发布者: antzone| 查看: 794| 评论: 0|来自: 蚂蚁部落

加载等待这样的效果,在很多页面都会具有。

它能够给用户一个正能量的反馈,以让用户继续等待下去。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
.spinner {
  width: 40px;
  height: 40px;
  background-color: #333;
  margin: 100px auto;
  animation: sk-rotateplane 1.2s infinite ease-in-out;
}

@keyframes sk-rotateplane {
  0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  }
  50% {
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
  }
  100% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}
.spinner1 {
  width: 40px;
  height: 40px;
  position: relative;
  margin: 100px auto;
}
.double-bounce1,
.double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #333;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  animation: sk-bounce 2.0s infinite ease-in-out;
}
.double-bounce2 {
  animation-delay: -1.0s;
}

@keyframes sk-bounce {
  0%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  }
  50% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}
.spinner3 {
  margin: 100px auto;
  width: 60px;
  height: 40px;
  text-align: center;
  font-size: 10px;
}
.spinner3 > div {
  background-color: #333;
  height: 100%;
  width: 6px;
  display: inline-block;
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}
.spinner3 .rect2 {
  animation-delay: -1.1s;
}
.spinner3 .rect3 {
  animation-delay: -1.0s;
}
.spinner3 .rect4 {
  animation-delay: -0.9s;
}
.spinner3 .rect5 {
  animation-delay: -0.8s;
}

@keyframes sk-stretchdelay {
  0%, 40%, 100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }
  20% {
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}
.spinner4 {
  margin: 100px auto;
  width: 40px;
  height: 40px;
  position: relative;
}
.cube1,
.cube2 {
  background-color: #333;
  width: 15px;
  height: 15px;
  position: absolute;
  top: 0;
  left: 0;
  animation: sk-cubemove 1.8s infinite ease-in-out;
}
.cube2 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

@keyframes sk-cubemove {
  25% {
    transform: translateX(42px) rotate(-90deg) scale(0.5);
  }
  50% {
    transform: translateX(42px) translateY(42px) rotate(-179deg);
  }
  50.1% {
    transform: translateX(42px) translateY(42px) rotate(-180deg);
  }
  75% {
    transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
  }
  100% {
    transform: rotate(-360deg);
  }
}
</style>
</head>
<body>
  <div class="spinner"></div>
  <div class="spinner1">
    <div class="double-bounce1"></div>
    <div class="double-bounce2"></div>
  </div>
  <div class="spinner3">
    <div class="rect1"></div>
    <div class="rect2"></div>
    <div class="rect3"></div>
    <div class="rect4"></div>
    <div class="rect5"></div>
  </div>
  <div class="spinner4">
    <div class="cube1"></div>
    <div class="cube2"></div>
  </div>
</body>
</html>

鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部