UI培训-css3小球制作圆环制作

首先  今天带来一个比较简单但是蛮实用的一个小案例
有点时候我们经常看见我们加载的时候会有一个小球球在那里不停的转动，告诉我们页面正在加载中，但是现在，我们可以直接用咱们的css3去实现这个效果小球滚动效果 而不用再用什么gif图了
 
那么  首先 要求很简单  只需要咱们了解c3里面关于animation这个属性就好了 那么 咱们开始去制作了
 
我们先看一下效果图 小球是在转动的
    
 
那么  咱们的思路是制作出一个  然后其他直接复制就好了 那么现在正是开始：
 
 
首先  我们要制作出一个最大的div出来  我们让他（div id=”box”）
#box{
width:350px;
height:350px;
 margin:100px auto;
 position:relative;
}
居中 并且加上相对定位
他里面开始在做两个小盒子 分别为 round 和load
<div id="box">
  <div id="rond"></div>
  <div id="load"></div>
</div>
分别添加上样式
#load{
  color:#fff;
  font-family:calibri;
  text-align:center;
  position:absolute;
  top :32px;
  left :26px;
  height:80px;
  width:80px;
  border-radius:40px;
  background:#0CF;
  
}
#rond {
  height:100px;
  width:100px;
  border:1px solid #0CF;
  border-radius:50%;
  position:absolute;
  top:20px;
  left:15px;
}
 
完成之后你会发现页面上的效果就变成如下样子了

  我们得到了一个小圆
距离我们的效果图还差一个会转的小圆球
 
那么我们在#rond下面在添加一个div我们这里命名为#circle
<div id="box">
  <div id="rond">
    <div id="circle"></div>  // 我们新添加的
  </div>
  <div id="load"> </div>
</div>
将我们新添加circle的加上一点样式
#circle{
  height:10px;
  width:10px;
  position:absolute;
  background-color:#0CF;
  border-radius:50%;
  top:0px;
  left:10px;
  margin:5px;
}
把它定位到我们的圆环上  就是我们的#round上 到了这一步  我们的效果图应该就变成
这样了

 
最后一步  咱们只需要将我们的#round加一个animation咯就好了 注意是#round  而不是#circle
#rond {
  height:100px;
  width:100px;
  border:1px solid #0CF;
  border-radius:50%;
  position:absolute;
  top:20px;
  left:15px;
  animation:rond 3s infinite;
}
@keyframes rond {
  0% {transform : rotate(0deg);}
  100% {transform : rotate(360deg);}
}
这个属性是不是就可以做动画了 那么如果说你发现它还不能动的话 是不是咱们就需要给他加上一个私有前缀呀 ，这个可别忘记了啊 -webkit-  -moz-  -ms- -o-
到此为止  大功告成咯  是不是很简单 ！！

本文版权归传智播客UI培训学院所有，欢迎转载，转载请注明作者出处。谢谢！
作者：传智播客UI培训学院
首发：http://www.itcast.cn/ui