CSS3 如何实现”页面加载”等待的效果呢?


摘要:
下文讲述css应用举例:使用div实现”页面加载框”的方法,如下所示:


实现思路:
使用 keyframes 定义动画变化方式
使用 transform 定义动画滚动方式
使用 animation 进行循环播放动画

例:
使用动画实现 div交替“页面加载”等待的效果

 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.maomao365.com/" />
<title>猫猫教程(www.maomao365.com)--实现加载等待框的方法分享</title>
<style>
.container{
  margin:100px auto;
  width:40px;
  height:40px;
  position:relative;
}
.c1, .c2{
  background-color:red;
  width:40px;
  height:40px;
  position:absolute;
  top:0;
  left:0;
  -webkit-animation: cmove 1.8s infinite ease-in-out;
  animation: cmove 1.8s infinite ease-in-out;
}
.c2{
  -webkit-animation-delay:-0.9s;
  animation-delay:-0.9s;
}
@-webkit-keyframes cmove {
  25% {
    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5)
  }
  50% {
    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg)
  }
  75% {
    -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5)
  }
  100% {
    -webkit-transform: rotate(-360deg)
  }
}
@keyframes cmove {
  25% {
    transform: translateX(42px) rotate(-90deg) scale(0.5);
    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
  }
  50% {
    transform: translateX(42px) translateY(42px) rotate(-179deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
  }
  50.1% {
    transform: translateX(42px) translateY(42px) rotate(-180deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
  }
  75% {
    transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
  }
  100% {
    transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
  }
}
</style>
</head>
<body>
<div class="container">
  <div class="c1"></div>
  <div class="c2"></div>
</div>
</body>
</html>
css 页面加载等待效果

css 页面加载等待效果