html5 css3实例教程

之前介绍了好多款html5和css3实现的动画，今天要给大家带来一款html5和css3实现的小机器人走路动画。该实例的人物用html5绘画的，动画效果是html5和css3实现的。一起看下效果图。
: [; B2 C& T+ v; v% Z实现的代码。
html代码：
8 T1 [% f1 D3 r; r/ A' _9 H代码如下:
# \1 |+ K$ I7 {<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>
& k! R" U; m. j$ i) n& J; X<g id=left-arm>
, J& \( W$ b+ C* c. V<g>
6 L3 C# P1 x9 T" h8 l$ D<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
" P+ s8 Q7 }1 s2 H: rc1.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 />
</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
4 ?8 X+ S& W" V- Hc-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 />
+ T- G" O; Z2 }+ {7 Z<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
5 f7 E; F6 R  al287.8,189.9z />
9 ]; l5 `5 a. `& r<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
c-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>
9 e+ }" Z! @3 {) _& L. @</g>
<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
  L! ?( e3 I& Dc-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
c1.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
& G. D. c$ P+ K5 C+ d2 a: w4 ?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 />
6 m- j, F0 q* q7 C! A0 D<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
c-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 />
, i+ ^3 e% ]3 X9 t3 D1 q9 \</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
" i3 J% F& F! y1 |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
# X) Q) v) u6 T; G% [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 />
* H6 C- `! j% n+ N; Z- X<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 />
<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
: ]. v1 Y  t. V+ c5 Xc-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>
" Z4 {  T1 Z1 Q4 P7 p9 H- P<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 />
+ P" P) n6 `# t) A: A. ]/ I; d6 u<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 />
$ P. |" y! N. H  ^' F<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 />
; `! D7 d/ N6 `$ o<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
c-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>
+ E! N, P( f' I4 ^* A1 U<g id=right-arm>
<g>
; ~3 P  ~5 \! E7 \& ~( U<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
c2.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 />
<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
  \) k: ]2 {) A0 N# |5 B" }) N' fc231,236,227.5,237.7,223.7,238.6z />
2 K8 Q4 {5 t1 M<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
; @+ l: ?# u% y2 Xl204.4,244.5z />
</g>
<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 />
" G4 L- v* e9 |- e<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 />
  i% o, `6 \/ \$ A8 S<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 />
<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 />
5 Y. |9 [7 v, _, p- E, V5 @<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
# {! S6 c- C6 E0 Z6 s# w4 Fc-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 />
  I4 n2 u) Z% [</g>
( y, p& s) u+ ]1 i, S</g>
<g id=head>
; |: n* k6 E9 i( I2 Q5 Y" ]<g id=sub-head>
<g>
9 q3 r: \! |" K$ |<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
- ~1 Z2 m" r# o: S' I1 @  ?4 p& yc0-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
; `; M4 H3 @8 x- o! u4 g1 v: L0 ^! L) ul46.4,23.2c4.5,2.2,11.8,2.2,16.3,0l288.6,197.1z />
5 T" N9 z  S* \4 b$ b% B/ C8 F<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 />
6 X, u( u' Z# a: j+ y<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
! F; E  L8 a; C' \, V+ p/ E( Il-46.4-23.2c-4.5-2.2-8.1,0-8.1,5v183.9z />
6 w4 f2 [: O8 Q0 `. h1 m8 T3 C( w<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
* j2 L$ Q7 y. k4 z( d0 I! E2 `/ nc-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
y1=180.6 x2=266.4 y2=181.7 />
<line id=left-eyebrow fill=#4d4d4d stroke=#000000 stroke-width=1.8222 x1=272.4
7 f$ k8 d9 ]# ^: Ly1=177.4 x2=288.4 y2=164.6 />
  Y8 M& k& p& |) F<circle id=left-eye stroke=#000000 stroke-width=0.9111 cx=283.6 cy=176.5
r=3.8 />
' q0 F4 l& l  h. z<circle id=right-eye stroke=#000000 stroke-width=0.9111 cx=257.5 cy=186.9
: J: |+ v2 J6 d) K5 S% Dr=3.8 />
+ p2 x- T! b" m0 R</g>
. o) y# q4 D' }# K<g id=hair>
<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  />
1 [( Y6 |$ C. J5 J3 R) 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  />
- @) G, W0 d& [* _5 g<polygon fill=#fe666d stroke=#000000 stroke-width=0.9111 points=227.5,102.7 201.1,67 221.1,60.1 247,94  />
  u7 S: b; w' e- e$ t<polygon fill=#fe333d stroke=#000000 stroke-width=0.9111 points=241.3,104 223.4,55.6 243.9,48.7 261,94.9  />
<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
# g3 v6 x' I3 h" A  C, }' h185.6,93.4 185.6,93.4  />
) _2 ]7 j- z. f& X: t& q; R! i</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>
6 [* O- O/ H- d6 }1 U2 h1 n! e7 f<stop offset=0 style=stop-color: #231f20; stop-opacity: 0.3 />
<stop offset=1 style=stop-color: #231f20; stop-opacity: 0 />
% E2 r' i/ m9 v8 D" |& b. ?* y</radialgradient>
<ellipse fill=url(#svgid_1_) cx=240 cy=271.3 rx=122.5 ry=31.1 />
</svg>
8 e# A" A3 G8 Y1 Tcss3代码：
代码如下:
1 s* E) G. y. ~html {
. ?% w0 M1 _) i4 p, k$ F-moz-box-sizing: border-box;
7 s7 ?' d- L. Q  d! Q* Y+ O8 mbox-sizing: border-box;
  N+ {' T5 E3 G}
*, *:before, *:after {
: l$ J$ U, j3 p8 u, o' H3 q( t2 f-moz-box-sizing: inherit;
box-sizing: inherit;
; G+ f2 i0 t2 h9 h}</p> <p>html,body {
) s8 S: S& ^+ s' @7 W2 V! Y1 aheight:100%;
$ T1 c9 _! a  j  }0 Xmargin: 0;
font: 40px/40px helvetica neue;
font-weight: 900;
color: rgba(255, 255, 255, 1);
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
}</p> <p>svg {
2 g& w0 P% {$ Nwidth: 100%;
height: 100%;
# E# g" G% J" L" B6 U9 _}</p> <p>#left-eye {
  {7 ~* t8 s% @- ~-webkit-transform-origin: 283px 176px;
8 x/ ~& F3 t3 o3 J0 A5 D-ms-transform-origin: 283px 176px;
' h+ R" Z% x) q- d# L: Wtransform-origin: 283px 176px;
/*animation: pulse 2s linear infinite;*/
* B( `$ @) y4 v& A' H}
#head {
: H, H  V8 z7 S4 S-webkit-transform-origin: 235px 173px;
-ms-transform-origin: 235px 173px;
transform-origin: 235px 173px;
+ n. u: L  L* E$ q% h' p-webkit-animation: head 2s ease-in-out infinite;
animation: head 2s ease-in-out infinite;
5 h0 k6 I1 x) h9 e}</p> <p>#right-eyebrow, #left-eyebrow {
-webkit-animation: eyebrows 10s linear infinite;
animation: eyebrows 10s linear infinite;
}</p> <p>#left-leg {
-webkit-transform-origin: 253px 225px;
-ms-transform-origin: 253px 225px;
# Q( W9 @' A2 g+ j9 g4 }transform-origin: 253px 225px;
. V& l! r$ b  ?; l5 G-webkit-animation: leftleg 2s ease-in-out infinite;
) D; |. U3 u: qanimation: leftleg 2s ease-in-out infinite;
}</p> <p>#right-leg {
-webkit-transform-origin: 225px 235px;
-ms-transform-origin: 225px 235px;
2 Z# {2 ^( {' K5 E1 q2 n  w( Utransform-origin: 225px 235px;
/ @# z! o+ e7 h-webkit-animation: rightleg 2s ease-in-out infinite;
% z* B2 }* F) k0 Nanimation: rightleg 2s ease-in-out infinite;
}
#left-arm {
-webkit-transform-origin: 263px 186px;
-ms-transform-origin: 263px 186px;
transform-origin: 263px 186px;
. i$ Y, m3 l- o: z; c' t-webkit-animation: leftarm 2s ease-in-out infinite;
4 C( F! t2 Q2 ^* N! oanimation: leftarm 2s ease-in-out infinite;
3 P# T, V2 k$ x; i; ]3 ?}</p> <p>#right-arm {
-webkit-transform-origin: 209px 214px;
# X2 [8 E) [+ s) x1 k% d-ms-transform-origin: 209px 214px;
3 O4 {; r6 W) |1 w2 r( Otransform-origin: 209px 214px;
-webkit-animation: rightarm 2s ease-in-out infinite;
1 o( q: k  d8 p/ D7 ianimation: rightarm 2s ease-in-out infinite;
}
- ~$ r* i9 Z5 y% P& }6 j1 r3 D#hair {
/ B! [' d3 S  X) F4 }% q: p/ Y-webkit-filter: hue-rotate(45deg);
; l6 ]) K! t( N: z% Ifilter: hue-rotate(45deg); /* izza not workingz! */
" N# ~" j# }/ ]/ X1 O* y( F}</p> <p>
) Y- ^9 w. W) d  W; s@-webkit-keyframes leftleg {
" t: \% R- R# |& L; D0%{
-webkit-transform: rotate(0deg);
, n! K$ M& R! g" v- }+ ]. S) W' qtransform: rotate(0deg);
}
50%{
+ q0 O  s5 F0 }( L-webkit-transform: rotate(55deg);
transform: rotate(55deg);
}
; A6 T" o! O. `4 N( q100%{
-webkit-transform: rotate(0deg);
6 F4 o% C/ W2 a, Z( T# |/ Q! @: Ytransform: rotate(0deg);
}
}</p> <p>
@keyframes leftleg {
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50%{
/ r" F& n" j- I+ s-webkit-transform: rotate(55deg);
transform: rotate(55deg);
}
( _5 v. ]7 H5 l100%{
-webkit-transform: rotate(0deg);
* u4 i7 {( y% B; @7 i- [transform: rotate(0deg);
( t$ y8 d" j1 O3 ^6 q. f( C! Y}
}</p> <p>@-webkit-keyframes rightleg {
0%{
-webkit-transform: rotate(25deg);
; G1 D) s! a7 K' ^5 S3 S: `transform: rotate(25deg);
# R0 @6 o' U. Z}
50%{
-webkit-transform: rotate(-40deg);
transform: rotate(-40deg);
}
100%{
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
}
1 T  a+ Z3 G5 g1 e" P}</p> <p>@keyframes rightleg {
& x. H5 o2 t  H% X3 |* M8 n" {, L4 P0%{
2 L/ d2 k  S/ L- u-webkit-transform: rotate(25deg);
transform: rotate(25deg);
% V5 a5 N3 g# z, k3 k$ g}
: V0 b& G% J7 w+ J50%{
/ {; S( T/ H  d* Y. s# {-webkit-transform: rotate(-40deg);
( ?$ m- k; a+ t4 U, A; `5 ntransform: rotate(-40deg);
! ]' T3 M" s2 N}
( n& M6 N* A: o' F! r# G100%{
: X* W- m) E6 w4 E& e8 J/ k-webkit-transform: rotate(25deg);
# l* [$ a+ \+ n4 W7 Qtransform: rotate(25deg);
% i) \. S5 P7 f6 m0 `}
0 ?3 d" b! z' b. x0 _3 \}</p> <p>@-webkit-keyframes rightarm {
* z$ b9 L: X( N& t0 H0%{
, q( q* s7 @4 `: G& r4 R, q-webkit-transform: rotate(0deg);
7 x- l7 }, v! R% [- x% C6 _$ ?transform: rotate(0deg);
- k% b# l$ ^3 G- E- u) S}
: b- x& k3 I6 M, H  q  I# f50%{
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
3 Q* N! [, i# s% a}
100%{
) s# s' [* Q# P+ ~" g6 y9 Z/ p-webkit-transform: rotate(0deg);
transform: rotate(0deg);
" y' _7 ?! e) t0 W( q}
) W( ^, B* u! C# h% h% N+ w}</p> <p>@keyframes rightarm {
+ d; e( P6 E1 W! L$ {0%{
2 N0 b" p; f& a-webkit-transform: rotate(0deg);
& ], ^. `0 Q; v! m$ xtransform: rotate(0deg);
3 c0 S# ^* Z/ V8 f* _$ V7 N+ ~* r}
  |# }, s) Y1 Q) e& i9 g50%{
+ P- n  @. J# l-webkit-transform: rotate(40deg);
transform: rotate(40deg);
}
100%{
$ N5 `* L' T) ?; Y/ F' T8 q-webkit-transform: rotate(0deg);
4 ?. @- J: `- [% l9 Ftransform: rotate(0deg);
7 g5 @% ?# ^, l0 d}
" G) T2 w2 r1 p& w) h+ \}</p> <p>@-webkit-keyframes leftarm {
2 |+ ~$ r( c' o0 ~5 j0%{
) f* @/ S* s0 W-webkit-transform: rotate(50deg);
transform: rotate(50deg);
5 }/ D7 K$ z7 {- r  O# |( s) M}
6 I5 U8 U; o% R' J/ V' t50%{
9 A) i+ r& s8 T# d# y-webkit-transform: rotate(0deg);
# ?& v5 }+ W6 v( B# {+ Atransform: rotate(0deg);
  I  }' T9 C  f' H}
2 H1 t, H/ [% R( J8 ~" C100%{
4 o- b5 U! C9 g, M2 Y1 {; M, r! f$ g-webkit-transform: rotate(50deg);
transform: rotate(50deg);
}
; q$ x; f4 e' V. n2 u: ]( q3 Y}</p> <p>@keyframes leftarm {
0%{
* G, }" z* z4 K; I) r-webkit-transform: rotate(50deg);
transform: rotate(50deg);
}
50%{
4 j/ p7 \8 A" A9 I3 u-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
, |5 Z6 R) [7 A; a& J100%{
: b- h% G: l0 k! G' u-webkit-transform: rotate(50deg);
transform: rotate(50deg);
}
7 I9 k! ?! _& T* \4 L$ b* a}</p> <p>@-webkit-keyframes head {
; V% N, ^) M' Z9 N0 B; f4 s4 B7 j0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
. n6 k9 q: Q0 w+ T# x$ W; R$ ]$ d# |, q}
50%{
" e, h3 o7 q2 B# A( X% e! N0 o. t-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
}
4 k4 N, ^+ i9 m; `/ l100%{
0 p0 y, K- f# G. G' V; Y$ S* A+ H-webkit-transform: rotate(0deg);
0 j8 v6 a; R7 ?0 u- m* Itransform: rotate(0deg);
# Y: T1 r; U0 @( Y1 l}
8 c. o9 h* {4 C9 x2 `, R}</p> <p>@keyframes head {
0%{
) [& v" D. G; V3 R7 q- N0 d-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50%{
% ~2 Z& ?) U1 h4 d-webkit-transform: rotate(-5deg);
2 l! \. S) X7 C8 y4 b3 d( jtransform: rotate(-5deg);
}
100%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
( o& q) E2 |  f1 H, p) @; ^: ^}
9 G$ F4 O) o+ b; {7 r}</p> <p>
8 e8 \& i5 S& ?@-webkit-keyframes pulse {
7 K' o) R; i) [4 a0%{
-webkit-transform: scale(1);
# i" Y# I3 l& n8 I$ B' ?8 Xtransform: scale(1);
}
50%{
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
  k' G2 e: ]; ~7 j6 S! [' T9 G4 A100%{
-webkit-transform: scale(1);
, T0 w+ y8 t& m+ P4 rtransform: scale(1);
}
}</p> <p>
4 A: U4 @  A; a/ u@keyframes pulse {
0%{
-webkit-transform: scale(1);
( U" T3 I9 A6 atransform: scale(1);
}
50%{
+ g: Z2 o% K4 {* j+ ]-webkit-transform: scale(1.1);
0 _/ m& T9 h' B/ ~transform: scale(1.1);
}
100%{
-webkit-transform: scale(1);
) `. n, J! L2 D& Ctransform: scale(1);
( y# W2 ~- `" K3 z}
}</p> <p>@-webkit-keyframes eyebrows {
9 E3 B/ p3 ^* z( N" _: T0%{
8 E+ [3 u! p) i* f8 F" x}
7 k2 z+ O" t+ h98%{
4 v" t2 [5 P0 v: L# y1 ^-webkit-transform: translate(0, 0px);
1 r% `% d" x; a9 o6 T8 h9 }transform: translate(0, 0px);
6 o+ U: Q4 \$ B- @$ }}
99%{
) j/ R" K% G/ \/ T, e-webkit-transform: translate(0, -5px);
, b: S8 `- `" o2 j4 e" qtransform: translate(0, -5px);
}
100%{
0 J5 k& o" |9 h. y5 [" ^. H$ i' j) H- s-webkit-transform: translate(0, 0px);
transform: translate(0, 0px);
+ w3 c4 N4 N0 C}
}</p> <p>@keyframes eyebrows {
0%{
- r6 e0 z3 L4 p* `1 j9 V" ?}
) N+ {. ~# g. R7 Q, D( x% b98%{
6 @7 i% S& j. ?, v+ J7 z0 r% X-webkit-transform: translate(0, 0px);
6 h; Q: f# e$ y3 D" f  i$ M+ A1 E* Htransform: translate(0, 0px);
& f& i8 w: u; I% Z}
# x) R& U# V/ [- p99%{
-webkit-transform: translate(0, -5px);
0 @1 |. i( a* O; J4 E9 Itransform: translate(0, -5px);
; A& n, @3 @: d+ e}
& e/ Y. d) V2 {0 L$ n, x, ^100%{
3 `: G+ D: {; ~8 A-webkit-transform: translate(0, 0px);
, d% j/ M  [2 P; Xtransform: translate(0, 0px);
}
. ^, g2 s3 X3 @) n6 O}
: @6 l& g9 Q& m
3 y: K( m; N6 ?( c0 u/ `* R更多网页制作信息请查看： 网页制作

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

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

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

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

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

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

哈哈 ok ~~~

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

…没我说话的余地…飘走

不错的东西 持续关注