html5 css3实例教程

之前介绍了好多款html5和css3实现的动画，今天要给大家带来一款html5和css3实现的小机器人走路动画。该实例的人物用html5绘画的，动画效果是html5和css3实现的。一起看下效果图。
0 x$ H7 H5 L3 o# A实现的代码。
, F6 o% ~3 \7 f" L( Y- T" Uhtml代码：
代码如下:
7 ]* Z/ R2 b7 G! r, h5 |. V<svg version=1.1 id=layer_1 xmlns= xmlns:xlink=
x=0px y=0px viewbox=0 0 458 337 enable-background=new 0 0 458 337 xml:space=preserve>
<g id=left-arm>
<g>
2 B: E& p. R0 a7 ~2 I2 b, W<path fill=#fdbf88 d=m264,216.2l2.5,3.6c1.4,2.1,4.6,3.5,7.1,3.1l15.6-2.2c2.5-0.4,5.5-2.4,6.7-4.6l0.8-1.4
c1.2-2.2,1-5.7-0.4-7.7l-5.2-7.5c285.8,208.8,274.7,214.1,264,216.2z />
<path fill=#fdb473 d=m282.9,208.4l8.3,7.8c1.4,2.1,3.6,1.9,4.8-0.3l0.7-1.3c1.2-2.2,1-5.7-0.4-7.7l-4.4-8.9
& m& Y( X  k3 \! r7 P, Dc289.8,202.2,286.7,205.6,282.9,208.4z />
</g>
<g>
<path fill=#262626 d=m291.1,199.4l-20.2-29.1c-1.4-2.1-4.6-3.5-7.1-3.1l-15.7,2.2c-2.5,0.4-5.5,2.4-6.7,4.6l-0.7,1.4
5 W4 X1 r' b' b7 W! P+ O0 [c-1.2,2.2-1,5.7,0.4,7.7l22.8,32.9c274.7,214.1,285.8,208.8,291.1,199.4z />
6 Z% V" U5 Y/ J( t0 {  x& t<path d=m287.8,189.9l-16.8-19.6c-1.4-2.1-3.6-1.9-4.8,0.3l-0.7,1.3c-1.2,2.2-1,5.7,0.4,7.7l16,27.8l1,1c3.8-2.7,6.9-6.2,8.9-10.3
l287.8,189.9z />
# _1 [% W8 p' k4 w+ H8 y' B% X<path fill=#7f7f7f stroke=#000000 stroke-width=0.9111 d=m263.8,167.2c2.5-0.4,3.5,1.2,2.3,3.4l-0.8,1.4
0 e8 [% J7 P) ?: \: `: c6 a8 tc-1.2,2.2-4.2,4.3-6.7,4.6l-15.7,2.2c-2.5,0.4-3.5-1.2-2.3-3.3l0.8-1.4c1.2-2.2,4.2-4.3,6.7-4.6l263.8,167.2z />
$ p0 E% e& z7 I' z4 N</g>
* ]0 F; Q$ H, v# W4 R) Z& c. {</g>
# L& P* s4 S" T<g id=left-leg>
<path fill=#262626 stroke=#000000 stroke-width=0.9111 d=m283.7,246c1.3-2.1,1.4-5.6,0.1-7.7l265.4,208
c-1.3-2.1-4.4-3.7-6.9-3.5l-17.8,1.5c-2.5,0.2-5.6,2.1-7,4.2l-7.3,11.7c-1.3,2.1-1.4,5.6-0.1,7.8l18.3,30.2
) x# l  ~$ D1 ]# {* X( zc1.3,2.1,4.4,3.7,6.9,3.5l17.7-1.4c2.5-0.2,5.6-2.1,7-4.2l283.7,246z />
<path fill=#bfbfbf stroke=#000000 stroke-width=0.9111 d=m232.5,224.3l-6.1-2.5c-1.3,2.1-1.4,5.6-0.1,7.8l232.5,224.3z />
<path d=m283.7,238.2c1.3,2.1,1.3,5.6-0.1,7.8l-7.3,11.6c-1.3,2.1-3.5,2.1-4.8,0l-18.3-30.2c-1.3-2.1-1.3-5.6,0.1-7.8l7.3-11.6
c1.3-2.1,3.5-2.1,4.8,0l283.7,238.2z />
<path fill=#4d4d4d d=m244.7,259.8c1.3,2.1,4.4,3.7,6.9,3.5l17.7-1.4c2.5-0.2,3.5-2.1,2.2-4.3l-18.3-30.2
c-1.3-2.1-4.4-3.7-6.9-3.5l-17.7,1.4c-2.5,0.2-3.5,2.1-2.2,4.3l244.7,259.8z />
<path fill=#000 stroke=#000000 stroke-width=0.9111 d=m258.5,204.5c2.5-0.2,3.4,1.4,2.1,3.5l-7.4,11.7
6 C9 t* D5 X; F0 j+ r0 L) B. J: u) kc-1.3,2.1-4.5,4-7,4.2l-17.8,1.5c-2.5,0.2-3.4-1.4-2.1-3.5l7.4-11.7c1.3-2.1,4.5-4,7-4.2l258.5,204.5z />
</g>
<g id=right-leg>
<path fill=#262626 stroke=#000000 stroke-width=0.9111 d=m222.5,272.1c2.5-0.2,5.3-2.2,6.3-4.6l13.3-32.8
c0.9-2.3,0.4-5.8-1.3-7.6l-11.8-13.4c-1.7-1.9-5-3.3-7.5-3.1l-13.7,1.1c-2.5,0.2-5.3,2.3-6.3,4.6l188.1,249
0 t& m3 b  ]* J) a8 z# o' [# ?c-0.9,2.3-0.4,5.8,1.3,7.6l11.7,13.4c1.7,1.9,5,3.3,7.5,3.1l222.5,272.1z />
<path fill=#bfbfbf stroke=#000000 stroke-width=0.9111 d=m209.3,218.1l-1.6-6.4c-2.5,0.2-5.3,2.3-6.3,4.6l209.3,218.1z />
9 h9 h. L9 H6 I4 E6 t9 f$ i  v* P<path d=m228.7,267.5c-0.9,2.3-3.8,4.4-6.3,4.6l-13.7,1.1c-2.5,0.2-3.8-1.5-2.8-3.9l13.3-32.8c0.9-2.3,3.8-4.4,6.3-4.6l13.7-1.1
c2.5-0.2,3.8,1.5,2.8,3.9l228.7,267.5z />
<path fill=#4d4d4d d=m188.1,249c-0.9,2.3-0.4,5.8,1.3,7.6l11.7,13.4c1.7,1.9,3.8,1.5,4.7-0.8l13.3-32.8c0.9-2.3,0.4-5.8-1.3-7.6
2 G, J0 A  P( e# p7 g) U& Cl-11.7-13.4c-1.7-1.9-3.8-1.5-4.7,0.8l188.1,249z />
. ~. j* d/ \* f<path fill=#000 stroke=#000000 stroke-width=0.9111 d=m240.8,227.1c1.7,1.9,1,3.6-1.5,3.8l-13.8,1.1
c-2.5,0.2-5.9-1.2-7.5-3.1l-11.8-13.4c-1.7-1.9-1-3.6,1.5-3.8l13.8-1.1c2.5-0.2,5.9,1.2,7.5,3.1l240.8,227.1z />
8 x" ]( p5 U2 I) Z4 O! f; t</g>
9 L2 f. o& [+ K: _<g id=torso>
<path fill=#262626 stroke=#000000 stroke-width=0.9111 d=m270.8,217.6c2.2-1.1,4.1-4.1,4.1-6.6l0-35.4
c0-2.5-1.8-5.5-4.1-6.6l-23.3-11.6c-2.2-1.1-5.9-1.1-8.1,0l198,178.2c-2.2,1.1-4.1,4.1-4.1,6.6v35.3c0,2.5,1.8,5.5,4.1,6.6
l23.2,11.6c2.2,1.1,5.9,1.1,8.1,0l270.8,217.6z />
<path fill=#bfbfbf stroke=#000000 stroke-width=0.9111 d=m201.9,183.5l-3.9-5.3c-2.2,1.1-4.1,4.1-4.1,6.6l201.9,183.5z />
<path d=m274.9,211c0,2.5-1.8,5.5-4.1,6.6l-41.4,20.7c-2.2,1.1-4.1,0-4.1-2.5v-35.4c0-2.5,1.8-5.5,4.1-6.6l41.4-20.7
1 y, _( @, S9 l; ?; n1 ?! V, Z/ wc2.2-1.1,4.1,0,4.1,2.5v211z />
<path fill=#4d4d4d stroke=#000000 stroke-width=0.9111 d=m193.9,220.2c0,2.5,1.8,5.5,4.1,6.6l23.2,11.6
c2.2,1.1,4.1,0,4.1-2.5v-35.4c0-2.5-1.8-5.5-4.1-6.6l198,182.3c-2.2-1.1-4.1,0-4.1,2.5v220.2z />
<path fill=#7f7f7f stroke=#000000 stroke-width=0.9111 d=m270.8,169.1c2.2,1.1,2.2,3,0,4.1l-41.5,20.8
5 b- ]. r0 S) z+ |( N  mc-2.2,1.1-5.9,1.1-8.1,0l-23.3-11.7c-2.2-1.1-2.2-3,0-4.1l41.5-20.8c2.2-1.1,5.9-1.1,8.1,0l270.8,169.1z />
0 j) O# I) S: d9 C' ~</g>
0 O* g9 N% s) v9 a* c<g id=right-arm>
' N) M6 f6 `' j! i/ ?! @<g>
& U/ `" z6 s0 Q; H' O<path fill=#fdbf88 stroke=#000000 stroke-width=0.9111 d=m201.8,237l2.6,7.5c0.8,2.4,3.5,4.6,6,4.9l15.6,2.1
3 e9 f% t4 ^6 \7 u$ Wc2.5,0.3,6-0.9,7.7-2.7l1.1-1.1c1.8-1.8,2.5-5.2,1.7-7.6l-2.5-7.3c225.3,241.7,213.3,239.4,201.8,237z />
* E% r' M- p- ^8 i% }" H<path fill=#fdb473 d=m223.7,238.6l5.5,9.2c0.8,2.4,2.9,2.8,4.7,1l1-1.1c1.8-1.8,2.5-5.2,1.7-7.6l-2.5-7.3
c231,236,227.5,237.7,223.7,238.6z />
! X" ]3 n( O+ d# g( ?<path fill=#fecb9d d=m204.4,244.5c0.8,2.4,3.5,4.6,6,4.9l15.6,2.1c2.5,0.3,3.8-1.3,3-3.7l-5.4-9.2c-7.6,1.7-16.2-0.4-24.4-2.1
- t" t$ v/ w" R# fl204.4,244.5z />
</g>
& z7 n3 ?; y9 r8 F6 k" [<g>
<path fill=#262626 stroke=#000000 stroke-width=0.9111 d=m234.1,232.9l-12-34.8c-0.8-2.4-3.5-4.6-6-4.9l-15.7-2.1
c-2.5-0.3-5.9,0.9-7.7,2.7l-1,1.1c-1.7,1.8-2.5,5.2-1.7,7.6l11.9,34.5c213.3,239.4,225.3,241.7,234.1,232.9z />
8 q* x* t7 V5 X4 ?<path fill=#bfbfbf stroke=#000000 stroke-width=0.9111 d=m194.2,201.5l-2.6-6.6c-1.7,1.8-2.5,5.2-1.7,7.6l194.2,201.5z />
! [) N+ @" m7 u, p2 D3 e( `<path d=m234.1,232.9l-12-34.8c-0.8-2.4-2.9-2.8-4.7-1l-1,1.1c-1.8,1.8-2.5,5.2-1.7,7.6l8,31.1l1.1,1.8
c227.5,237.7,231,236,234.1,232.9z />
0 A0 g, q0 P0 w5 j* k! j& G<path fill=#4d4d4d d=m214.5,205.7c-0.8-2.4-3.5-4.6-6-4.9l-15.6-2.1c-2.5-0.3-3.8,1.3-3,3.7l8.5,32.6l0.9,1.4
c8.2,1.7,16.8,3.8,24.4,2.1l-1.1-1.8l214.5,205.7z />
<path fill=#7f7f7f stroke=#000000 stroke-width=0.9111 d=m216,193.2c2.5,0.3,3.1,2.1,1.3,3.9l-1.1,1.1
c-1.8,1.8-5.2,3-7.7,2.7l-15.7-2.1c-2.5-0.3-3.1-2.1-1.3-3.9l1.1-1.1c1.8-1.8,5.2-3,7.7-2.7l216,193.2z />
$ G4 Z0 T- M; ]% l2 I</g>
% ~' K* o9 t9 l, N7 d+ y8 j</g>
<g id=head>
" w4 u/ s" A8 [, l$ r<g id=sub-head>
<g>
) a/ u) r" a+ A- a; m1 N$ }<path fill=#fdbf88 stroke=#000000 stroke-width=0.9111 d=m288.6,197.1c4.5-2.2,8.2-8.2,8.2-13.2l0-52.5
c0-5-3.7-10.9-8.1-13.2l242,94.9c-4.5-2.2-11.8-2.2-16.3,0l-46.4,23.4c-4.5,2.3-8.1,8.2-8.1,13.2v52.4c0,5,3.7,10.9,8.1,13.2
( ^$ v7 B6 L0 Q5 ?' y6 A/ L- El46.4,23.2c4.5,2.2,11.8,2.2,16.3,0l288.6,197.1z />
1 J* o' }7 t& N1 N5 o$ A+ _<path fill=#feecdc stroke=#000000 stroke-width=0.9111 d=m187.1,128.8l-7.8-10.5c-4.5,2.3-8.1,8.2-8.1,13.2l187.1,128.8z />
<path fill=#fdb473 d=m296.7,183.9c0,5-3.7,10.9-8.1,13.2l-46.4,23.2c-4.5,2.2-8.1,0-8.1-5v-52.5c0-5,3.7-10.9,8.1-13.2
l46.4-23.2c4.5-2.2,8.1,0,8.1,5v183.9z />
<path fill=#fecb9d d=m171.1,183.9c0,5,3.7,10.9,8.1,13.2l46.4,23.2c4.5,2.2,8.1,0,8.1-5v-52.5c0-5-3.7-10.9-8.1-13.2
l-46.4-23.2c-4.5-2.2-8.1,0-8.1,5v183.9z />
1 H% _; E% X/ g1 y: b1 j0 P<path fill=#fed9b9 d=m288.6,118.2c4.5,2.2,4.5,5.9,0,8.1l242,149.6c-4.5,2.2-11.8,2.2-16.3,0l-46.6-23.3
c-4.5-2.2-4.5-5.9,0-8.1l46.6-23.3c4.5-2.2,11.8-2.2,16.3,0l288.6,118.2z />
</g>
<line id=right-eyebrow fill=#4d4d4d stroke=#000000 stroke-width=1.8222 x1=243.3
, y# }" Y1 |$ v& k7 Ty1=180.6 x2=266.4 y2=181.7 />
/ F  f5 j' b- M: i6 g+ I<line id=left-eyebrow fill=#4d4d4d stroke=#000000 stroke-width=1.8222 x1=272.4
) v8 v8 y# r( `. G0 `; ty1=177.4 x2=288.4 y2=164.6 />
<circle id=left-eye stroke=#000000 stroke-width=0.9111 cx=283.6 cy=176.5
r=3.8 />
<circle id=right-eye stroke=#000000 stroke-width=0.9111 cx=257.5 cy=186.9
; ^7 Z! D: E6 l/ f4 \  O4 v/ p* {r=3.8 />
4 j# B9 x. u" q  J& K</g>
<g id=hair>
. w  h7 d  t+ a" U; @8 A- ^1 q<polygon fill=#ffccce stroke=#000000 stroke-width=0.9111 points=204.7,103.9 185.6,93.4 204.8,85.9 223.9,95.7  />
<polygon fill=#ff999e stroke=#000000 stroke-width=0.9111 points=215.7,102.7 191.3,77.7 211,70.6 235.1,94.3  />
0 q, t4 t+ b% a; N, p9 u<polygon fill=#fe666d stroke=#000000 stroke-width=0.9111 points=227.5,102.7 201.1,67 221.1,60.1 247,94  />
$ M! K( K7 N9 J! \<polygon fill=#fe333d stroke=#000000 stroke-width=0.9111 points=241.3,104 223.4,55.6 243.9,48.7 261,94.9  />
0 K% i! n+ n6 x" T- {. p2 ]<polygon fill=#fe000c points=257,143.2 244.4,84.3 264.4,75.9 275.9,132.3  />
<polygon fill=#fe4d55 points=194.6,110.7 257,143.2 257,143.2 244.4,84.3 244.4,84.3 241.3,104 241.3,104 223.4,55.6
4 A; {  u: A1 M& s* `7 ~223.4,55.6 227.5,102.7 227.5,102.7 201.1,67 201.1,67 215.7,102.7 215.7,102.7 191.3,77.7 191.3,77.7 204.7,103.9 204.7,103.9
5 \! G. U, w. t; {7 x  T  r7 k185.6,93.4 185.6,93.4  />
</g>
</g>
<radialgradient id=svgid_1_ cx=239.975 cy=271.2543 r=122.4974 gradienttransform=matrix(1 0 0 0.2541 0 202.3306)
  x+ l" ^7 {  xgradientunits=userspaceonuse>
0 T9 K/ X1 |$ S6 T) f" g<stop offset=0 style=stop-color: #231f20; stop-opacity: 0.3 />
/ V/ g% q$ H3 n6 v$ Q0 A$ d+ |0 j<stop offset=1 style=stop-color: #231f20; stop-opacity: 0 />
</radialgradient>
: e7 k1 M4 ^$ ]9 v* W' [4 G5 N- N<ellipse fill=url(#svgid_1_) cx=240 cy=271.3 rx=122.5 ry=31.1 />
</svg>
css3代码：
) O0 I! J3 ~1 ~" Y  x# C  |代码如下:
5 v9 f* F- X' H" thtml {
6 b' }8 Y' W5 i+ a' L5 R1 \% l-moz-box-sizing: border-box;
4 E; }" c$ I/ M1 ybox-sizing: border-box;
7 \6 j  s1 E5 J; L8 [1 q5 Q}
) T2 u1 j2 F4 s* a*, *:before, *:after {
-moz-box-sizing: inherit;
5 i) J/ n% R. U, ubox-sizing: inherit;
}</p> <p>html,body {
height:100%;
margin: 0;
: W" Q+ Y8 N2 o9 S* U( b* W# Lfont: 40px/40px helvetica neue;
font-weight: 900;
color: rgba(255, 255, 255, 1);
3 Z1 o4 g7 Q1 I- X-webkit-font-smoothing: antialiased;
( h* g5 c8 ~3 i8 l& j+ b0 |font-smoothing: antialiased;
5 u% t% ~6 P' k% s" |* q" M* k}</p> <p>svg {
6 F, W( ^0 n9 g; p* kwidth: 100%;
- P/ m# V5 r: L7 M9 m- ~height: 100%;
}</p> <p>#left-eye {
3 f/ Z4 p9 A/ Y2 B/ R: y3 k-webkit-transform-origin: 283px 176px;
-ms-transform-origin: 283px 176px;
7 a# G- h" u" D5 o" h1 ?) ttransform-origin: 283px 176px;
/*animation: pulse 2s linear infinite;*/
}
9 ~: P9 r) ]9 y# S; z$ Q2 a1 w#head {
-webkit-transform-origin: 235px 173px;
-ms-transform-origin: 235px 173px;
transform-origin: 235px 173px;
8 h8 N5 t; J  d+ i7 M# v-webkit-animation: head 2s ease-in-out infinite;
animation: head 2s ease-in-out infinite;
}</p> <p>#right-eyebrow, #left-eyebrow {
7 n9 x" K2 s) [; \6 B# o$ M! l-webkit-animation: eyebrows 10s linear infinite;
" u. N2 U) G0 t8 \' M6 n, M5 e: Wanimation: eyebrows 10s linear infinite;
}</p> <p>#left-leg {
& P  Z0 w7 |5 U- V* c* ^0 G-webkit-transform-origin: 253px 225px;
9 V) J# C. o0 G5 `7 ~% c-ms-transform-origin: 253px 225px;
" t6 ?5 `) T6 e# z" m0 Vtransform-origin: 253px 225px;
-webkit-animation: leftleg 2s ease-in-out infinite;
animation: leftleg 2s ease-in-out infinite;
}</p> <p>#right-leg {
-webkit-transform-origin: 225px 235px;
-ms-transform-origin: 225px 235px;
' B% I/ m2 \- Q8 Wtransform-origin: 225px 235px;
6 _3 v" d$ V$ K+ I-webkit-animation: rightleg 2s ease-in-out infinite;
+ }  S( i& _$ A4 @$ R' sanimation: rightleg 2s ease-in-out infinite;
}
#left-arm {
: Q& u! `% [2 K: L* v* y$ k-webkit-transform-origin: 263px 186px;
0 L4 t: N, a* r# j-ms-transform-origin: 263px 186px;
transform-origin: 263px 186px;
( e/ f% j, Q* g, o-webkit-animation: leftarm 2s ease-in-out infinite;
animation: leftarm 2s ease-in-out infinite;
% B2 W+ J* I" C4 C) Q$ N! v: p}</p> <p>#right-arm {
" X: G7 N7 `' T5 C$ l3 p9 ?-webkit-transform-origin: 209px 214px;
-ms-transform-origin: 209px 214px;
transform-origin: 209px 214px;
+ G& [8 O* b: E% B- l* I-webkit-animation: rightarm 2s ease-in-out infinite;
# ]" Y: a3 {$ Uanimation: rightarm 2s ease-in-out infinite;
}
#hair {
' z! }% K. p( x! u-webkit-filter: hue-rotate(45deg);
4 k* M4 o  q6 T# j* U# vfilter: hue-rotate(45deg); /* izza not workingz! */
: Z* e  }/ ]# k2 ]}</p> <p>
@-webkit-keyframes leftleg {
3 r1 w' E0 [5 E: n0%{
. w3 L: R4 Y5 J1 u" R" @' R) Z-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50%{
-webkit-transform: rotate(55deg);
transform: rotate(55deg);
! ~$ c6 [5 Z$ |. l" \6 M}
100%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
, Y. w- G6 w" _9 I6 g9 q}
$ u. }6 B: ^- ]& k! Z}</p> <p>
2 U3 t) T5 Y2 ]% Q5 x1 \, P; |@keyframes leftleg {
! L( D0 m/ G) E0%{
2 y$ {5 g9 O) [4 t/ k2 F5 O-webkit-transform: rotate(0deg);
transform: rotate(0deg);
0 g" }  ?; s7 }7 A8 ~  g}
50%{
" U5 m) n4 J9 c% n) U4 `4 Y$ \8 t, j-webkit-transform: rotate(55deg);
8 r) J9 \7 k, K* K( I' ~transform: rotate(55deg);
( E  }* _. `" R; a) E2 E# r}
100%{
# b  N  K+ T" n- Z% K-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}</p> <p>@-webkit-keyframes rightleg {
0%{
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
}
2 z' L6 v- D; `( y+ d4 _50%{
-webkit-transform: rotate(-40deg);
transform: rotate(-40deg);
4 g3 q5 r$ |% O% P0 V}
100%{
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
& A+ i# v4 [: y: T5 n% B}
}</p> <p>@keyframes rightleg {
& C  `) Z+ q' N- P+ O1 E2 ?+ K: k0%{
& U* E; J4 K( J+ x+ M+ O& D-webkit-transform: rotate(25deg);
* ~( t3 c# g. }2 h: J, Atransform: rotate(25deg);
}
! `+ s5 X! {/ _( P, V" w5 y9 k50%{
-webkit-transform: rotate(-40deg);
" X; h) X! V+ m" `transform: rotate(-40deg);
( U9 ?# K2 K" p+ w# F! a9 s}
100%{
-webkit-transform: rotate(25deg);
) Y) O* P* V8 R+ d& Atransform: rotate(25deg);
  [3 S3 K& E( g+ r}
$ E2 T( }, \0 i3 }' e) e4 Z}</p> <p>@-webkit-keyframes rightarm {
0%{
4 N) @$ }7 n6 S* I-webkit-transform: rotate(0deg);
9 Z1 `4 ]5 u% Utransform: rotate(0deg);
4 T1 x) g0 z5 Q}
50%{
-webkit-transform: rotate(40deg);
$ K& J5 }1 P# Mtransform: rotate(40deg);
7 A# k7 S+ n. V8 g5 H}
100%{
3 o) P/ T" Q" X! i% G' ]-webkit-transform: rotate(0deg);
0 Y. j; p. X' u. f) o4 W* k+ K7 R' |transform: rotate(0deg);
, t, R+ H+ A8 K( C6 |}
}</p> <p>@keyframes rightarm {
0%{
& Y6 p5 N. i& M2 M7 Y9 B-webkit-transform: rotate(0deg);
transform: rotate(0deg);
9 }8 [: ]/ v! Y4 u2 f}
50%{
" |. I) C, M3 A; E2 R& b-webkit-transform: rotate(40deg);
transform: rotate(40deg);
}
' f5 L1 d6 R) b' w100%{
" H/ m& g. }2 h, J1 Q-webkit-transform: rotate(0deg);
% l- L/ f, r1 m6 |5 {5 btransform: rotate(0deg);
}
}</p> <p>@-webkit-keyframes leftarm {
0%{
  e2 h8 o0 ^: v) ^8 V' a-webkit-transform: rotate(50deg);
: \- {$ z0 ~4 m: Htransform: rotate(50deg);
}
$ ~$ P) u5 A- I7 N/ a; O: R50%{
5 R5 S9 C5 b& i2 O$ j! X* h% A) _-webkit-transform: rotate(0deg);
5 T& j2 n3 C' f7 ~- o+ G  E. ftransform: rotate(0deg);
7 B( ~3 k" Z6 S1 N}
100%{
: k) N7 f( m: k-webkit-transform: rotate(50deg);
9 F6 G  X/ ]/ M) c6 h/ stransform: rotate(50deg);
}
}</p> <p>@keyframes leftarm {
% b3 r6 P- y( n/ a  S& B0%{
3 W$ b- |' D2 ]/ @1 l% F( e4 U-webkit-transform: rotate(50deg);
, m7 Y, K6 d* p& V5 A- ~transform: rotate(50deg);
% t8 C* P0 {, S8 M- J8 @0 O6 n}
- X% z7 L8 t5 M50%{
-webkit-transform: rotate(0deg);
) P3 T* _/ S" Z. Gtransform: rotate(0deg);
}
100%{
6 N+ c- t) |- v" x1 M- U6 y-webkit-transform: rotate(50deg);
1 _, @, i& B5 X, d( \# qtransform: rotate(50deg);
$ A# T4 l6 M: v  c/ H# b, i}
! m) Y, w1 Z- d0 e4 [}</p> <p>@-webkit-keyframes head {
0%{
-webkit-transform: rotate(0deg);
, O6 s' m! w; X1 K  V; m  Ptransform: rotate(0deg);
}
4 I; \5 [0 w4 U  |50%{
+ ?6 f0 Q$ _% j2 v# Y: t! w5 ?-webkit-transform: rotate(-5deg);
& q" O9 G1 s6 f4 C7 ftransform: rotate(-5deg);
}
100%{
; t. q7 b3 k! {( W-webkit-transform: rotate(0deg);
8 z! ]( ?1 b3 G. n% s9 Gtransform: rotate(0deg);
}
, m; z$ U7 [& j/ T3 Y}</p> <p>@keyframes head {
0%{
6 O2 p* X% W  j* t. H9 q-webkit-transform: rotate(0deg);
( `2 }% j0 [+ B/ H* ^transform: rotate(0deg);
, ]" Z3 V6 V# y: ^4 _/ G1 a}
( ^* Q* [1 b9 {" a  R' ]" l50%{
-webkit-transform: rotate(-5deg);
, i+ x. {3 `7 gtransform: rotate(-5deg);
, f# ]: q1 T; I% `3 `, r+ Y% ^}
100%{
-webkit-transform: rotate(0deg);
2 ~' }' o. _* K/ z, p" t- qtransform: rotate(0deg);
}
* L8 t/ O  s! \% L  _2 B% u) ?}</p> <p>
; q5 d7 s, s9 |3 i@-webkit-keyframes pulse {
4 U( \4 Z0 Q+ t9 m5 j) h: T: F* Y3 K0%{
* `- L' L7 q- l2 s-webkit-transform: scale(1);
# m4 E. x; o5 h, o1 F4 ^  ~transform: scale(1);
4 \' T0 @3 H( @0 P}
5 S4 V0 n$ M1 t50%{
-webkit-transform: scale(1.1);
* p' c2 n2 U* e+ s8 vtransform: scale(1.1);
4 a& E8 d& G' e# ]7 E2 [) q5 Y6 x}
100%{
-webkit-transform: scale(1);
transform: scale(1);
# D8 N% d) P+ s, c/ I$ r}
}</p> <p>
* ^3 I& f: o0 c" r- y1 Z@keyframes pulse {
9 P8 W# T$ n8 j0 t0 I2 n9 k# C0%{
-webkit-transform: scale(1);
- Z4 \9 X" \6 |5 H, wtransform: scale(1);
}
50%{
-webkit-transform: scale(1.1);
transform: scale(1.1);
  V7 c9 O0 b" J% C: I. o& a}
100%{
-webkit-transform: scale(1);
transform: scale(1);
; z' C1 Y/ D- f, @4 M}
}</p> <p>@-webkit-keyframes eyebrows {
, l4 p3 @% H* \0%{
- ]# K' \2 Z  m  w" d- V, p}
98%{
-webkit-transform: translate(0, 0px);
# E4 r+ S5 g: R8 |6 ]: m$ Dtransform: translate(0, 0px);
5 U, g) v# `* P/ U8 E7 W}
99%{
  o. [$ j2 E- Z6 Y3 ?8 z-webkit-transform: translate(0, -5px);
transform: translate(0, -5px);
}
7 n& n. \$ |& D1 g* v- I1 V100%{
) V! I3 ?, ~* f-webkit-transform: translate(0, 0px);
transform: translate(0, 0px);
9 U1 ^$ Y! v6 m! J. g5 D" o}
& W1 p) b$ w- V) M/ {2 y! Q7 l/ \6 `}</p> <p>@keyframes eyebrows {
0 v$ v  U. e  q0%{
+ G" I) L) {1 e5 |}
+ U' H7 F4 V) D& _98%{
+ N0 }/ y. k3 C1 K; O6 N-webkit-transform: translate(0, 0px);
transform: translate(0, 0px);
}
99%{
3 R  E3 {% Q/ ]1 P" E-webkit-transform: translate(0, -5px);
transform: translate(0, -5px);
}
, ~( ]  L! L4 `9 E100%{
-webkit-transform: translate(0, 0px);
" i/ j2 p$ L: V% X& Ktransform: translate(0, 0px);
}
}

+ ^( _- Q4 I0 t. k# f& J& P更多网页制作信息请查看： 网页制作

感觉楼主说的很不错，我也很赞同

这是安慰我啊~~还是垮我啊???怎么感觉又被扁了啊

机会就像水中的鱼，耐心等待就能上钩。

兄弟....表给偶丢丢哦....

注:偶是女滴,千真万确,毋庸置疑!

女人啊真是那句话~~~无理占三分~~忘记怎么说了 呵呵 ~~你帮我想想

哈哈 ok ~~~

看,刚说你眼神不好,你还就来劲了不是.

…没我说话的余地…飘走

不错的东西 持续关注