本文实例讲述了css实现叶子形状loading效果的方法。分享给大家供大家参考。具体实现方法如下：5 g. N: e$ T0 b" g8 \& a& h
代码如下:' T- p5 V; S) T! h( f9 T
<!doctype html> ; g7 t) m' \6 e$ ~, Z% G
<html> ( ]) \) Y( X6 f. L
<head> ) s; w5 G7 p' O& t4 g% }
<style type=text/css> 0 z+ o2 y# ~; o; | P" g
body{ background: #000;} ) C4 @4 G1 x+ @- f' K
.color1{ background: #fde515;}
( Y' L5 N# o; v4 B) u- U7 U.color2{ background: #00def2;}
9 x g$ G2 M* F@-webkit-keyframes loadrotate{ ( `, c# ^( z5 J. V# t. I5 |
from{ -webkit-transform:rotatez(0deg);}
0 b* t: R6 x/ \/ Uto{ -webkit-transform:rotatez(360deg);}
& h9 ^8 w }% B}
; R$ c. @* r0 O( J! \. i- R@keyframes loadrotate{ ; v* }7 r/ R: u( H* ?* t% }
from{ transform:rotatez(0deg);} & W; Q! ^4 c" B. q3 P' W: ~
to{ transform:rotatez(360deg);}
- x& m |6 a" M6 d8 X}
1 s! G( D1 p0 M5 o& R#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;} $ R( j7 L+ {7 m: h$ l4 n+ i# ^: s+ H0 l
#loading div{ width: 20px; height:30px; position: absolute;left:40px; top:35px; -webkit-transform:rotatez(0) translatex(60px) ; opacity: 1; border-radius: 50% 0; }
. K; I- S5 {+ D: _5 V#loading div:nth-child(2){-webkit-transform:rotatez(36deg) translatex(60px) ; opacity: 0.8; }
# @5 j' N. U5 a8 `; U3 e4 k3 B- z( b#loading div:nth-child(3){-webkit-transform:rotatez(72deg) translatex(60px); opacity: 0.6; }
2 K. d9 r4 y% N#loading div:nth-child(4){-webkit-transform:rotatez(108deg) translatex(60px); opacity: 0.4;} 4 q; O. S& ~) n
#loading div:nth-child(5){-webkit-transform:rotatez(144deg) translatex(60px) ; opacity: 0.2;} ! w$ M3 i4 k* G5 i, A* r f, [
#loading div:nth-child(6){-webkit-transform:rotatez(180deg) translatex(60px) ; opacity: 1; } + q; R+ w8 C/ g+ B( I
#loading div:nth-child(7){-webkit-transform:rotatez(216deg) translatex(60px) ; opacity: 0.8; }
/ `9 k, ^/ Y/ }# n6 C# v& J#loading div:nth-child(8){-webkit-transform:rotatez(252deg) translatex(60px) ; opacity: 0.6; }
. H2 [$ g0 {( G% i#loading div:nth-child(9){-webkit-transform:rotatez(288deg) translatex(60px) ; opacity: 0.4; } & f- W" f. l4 k
#loading div:nth-child(10){-webkit-transform:rotatez(324deg) translatex(60px) ; opacity: 0.2; }
. F8 @( D$ N& }' z; P</style> 9 U6 p! ]. {( R( Q
</head>
0 N4 u4 q- Z: b+ n; I+ f<body>
% V& t/ b2 p3 R" Y8 S1 g, {" n* M<div id=loading> : r; G& v$ K) Y! g4 Y& s3 |
<div class=color1></div> $ D: v8 O9 c2 V3 W% ?
<div class=color1></div> " a1 M. x: v& ? R4 z
<div class=color1></div>
, m; ?7 m( c: E0 Y) K<div class=color1></div>
5 E7 P/ K" Z; a% Z$ S2 C<div class=color1></div> o: \+ I' E: Z5 E/ x
<div class=color2></div> w- {2 G1 x! v
<div class=color2></div>
% B: m: C+ ^) e; d* i# t! j- i<div class=color2></div> 9 G" h" h- t3 \$ V% c9 e) ?/ M# v
<div class=color2></div>
6 k9 j; b- G& m" d( t<div class=color2></div> - ]$ q! {3 t6 N
</div> 0 r" H' k' \- o# J* Z% {
</body> j& ~ e' ^( B. R: y# Y$ X: r
</html>
' \5 y5 K( L4 Z6 Q3 [9 o8 m( ]运行效果如下图所示：
6 e2 `* F! M- j% c& E
# m% ^3 b/ V6 n9 o/ |8 u6 L, p希望本文所述对大家的web前端设计有所帮助。
5 j: z1 q1 ?& [. {' i" q" v1 [! l7 @' z* ~6 P. I7 p8 y
更多网页制作信息请查看： 网页制作 |
|
) d1 U4 i9 m. Y
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
