html5 css3实例教程

之前介绍了好多款html5和css3实现的动画，今天要给大家带来一款html5和css3实现的小机器人走路动画。该实例的人物用html5绘画的，动画效果是html5和css3实现的。一起看下效果图。
2 G2 X, ~7 \8 b, B; a% N+ T实现的代码。
html代码：
6 O$ b5 P. ~2 Z' n; m8 j代码如下:
8 P1 G4 ?1 I1 g3 j& C& s$ U4 e<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>
<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
5 R) o# s& J7 M2 ~- ?- Sc1.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
c289.8,202.2,286.7,205.6,282.9,208.4z />
$ o0 k' c5 x& D0 h</g>
<g>
0 S( @. C  E2 I0 X) G! w4 M0 p4 }<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
2 s- R% U$ V2 y! p, j6 G3 N5 Ic-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 />
! D( }: Z& P5 V. }4 U<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 />
; s1 N8 v* h) i0 A" y<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
) J3 I/ z# i* F7 b/ \0 Q0 f, N  @$ Uc-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 />
</g>
</g>
: u4 l6 _0 f' P1 a<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
5 f) k4 b% k! Q8 Vc1.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
; ]* j: b8 O; d3 [+ z; wc-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, H( d0 Q: ~5 a5 L4 Q</g>
5 `6 A1 F/ q3 ^5 R7 y. N<g id=right-leg>
  N4 ?$ Z& P% ^<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
2 }# C+ Q& L# ^' i' o+ tc-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 />
<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 />
+ _0 S  A6 I) ^5 W& R3 y<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
l-11.7-13.4c-1.7-1.9-3.8-1.5-4.7,0.8l188.1,249z />
<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 />
</g>
6 f7 l/ Q+ \) l3 f<g id=torso>
6 L; _- d( u; g! B2 n# N3 _<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
3 a" L/ C, n  i; Zc0-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 />
" f* u" g. l1 A) f4 u( V9 g7 M% r<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
c2.2-1.1,4.1,0,4.1,2.5v211z />
- u" O4 l1 i) f- n4 ]" y) i5 Q<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
/ ]* o. u; S% S1 p3 e$ Kc2.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 />
/ b8 [0 @! m# r<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
1 [  ]; H: b+ }& c8 @0 Xc-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 />
</g>
% q1 d( A8 I+ v" @+ i2 i<g id=right-arm>
- T0 J, N8 T& J( [! O<g>
* ?1 L* X1 M0 z5 X* ?  U+ a<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
" p/ U1 l0 G& ]* }8 b: dc2.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 />
5 \! b% H$ J  ?  P1 P/ x9 @: |2 T. e3 l<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 />
5 v) v  I& ^& \<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
+ x# r) s3 }* t& o% dl204.4,244.5z />
% F0 F( P3 k+ F2 }$ a; @</g>
<g>
7 t' {# t" I6 _% h. I! V, p<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 />
: o5 Y# c' [1 J0 G/ H3 f8 y<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 />
; \* l$ z4 l* r1 ]* b<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 />
2 r. B6 D" c8 r6 \( W<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 />
  P; Q) O3 a0 Q* Z<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 />
</g>
) x) k! o: `( }: f5 P$ i  z</g>
<g id=head>
. ?0 ^2 t& q! W$ ?& m<g id=sub-head>
<g>
<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
; s4 j/ q% |4 O; _. Vl46.4,23.2c4.5,2.2,11.8,2.2,16.3,0l288.6,197.1z />
5 V3 L' p% `* _4 x2 j<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 />
0 |3 `" i  ]3 t) d4 Y' u<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
' n2 R) j& f/ T  bc-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 />
2 m8 \- ~8 Z+ q# ]; `/ k; ?6 a</g>
<line id=right-eyebrow fill=#4d4d4d stroke=#000000 stroke-width=1.8222 x1=243.3
y1=180.6 x2=266.4 y2=181.7 />
7 G+ u" u* E( i6 S, t( Q<line id=left-eyebrow fill=#4d4d4d stroke=#000000 stroke-width=1.8222 x1=272.4
0 |, X2 z, r0 d/ fy1=177.4 x2=288.4 y2=164.6 />
: {* z& _0 Q. x! _/ V<circle id=left-eye stroke=#000000 stroke-width=0.9111 cx=283.6 cy=176.5
2 ~7 i9 ^0 g+ R% }r=3.8 />
<circle id=right-eye stroke=#000000 stroke-width=0.9111 cx=257.5 cy=186.9
& @0 `3 j, P  yr=3.8 />
</g>
<g id=hair>
' f" f* \1 g. _7 m<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  />
& X+ w9 H1 @- j- g! F<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  />
<polygon fill=#fe666d stroke=#000000 stroke-width=0.9111 points=227.5,102.7 201.1,67 221.1,60.1 247,94  />
2 w1 ~, j4 [! M$ b9 o) ~<polygon fill=#fe333d stroke=#000000 stroke-width=0.9111 points=241.3,104 223.4,55.6 243.9,48.7 261,94.9  />
2 T* w  P2 Q- a+ c<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
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
- W9 f1 P- R  P+ t& _. U( o( F185.6,93.4 185.6,93.4  />
% y/ f: ]5 g5 c+ w</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)
gradientunits=userspaceonuse>
<stop offset=0 style=stop-color: #231f20; stop-opacity: 0.3 />
+ ], f7 d% V. o9 I7 L7 g1 N' S<stop offset=1 style=stop-color: #231f20; stop-opacity: 0 />
</radialgradient>
7 K6 N4 V7 M7 }5 r<ellipse fill=url(#svgid_1_) cx=240 cy=271.3 rx=122.5 ry=31.1 />
</svg>
css3代码：
代码如下:
html {
# r4 `) b" u+ E2 L) f# s' p9 P-moz-box-sizing: border-box;
% S0 D) ]& ^6 r, P6 |box-sizing: border-box;
5 ?7 E6 p% |4 K8 a# o8 n* m$ A# E6 p}
*, *:before, *:after {
( L( s: v& t% I) I& ?-moz-box-sizing: inherit;
box-sizing: inherit;
; P9 y6 E$ x( S* ^}</p> <p>html,body {
height:100%;
margin: 0;
4 n7 @! j5 f/ W) |; Wfont: 40px/40px helvetica neue;
! {: N/ {4 d2 i+ Dfont-weight: 900;
1 d  a5 _2 k8 T( y% [0 O1 Lcolor: rgba(255, 255, 255, 1);
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
}</p> <p>svg {
( V1 {8 l' L/ j, b  H( E, Dwidth: 100%;
height: 100%;
}</p> <p>#left-eye {
-webkit-transform-origin: 283px 176px;
-ms-transform-origin: 283px 176px;
2 o. u' [2 |  z6 R+ J: u/ H) Wtransform-origin: 283px 176px;
: }0 A. s: o/ \, S! {' q) k, b# C; z/*animation: pulse 2s linear infinite;*/
  Q9 r" w6 ]9 S/ |- y}
8 g, q0 f- ?/ o0 C#head {
-webkit-transform-origin: 235px 173px;
-ms-transform-origin: 235px 173px;
transform-origin: 235px 173px;
  _" Q; z! {1 c3 w: E  I2 m-webkit-animation: head 2s ease-in-out infinite;
animation: head 2s ease-in-out infinite;
}</p> <p>#right-eyebrow, #left-eyebrow {
' t$ }. O& U% z+ ?/ d) U-webkit-animation: eyebrows 10s linear infinite;
animation: eyebrows 10s linear infinite;
+ i7 b6 S# [* h2 w+ X1 M7 s}</p> <p>#left-leg {
. O, c. R1 n9 F' H& J! |: O-webkit-transform-origin: 253px 225px;
- C) E( i! h+ q. y' b/ Y-ms-transform-origin: 253px 225px;
transform-origin: 253px 225px;
. N& O4 y1 C+ [2 E: A-webkit-animation: leftleg 2s ease-in-out infinite;
! B* n9 i3 B$ g: @animation: leftleg 2s ease-in-out infinite;
}</p> <p>#right-leg {
2 {" W8 w* l  [1 F, \: f, h! E-webkit-transform-origin: 225px 235px;
& Z5 z4 Y6 Y. I+ y-ms-transform-origin: 225px 235px;
/ \1 O; Y$ Q! q2 v6 ktransform-origin: 225px 235px;
' |* V6 g9 Y$ ~( ?-webkit-animation: rightleg 2s ease-in-out infinite;
( \# a* e. ?, |" Eanimation: rightleg 2s ease-in-out infinite;
6 Z1 J& E% O! {+ ~5 G/ ^# h1 c, n}
0 r6 h( S% y! b+ _5 z+ _#left-arm {
: r$ e3 |& i5 |, c" s0 S9 T* q9 k-webkit-transform-origin: 263px 186px;
, o7 l6 M: _) c2 w' {6 B1 |* J: u3 h-ms-transform-origin: 263px 186px;
transform-origin: 263px 186px;
-webkit-animation: leftarm 2s ease-in-out infinite;
8 u$ K; S' r! S  Zanimation: leftarm 2s ease-in-out infinite;
  K! W$ ]% e5 \3 t4 f2 d! P}</p> <p>#right-arm {
-webkit-transform-origin: 209px 214px;
8 t+ V6 ~" b( K; j2 i3 I+ }-ms-transform-origin: 209px 214px;
6 u% t, V# V* F  V) T% z3 [9 ?transform-origin: 209px 214px;
$ k7 q$ D% l0 y-webkit-animation: rightarm 2s ease-in-out infinite;
& T, ?. o- R/ N2 K) Wanimation: rightarm 2s ease-in-out infinite;
}
" R  C" h0 l" x#hair {
-webkit-filter: hue-rotate(45deg);
# w+ {7 E+ Z; y( _) kfilter: hue-rotate(45deg); /* izza not workingz! */
}</p> <p>
7 H  P+ B/ N  W: X/ d@-webkit-keyframes leftleg {
: E! D. f) R6 F: p& H9 t2 F8 q0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
2 S9 A/ a; J7 D; D) U  m! E50%{
-webkit-transform: rotate(55deg);
transform: rotate(55deg);
, x0 {) h6 L; u4 ?}
, t9 }" C5 X- Y5 ^' J4 ~100%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
: L" W! u, {* ^  O}
}</p> <p>
3 z0 G) x. k* \$ Y3 k4 Y! ?@keyframes leftleg {
0%{
-webkit-transform: rotate(0deg);
; m) W! ]) `5 s/ L0 P6 R: ?) R* h# @8 jtransform: rotate(0deg);
}
8 l5 k5 Y' T" I8 X7 z50%{
( Q5 O  O* i0 r) t- W; A-webkit-transform: rotate(55deg);
% w9 ]) r* ~2 V  ~6 n/ H# Mtransform: rotate(55deg);
}
100%{
-webkit-transform: rotate(0deg);
% b* o6 |8 N4 F! w- Y/ btransform: rotate(0deg);
+ y; H" ?; u5 s4 }2 U. x. A( H% Q}
}</p> <p>@-webkit-keyframes rightleg {
1 v3 u# r7 a/ [0 E* V6 C$ @+ o0%{
-webkit-transform: rotate(25deg);
: @8 [4 e$ g* Q1 R, [) jtransform: rotate(25deg);
}
50%{
- b0 t2 |" q  H/ c9 t( x-webkit-transform: rotate(-40deg);
: `" m0 `$ u( `8 Btransform: rotate(-40deg);
% |( {# ?  c, w4 [}
) A/ l/ Z1 o' E$ g100%{
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
}
}</p> <p>@keyframes rightleg {
8 I$ |; w7 F8 X8 b2 C( }0%{
. @1 x2 Q( W. ^! P-webkit-transform: rotate(25deg);
transform: rotate(25deg);
& j; C) Z# T# @+ g/ [}
50%{
1 x0 Z1 A7 _& y% j$ a7 Z; l: K5 `0 H-webkit-transform: rotate(-40deg);
transform: rotate(-40deg);
}
100%{
-webkit-transform: rotate(25deg);
; u) [3 Q9 d; `( Q8 u# b/ \0 ztransform: rotate(25deg);
}
}</p> <p>@-webkit-keyframes rightarm {
0%{
-webkit-transform: rotate(0deg);
5 n+ Y0 I- }! }$ _transform: rotate(0deg);
& b3 A9 ~& p8 f5 `: U9 a5 Q}
; D0 [9 P( M. ]/ X) s3 K& [! X% K50%{
1 S/ y3 D, W0 s# g  n6 {% z6 S-webkit-transform: rotate(40deg);
transform: rotate(40deg);
}
0 w3 h8 Q& H* M; v/ C% {100%{
3 {" @# V0 j: K" A  V' v$ p- x" A-webkit-transform: rotate(0deg);
" [" i) {+ F3 R2 m% X; Ftransform: rotate(0deg);
1 h$ x# R( J0 J8 E: e7 T}
}</p> <p>@keyframes rightarm {
0%{
4 J  N6 a% q% F# j# x7 R. b3 ^-webkit-transform: rotate(0deg);
2 i8 U- F( n) Wtransform: rotate(0deg);
}
50%{
$ h& W. c8 }8 N+ b* u) s-webkit-transform: rotate(40deg);
transform: rotate(40deg);
- b6 O+ ~9 h* g# j1 \' ~% t}
& G* `( D+ ^+ Z/ v$ z1 W& J, J100%{
" h# n, M1 c- W4 t- N4 P! t-webkit-transform: rotate(0deg);
! d6 b+ k5 }/ Wtransform: rotate(0deg);
; l1 k. j: a$ A- T5 M}
! u9 O2 ^; a% d, D+ T, i/ p}</p> <p>@-webkit-keyframes leftarm {
0%{
4 r! W3 g2 g4 R# ]0 R! i4 A-webkit-transform: rotate(50deg);
  P6 [  q0 i3 `& ^( {* B* ttransform: rotate(50deg);
}
! _* D! z3 D4 Y! S. N0 v! w50%{
9 l/ _; N! t/ B+ y9 v-webkit-transform: rotate(0deg);
& g2 D. m3 l* a* \6 Gtransform: rotate(0deg);
* d& R, x- q! k- P0 z}
9 J" V, U  a9 `- z9 J100%{
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
}
}</p> <p>@keyframes leftarm {
0%{
' J! F$ w" z; c4 V1 ?-webkit-transform: rotate(50deg);
) s- v9 Q. P! M1 e( H' k% ^transform: rotate(50deg);
}
4 |! l9 W2 ]4 V* {2 T50%{
8 G4 p, n/ f, N) E" M1 v-webkit-transform: rotate(0deg);
transform: rotate(0deg);
: R2 f3 m' A- l3 j7 }6 V* ~: ]1 d}
/ x. {1 H5 [6 ?3 ?& t100%{
' i2 {" C8 [5 J3 x0 A, ?+ F" ]! m-webkit-transform: rotate(50deg);
transform: rotate(50deg);
}
* K- d$ ?. t2 a3 I& ~( Z/ d) l3 W}</p> <p>@-webkit-keyframes head {
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
+ T5 y4 {: _6 b; A& @# _' L50%{
-webkit-transform: rotate(-5deg);
. X! L- e0 }% y+ R, f: ~transform: rotate(-5deg);
7 C$ I, b/ z4 _0 F2 n5 o}
100%{
-webkit-transform: rotate(0deg);
; v( {: m( v; G4 s4 d: H6 G! k1 qtransform: rotate(0deg);
, B# K$ f& w: B7 _% r}
}</p> <p>@keyframes head {
4 o; g! ?' H6 C0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
  A5 _# w( b3 X0 d8 O  D' ]! E+ o50%{
' W; a6 k0 w- N. F+ e. J# J! U-webkit-transform: rotate(-5deg);
* x* m8 i7 x# P! Qtransform: rotate(-5deg);
}
2 _1 p! m" O5 e2 h5 f100%{
-webkit-transform: rotate(0deg);
7 n& ~/ b1 L& x" w" v0 ?' E7 m/ ftransform: rotate(0deg);
}
}</p> <p>
@-webkit-keyframes pulse {
0%{
-webkit-transform: scale(1);
transform: scale(1);
- h- ], g, J; i" w$ m& N& S* t}
50%{
% K" V9 W, I! N* A3 ~-webkit-transform: scale(1.1);
transform: scale(1.1);
}
+ x" r5 \: R/ A. Q- q100%{
-webkit-transform: scale(1);
; Y. z5 U: @$ t9 jtransform: scale(1);
1 l. f! e" R$ d9 e! M2 m}
# Y& x3 G, z: O}</p> <p>
$ @$ X; m" {# o@keyframes pulse {
0%{
-webkit-transform: scale(1);
transform: scale(1);
}
50%{
- Y: ]4 y+ a' @& ^. w, a- o-webkit-transform: scale(1.1);
transform: scale(1.1);
: s" M3 X7 A+ O$ }! ~6 R}
4 x9 e; b" b6 N; S, b, `, {. t2 B) ?100%{
6 J  Y$ ~: b2 D4 H8 S% y5 N" a-webkit-transform: scale(1);
transform: scale(1);
: G- _  c$ u* r0 `: Y% V3 {9 F& z}
$ Y" v" m$ S, _6 z4 b) F}</p> <p>@-webkit-keyframes eyebrows {
0%{
0 u& |; j  ~6 f! j4 ^6 l}
98%{
2 s: y" f! B7 t, j, u-webkit-transform: translate(0, 0px);
* O' b0 w* R7 ptransform: translate(0, 0px);
}
! P  R3 g. \1 d" V99%{
-webkit-transform: translate(0, -5px);
* P. F5 Y3 [. U/ n: A+ W( T6 Stransform: translate(0, -5px);
}
100%{
-webkit-transform: translate(0, 0px);
" E5 i( j6 p2 xtransform: translate(0, 0px);
, J% A; r1 E: ^}
}</p> <p>@keyframes eyebrows {
. I& l% y; k: u9 Y& ]0 V  P0%{
. Z- B9 p& ]  [% R. p& L9 x! [}
98%{
-webkit-transform: translate(0, 0px);
transform: translate(0, 0px);
$ s$ W, _! s' }  f9 b3 g+ }! g}
, Q7 W; _6 ^/ }5 t) F, H* {99%{
-webkit-transform: translate(0, -5px);
9 L+ w: a% j3 `5 }; _transform: translate(0, -5px);
8 l: ~" I; ^, e% T}
  T# Y/ f4 ~- Y' E100%{
-webkit-transform: translate(0, 0px);
* b8 C# Y$ O2 b/ S3 C4 Xtransform: translate(0, 0px);
}
}
- q0 i4 n3 v  f* X2 o
8 t7 {8 C6 C  k$ ^更多网页制作信息请查看： 网页制作

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

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

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

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

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

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

哈哈 ok ~~~

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

…没我说话的余地…飘走

不错的东西 持续关注