css实现叶子形状loading效果

本文实例讲述了css实现叶子形状loading效果的方法。分享给大家供大家参考。具体实现方法如下：
代码如下:
/ b; v& B6 V) s+ _( @; t! F4 f<!doctype html>
<html>
<head>
( V7 F2 h  \7 K, \9 e6 A1 D<style type=text/css>
. L# D& u- q& y) J/ E) p1 Jbody{ background: #000;}
.color1{ background: #fde515;}
.color2{ background: #00def2;}
; e# k( \3 y4 J- Y( [, I9 Q@-webkit-keyframes loadrotate{
from{ -webkit-transform:rotatez(0deg);}
3 L. U  z% d, d  M5 uto{ -webkit-transform:rotatez(360deg);}
& T* Q! T8 m3 [+ |! E}
@keyframes loadrotate{
from{ transform:rotatez(0deg);}
! z0 P- A3 n4 d! p5 l! R  jto{ transform:rotatez(360deg);}
; E4 n) X' M9 w. L}
# e8 h) \& Z  Q: i& U#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;}
#loading div{ width: 20px; height:30px; position: absolute;left:40px; top:35px; -webkit-transform:rotatez(0) translatex(60px) ; opacity: 1; border-radius: 50% 0; }
8 Q; u% B+ F6 |$ Z: \1 r9 J( Z#loading div:nth-child(2){-webkit-transform:rotatez(36deg) translatex(60px) ; opacity: 0.8; }
  [% v* M# ^! V" s  S; |#loading div:nth-child(3){-webkit-transform:rotatez(72deg) translatex(60px); opacity: 0.6; }
#loading div:nth-child(4){-webkit-transform:rotatez(108deg) translatex(60px); opacity: 0.4;}
4 m" l$ f* \) x( a) Y8 z#loading div:nth-child(5){-webkit-transform:rotatez(144deg) translatex(60px) ; opacity: 0.2;}
#loading div:nth-child(6){-webkit-transform:rotatez(180deg) translatex(60px) ; opacity: 1; }
4 `) l. M  A, D6 ^1 g* ]  `2 F3 j. ]# R#loading div:nth-child(7){-webkit-transform:rotatez(216deg) translatex(60px) ; opacity: 0.8; }
8 h, J- v; t# A#loading div:nth-child(8){-webkit-transform:rotatez(252deg) translatex(60px) ; opacity: 0.6; }
% Z) K) L+ a3 C& c#loading div:nth-child(9){-webkit-transform:rotatez(288deg) translatex(60px) ; opacity: 0.4; }
" s9 J' [( l/ j  S8 s5 w: p#loading div:nth-child(10){-webkit-transform:rotatez(324deg) translatex(60px) ; opacity: 0.2; }
& K0 _0 `5 ?* j</style>
</head>
1 d/ @* q4 o* z# G# i% p0 k<body>
  A& o& l) z9 n, l<div id=loading>
' c$ k6 c$ w9 T$ o( H<div class=color1></div>
2 W, l# `9 [% H- t6 ]. p( Q: q<div class=color1></div>
+ U+ j9 j( d$ h% E. _<div class=color1></div>
. P, X0 E( ~% @) G' Z# z<div class=color1></div>
<div class=color1></div>
* J" r) w: I& Q, M  Z" k<div class=color2></div>
<div class=color2></div>
& V6 d% @) `. o. Z, ?, @+ c  J: H<div class=color2></div>
<div class=color2></div>
<div class=color2></div>
* W# t* D9 S+ V</div>
</body>
, A' {2 {! D3 q* @+ H</html>
运行效果如下图所示：
' U2 d( @4 N$ o( a# U$ M# S5 x

& K8 B3 U, m* a. a; ]- W                               
登录/注册后可看大图

! z: x; l9 \1 X6 L6 Y* |希望本文所述对大家的web前端设计有所帮助。

5 _( h" X: U7 o  t  G: ?2 }更多网页制作信息请查看： 网页制作

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

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

哈哈 ok ~~~

现在做什么网站好？

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

哎 天理何在啊??

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