UI培訓(xùn)-css3小球制作圓環(huán)制作

首先  今天帶來(lái)一個(gè)比較簡(jiǎn)單但是蠻實(shí)用的一個(gè)小案例
有點(diǎn)時(shí)候我們經(jīng)?？匆?jiàn)我們加載的時(shí)候會(huì)有一個(gè)小球球在那里不停的轉(zhuǎn)動(dòng)，告訴我們頁(yè)面正在加載中，但是現(xiàn)在，我們可以直接用咱們的css3去實(shí)現(xiàn)這個(gè)效果小球滾動(dòng)效果 而不用再用什么gif圖了
 
那么  首先 要求很簡(jiǎn)單  只需要咱們了解c3里面關(guān)于animation這個(gè)屬性就好了 那么 咱們開(kāi)始去制作了
 
我們先看一下效果圖 小球是在轉(zhuǎn)動(dòng)的
    
 
那么  咱們的思路是制作出一個(gè)  然后其他直接復(fù)制就好了 那么現(xiàn)在正是開(kāi)始：
 
 
首先  我們要制作出一個(gè)最大的div出來(lái)  我們讓他（div id=”box”）
#box{
width:350px;
height:350px;
 margin:100px auto;
 position:relative;
}
居中 并且加上相對(duì)定位
他里面開(kāi)始在做兩個(gè)小盒子 分別為 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;
}
 
完成之后你會(huì)發(fā)現(xiàn)頁(yè)面上的效果就變成如下樣子了

  我們得到了一個(gè)小圓
距離我們的效果圖還差一個(gè)會(huì)轉(zhuǎn)的小圓球
 
那么我們?cè)?rond下面在添加一個(gè)div我們這里命名為#circle
<div id="box">
  <div id="rond">
    <div id="circle"></div>  // 我們新添加的
  </div>
  <div id="load"> </div>
</div>
將我們新添加circle的加上一點(diǎn)樣式
#circle{
  height:10px;
  width:10px;
  position:absolute;
  background-color:#0CF;
  border-radius:50%;
  top:0px;
  left:10px;
  margin:5px;
}
把它定位到我們的圓環(huán)上  就是我們的#round上 到了這一步  我們的效果圖應(yīng)該就變成
這樣了

 
最后一步  咱們只需要將我們的#round加一個(gè)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);}
}
這個(gè)屬性是不是就可以做動(dòng)畫(huà)了 那么如果說(shuō)你發(fā)現(xiàn)它還不能動(dòng)的話 是不是咱們就需要給他加上一個(gè)私有前綴呀 ，這個(gè)可別忘記了啊 -webkit-  -moz-  -ms- -o-
到此為止  大功告成咯  是不是很簡(jiǎn)單 ！！

本文版權(quán)歸傳智播客UI培訓(xùn)學(xué)院所有，歡迎轉(zhuǎn)載，轉(zhuǎn)載請(qǐng)注明作者出處。謝謝！
作者：傳智播客UI培訓(xùn)學(xué)院
首發(fā)：http://xamj520.com/ui