css实现叶子形状loading效果

本文实例讲述了css实现叶子形状loading效果的方法。分享给大家供大家参考。具体实现方法如下：
代码如下:
<!doctype html>
<html>
<head>
+ g& W5 J  s+ }4 \# L<style type=text/css>
body{ background: #000;}
$ b7 t" N! v" t, `3 r/ ?: c.color1{ background: #fde515;}
$ ~3 g  l; M9 V! [" M.color2{ background: #00def2;}
@-webkit-keyframes loadrotate{
+ I& W6 A* n& v: hfrom{ -webkit-transform:rotatez(0deg);}
' f0 L$ d" Y* L- X  E8 s2 I8 U/ U* Yto{ -webkit-transform:rotatez(360deg);}
$ j  f2 s+ x' v+ d}
@keyframes loadrotate{
from{ transform:rotatez(0deg);}
to{ transform:rotatez(360deg);}
- l+ N) p$ Z, G3 j5 p  _}
#loading{ width: 100px; height: 100px; position: absolute; left:50%; top:50%; margin-left:-50px; margin-top: -50px; -webkit-animation:loadrotate 3s linear infinite; -webkit-animation-fill-mode:both; animation:loadrotate 3s linear infinite; animation-fill-mode:both;}
* Y" `# E4 m9 K% l0 U#loading div{ width: 20px; height:30px; position: absolute;left:40px; top:35px; -webkit-transform:rotatez(0) translatex(60px) ; opacity: 1; border-radius: 50% 0; }
#loading div:nth-child(2){-webkit-transform:rotatez(36deg) translatex(60px) ; opacity: 0.8; }
#loading div:nth-child(3){-webkit-transform:rotatez(72deg) translatex(60px); opacity: 0.6; }
5 d8 M; e' O% Q; V1 C- M#loading div:nth-child(4){-webkit-transform:rotatez(108deg) translatex(60px); opacity: 0.4;}
1 P7 L0 ]5 o9 C  b! ~$ G# D#loading div:nth-child(5){-webkit-transform:rotatez(144deg) translatex(60px) ; opacity: 0.2;}
% }4 I# J) w6 D4 F#loading div:nth-child(6){-webkit-transform:rotatez(180deg) translatex(60px) ; opacity: 1; }
1 ~5 K# M  I6 X) S#loading div:nth-child(7){-webkit-transform:rotatez(216deg) translatex(60px) ; opacity: 0.8; }
9 S: q: Z. w" P6 E. H  d6 b1 p#loading div:nth-child(8){-webkit-transform:rotatez(252deg) translatex(60px) ; opacity: 0.6; }
3 L& d; r3 v, L0 Z#loading div:nth-child(9){-webkit-transform:rotatez(288deg) translatex(60px) ; opacity: 0.4; }
& H( o5 `8 e2 Q+ u, X+ Z4 ^#loading div:nth-child(10){-webkit-transform:rotatez(324deg) translatex(60px) ; opacity: 0.2; }
</style>
3 e& H* x5 _/ `% Y1 K$ S* P& p</head>
7 L! A6 v: C/ |! j$ A; o<body>
: X. t! r0 S: M& A  n; k- |3 B<div id=loading>
1 G. y$ h+ }, p6 K<div class=color1></div>
, m) H, O7 T( p- Q+ d7 w- H# B<div class=color1></div>
$ ?/ f! j: L3 t# @, o6 s<div class=color1></div>
4 [1 ~( p- I7 J5 G, `1 u2 F<div class=color1></div>
( k* e' ^5 l$ V$ u: ]; o, I<div class=color1></div>
0 h' v5 P  Y5 G& [3 j  y<div class=color2></div>
3 @- |- j5 f- X# ]3 E- \$ I4 w<div class=color2></div>
<div class=color2></div>
<div class=color2></div>
8 F$ }2 F. Z& b- ]4 i% T<div class=color2></div>
</div>
</body>
</html>
# n4 ^/ G& j2 r2 V& i5 [$ T运行效果如下图所示：

: U# J$ J, v/ x8 \! F                               
登录/注册后可看大图

希望本文所述对大家的web前端设计有所帮助。

0 g2 l6 _( t0 X* H更多网页制作信息请查看： 网页制作

你这样的表现，就只配这几个字：窝囊废

回来了 呵呵刚才在斗地主那 ~~~~

哈哈 ok ~~~

现在做什么网站好？

到你的~~贴吧收藏~~~我的发言~`找

哎 天理何在啊??

命不能争，运可以造，弱者认命，强者抗命，能者求命，智者造命。