本文实例讲述了css实现叶子形状loading效果的方法。分享给大家供大家参考。具体实现方法如下：
+ Y' `* q E. H% t6 \代码如下:* W+ w5 k c4 o9 r. `+ }) L4 F
<!doctype html> 7 R- r; f+ ]( @. N9 c+ @1 V
<html> # g5 N) j( H8 [% \5 Y
<head> 6 H/ U9 V- D. L# u
<style type=text/css> % R: s- k) }; f' Z- F
body{ background: #000;} F) V4 A& [* }. f; I
.color1{ background: #fde515;}
- Y7 V: u+ L3 A$ K y7 L; i! g/ @+ s.color2{ background: #00def2;}
. H, \! \4 {: T, N@-webkit-keyframes loadrotate{
2 ~) I* h; C" d- ?/ B4 }from{ -webkit-transform:rotatez(0deg);} n% k C& c3 ]7 [1 G
to{ -webkit-transform:rotatez(360deg);}
( `& E' w! V( V/ u; ?- `} ; u3 _; \5 p3 p/ U
@keyframes loadrotate{
; W0 W6 D3 L6 C, P4 `. ofrom{ transform:rotatez(0deg);} 4 l8 L8 X# ~- r: u4 e
to{ transform:rotatez(360deg);} $ m* n/ J( A8 y* ]1 a0 ^5 O8 \
} U N( a1 s- u! j2 W
#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;} , T: A3 G) J) L" Y/ P/ {0 S
#loading div{ width: 20px; height:30px; position: absolute;left:40px; top:35px; -webkit-transform:rotatez(0) translatex(60px) ; opacity: 1; border-radius: 50% 0; }
% a3 T I( w* `0 K2 v) D5 R( g#loading div:nth-child(2){-webkit-transform:rotatez(36deg) translatex(60px) ; opacity: 0.8; } ! _# ~' Q2 N0 v: q8 e- h
#loading div:nth-child(3){-webkit-transform:rotatez(72deg) translatex(60px); opacity: 0.6; }
# n2 O* Y# }+ j& U2 ?7 C7 ^( b#loading div:nth-child(4){-webkit-transform:rotatez(108deg) translatex(60px); opacity: 0.4;}
7 p& Z/ h0 @1 |1 j! u#loading div:nth-child(5){-webkit-transform:rotatez(144deg) translatex(60px) ; opacity: 0.2;} " j, E1 t U8 `0 H
#loading div:nth-child(6){-webkit-transform:rotatez(180deg) translatex(60px) ; opacity: 1; }
/ s4 H J2 s. o3 f u v/ m#loading div:nth-child(7){-webkit-transform:rotatez(216deg) translatex(60px) ; opacity: 0.8; }
/ S3 n! v. Q1 P& _0 ^#loading div:nth-child(8){-webkit-transform:rotatez(252deg) translatex(60px) ; opacity: 0.6; } + \- D! h8 P n
#loading div:nth-child(9){-webkit-transform:rotatez(288deg) translatex(60px) ; opacity: 0.4; } * g B9 n2 |% ]- z
#loading div:nth-child(10){-webkit-transform:rotatez(324deg) translatex(60px) ; opacity: 0.2; } ) ]! x7 X3 w( B/ G
</style>
- \6 F/ j) {# _3 j8 N# F7 L</head>
& i( w9 c4 \0 H7 I! H2 A<body>
' g6 `3 f Q1 p! g0 |. [# Z+ h4 m<div id=loading>
0 b0 S1 D- R: n1 q) t4 t5 M<div class=color1></div> & J/ A% Z- u4 L$ t
<div class=color1></div>
" \0 k, j: i l7 W; e9 s<div class=color1></div>
" n+ s+ y _7 ]1 l; R<div class=color1></div> ) s' }( V* C, Q, D& u
<div class=color1></div> ) r2 i3 U; I6 Y8 a) g' [
<div class=color2></div> 1 Y3 Z, J' W9 @5 }9 S" P6 X
<div class=color2></div>
7 d1 ?; [$ K: }- \1 f/ d<div class=color2></div> " h+ q5 U Z/ r# Z
<div class=color2></div> # H3 k2 A6 m T; y5 U8 Q" O* j+ |
<div class=color2></div> ; U2 Y U! \* Z* K+ R; B! r. e
</div> Y6 u& ~! Y9 ~) ?
</body> ) q$ I/ y& U1 v) `9 ^3 z
</html>% a# t$ V; @! F; b, b- g
运行效果如下图所示：. J P8 q+ y$ a" y: Z; S
( Q" J `2 ]& _! [: J希望本文所述对大家的web前端设计有所帮助。( [1 Q( p0 i& r! E1 ]* Y, ~1 @0 H
4 K, s4 D4 Y2 p! ~( f
更多网页制作信息请查看： 网页制作 |
|
; }4 p3 f9 \4 n% J, j) m) b6 k5 G3 V
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡