文心博客

用CSS+DIV做的一个loading按钮：

 CSS部分：

<style type="text/css">   
#note{width:100px;height:100px;margin:220px auto;position:relative}   
#note .circle0{ width:100px;height:100px;border-radius:50px;-webkit-border-radius: 50px;}   
#note .circle0{background:-webkit-linear-gradient(#c5c7c9,#ebebeb);position:absolute;z-index:1}   
#note .circle1{width:86px;height:86px;border-radius:43px;-webkit-border-radius: 43px;position:absolute;z-index:2;top:7px;left:7px;background:-webkit-linear-gradient(#fefefe,#e6e6e6);-webkit-box-shadow: 2px 2px 6px #999;}   
#note .circle1 span{color:#8d8d8d;font-family:"Arial Black", Gadget, sans-serif;font-size:1.2em;display:block;text-align:center;line-height:86px;cursor:pointer;position:relative;text-shadow: 1px 1px 1px #fff, 0 0 0 #000;}   
#note .color{width:100px;height:100px;border-radius:50px;-webkit-border-radius: 50px;background:-webkit-linear-gradient(60deg,#005cb8,#afdaff);position:absolute;z-index:2;}   
#note .fonts{-webkit-box-shadow: 2px 2px 6px #1364af;}   
#note .fonts span{color:#0076df}   
#note .circle1 span strong{background:#babdc1;width:13px;height:4px;border-radius:3px;position:absolute;top:67px;left:35px;font-size:0.5em;-webkit-box-shadow:1px 1px 2px #fff}   
#note .circle1 span strong.left{-webkit-transform:rotate(135deg);left:42px;}   
#note .circle1 span strong.right{-webkit-transform:rotate(45deg)}   
#note .small{width:12px;height:12px;border-radius:6px;background:#0066c1;position:absolute;left:50px;z-index:3;}   
#note .dot0{z-index:3;width:80px;height:80px;background:#006bc8;left:-2px;border-radius:45px 60px;top:7px;-webkit-transform:rotate(65deg);left:-2px}   
#note .dot1{z-index:3;width:80px;height:70px;background:#006bc8;left:-5px;border-radius:35px 70px;top:11px;-webkit-transform:rotate(65deg);}   
#note .dot2{width:40px;height:40px;border-radius:20px;-webkit-transform:rotate(309deg);left:20px;top:2px}   
#note .dot3{left:35px;top:1px;width:20px;height:8px;border-radius:12px;-webkit-transform:rotate(172deg);}   
@-webkit-keyframes myload{   
    0%{   
        -webkit-transform: rotate(0deg);   
    }   
    100%{   
        -webkit-transform: rotate(360deg);   
    }   
}   
#note .color{   
                     
    -webkit-animation-name:myload;   
    -webkit-animation-duration:2s;   
    -webkit-animation-timing-function:linear;   
    -webkit-animation-iteration-count:infinite;   
}   
                 
</style>

Html部分：

<div id="note">   
<div class="circle0 color">   
  <div class="small dot0"> </div>   
  <div class="small dot1"> </div>   
  <div class="small dot2"> </div>   
  <div class="small dot2 dot3"> </div>   
</div>   
<div class="circle1 fonts">    
<span>MORE<strong class="left"></strong><strong class="right"></strong></span>    
</div>

查看效果：

http://www.stararly.com/HTML(DIV+CSS)/morebutton.htm