本文实例讲述了css实现叶子形状loading效果的方法。分享给大家供大家参考。具体实现方法如下：& @, ^5 A+ _, M! Y$ O
代码如下:1 k$ B' R9 p7 l
<!doctype html>
, @9 K3 O6 I) K) y! g8 N' i<html> # M7 G! m+ p* o9 L
<head>
$ G2 Q8 w# M9 c- @7 X8 h, \ V<style type=text/css> ) T# @' l7 O7 L9 s! K
body{ background: #000;} 0 }; B; ^8 U) P% o
.color1{ background: #fde515;} ' a' O6 l: {( _+ U; o" C
.color2{ background: #00def2;} ; I" D% J& y" C) z0 }
@-webkit-keyframes loadrotate{
& E I/ J; Z5 Q3 {from{ -webkit-transform:rotatez(0deg);}
% Y/ O% x: u/ f7 o3 Pto{ -webkit-transform:rotatez(360deg);} 7 G( y: ^; ]3 e' X" u5 _
} & J7 B: L8 b+ Q+ s3 Y% g
@keyframes loadrotate{
" G8 t' y8 D: o7 _. {0 N" e9 h' G' Gfrom{ transform:rotatez(0deg);}
3 F" [! q Q7 s' F, n# Zto{ transform:rotatez(360deg);} 2 l: Y& o5 ?) h9 a/ B8 R4 T5 i, y
} 6 X3 `4 f3 e) ]4 o% 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;} 2 u/ ?% k+ h+ o1 G+ T1 T; C
#loading div{ width: 20px; height:30px; position: absolute;left:40px; top:35px; -webkit-transform:rotatez(0) translatex(60px) ; opacity: 1; border-radius: 50% 0; } . b$ j; C8 v: T' g; ]/ s
#loading div:nth-child(2){-webkit-transform:rotatez(36deg) translatex(60px) ; opacity: 0.8; } 4 h. l0 _5 l2 ?
#loading div:nth-child(3){-webkit-transform:rotatez(72deg) translatex(60px); opacity: 0.6; }
2 ]0 K( u) k8 n* O8 Z" w#loading div:nth-child(4){-webkit-transform:rotatez(108deg) translatex(60px); opacity: 0.4;}
$ B0 F. C3 m7 u7 o6 S& u#loading div:nth-child(5){-webkit-transform:rotatez(144deg) translatex(60px) ; opacity: 0.2;} : {! ]$ l6 @7 z3 V. g
#loading div:nth-child(6){-webkit-transform:rotatez(180deg) translatex(60px) ; opacity: 1; }
$ m$ P) M0 t5 o; `, d: Y; t& ^#loading div:nth-child(7){-webkit-transform:rotatez(216deg) translatex(60px) ; opacity: 0.8; }
& h: f R$ A' r/ R4 o6 X+ `2 h#loading div:nth-child(8){-webkit-transform:rotatez(252deg) translatex(60px) ; opacity: 0.6; } 4 B/ E6 Z- ~$ a; q1 ^
#loading div:nth-child(9){-webkit-transform:rotatez(288deg) translatex(60px) ; opacity: 0.4; } ( |# m/ U0 ^: }8 y# {
#loading div:nth-child(10){-webkit-transform:rotatez(324deg) translatex(60px) ; opacity: 0.2; } 1 p, b% |& a$ ?& E6 ~$ U* B6 h
</style>
9 @* Z5 Q+ i7 C</head>
* c, a" Z" I9 k6 ~: \+ j<body> & E2 C1 [; s; S' Y$ b
<div id=loading> 7 e7 u4 I8 }0 t B) L; P+ X
<div class=color1></div> 3 R4 v6 Q) l3 t* x* z
<div class=color1></div> 9 Q# _5 [3 L2 c R( Z, D: `
<div class=color1></div>
+ D- N1 [3 \7 `/ h" A+ H3 q; K<div class=color1></div> 2 Q. K3 ?1 ~. K& X$ c$ Z( M' n
<div class=color1></div> ' m; r; _, c: s# V% M
<div class=color2></div>
. {- J3 L- T V<div class=color2></div> ! \4 Y X$ Z1 g' m
<div class=color2></div> " W( R9 S; Y5 j* ]5 q
<div class=color2></div>
' l$ g, `' _" \/ d<div class=color2></div>
. W+ P2 P( Y! ^4 S! `</div> 6 c, m$ g9 L8 t2 P) @: `' y2 Z2 a
</body> " f2 l" @# b' ?4 {! _
</html>
8 ]6 A' \5 P0 Y5 T5 H- |' Z; y0 B5 j- ]运行效果如下图所示：
- [: U3 \/ Q0 ]3 L, M# H& ^
' [% O3 x5 [9 W( S2 F希望本文所述对大家的web前端设计有所帮助。4 f/ L! D6 ]7 G% E' C
V* R, k7 q/ p+ Y* k% y, A
更多网页制作信息请查看： 网页制作 |
|
Ai优选商家寻找本地地推合作伙伴303求项目与合作
拥抱AI搜索新时代！GEO优化成为企业流量增909网络资讯
GEO优化如何让企业流量翻倍？808网络资讯
8 Q1 R$ h4 X) _3 W ~2 o* J9 v6 C" w
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡