首先 今天帶來一個(gè)比較簡(jiǎn)單但是蠻實(shí)用的一個(gè)小案例
有點(diǎn)時(shí)候我們經(jīng)??匆娢覀兗虞d的時(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è)屬性就好了 那么 咱們開始去制作了
我們先看一下效果圖 小球是在轉(zhuǎn)動(dòng)的
那么 咱們的思路是制作出一個(gè) 然后其他直接復(fù)制就好了 那么現(xiàn)在正是開始:
首先 我們要制作出一個(gè)最大的div出來 我們讓他(div id=”box”)
#box{
width:350px;
height:350px;
margin:100px auto;
position:relative;
}
居中 并且加上相對(duì)定位
他里面開始在做兩個(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)畫了 那么如果說你發(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://m.8y3kgpwe.cn/ui