乐鱼电竞

教育行业A股IPO第一股（股票代码 003032）

全国咨询/投诉热线：400-618-4000

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

更新时间:2016年05月10日15时16分 来源:乐鱼播客UI培训学院 浏览次数:

首先  今天带来一个比较简单但是蛮实用的一个小案例
有点时候我们经�？醇颐羌釉氐氖焙蚧嵊幸桓鲂∏蚯蛟谀抢锊煌５淖�，告诉我们页面正在加载中，但是现在，我们可以直接用咱们的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 
0 分享到：
和我们在线交谈！
【网站地图】【sitemap】