html5 css3实例教程

之前介绍了好多款html5和css3实现的动画，今天要给大家带来一款html5和css3实现的小机器人走路动画。该实例的人物用html5绘画的，动画效果是html5和css3实现的。一起看下效果图。
实现的代码。
html代码：
2 _% _& W4 t: l7 N/ _  ^; k3 P' W代码如下:
<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>
8 H6 ]: }& j- b; `3 l<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
" K* K/ U- M+ u- _0 K, b% L$ i. E+ x3 }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
c289.8,202.2,286.7,205.6,282.9,208.4z />
</g>
<g>
0 T' N! A4 {% f0 j<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
" ~) |; z# E; o# Q3 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 />
- f) B* `# e: g3 t2 Q) S1 i4 i<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 />
) m, [2 f' \/ J1 |4 n<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* y! @, Q" G; ^</g>
</g>
$ W; @, ^- J; I4 M' f<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
, j5 e2 H9 b  e& }- Uc-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 />
) E. g: {$ ^4 W; I  I' \<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 />
6 K; v1 G& y& U5 u; f<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
' t' T1 H4 Y0 d5 M2 lc1.3-2.1,3.5-2.1,4.8,0l283.7,238.2z />
1 L  M* M! {1 Z' ^* }/ }! ]<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
) w' }$ k! v1 z# nc-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 />
8 i$ H, J$ m5 H0 }$ u% y+ p0 h</g>
<g id=right-leg>
3 ^8 y7 O) d: B) j1 Q- z2 f9 w<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
8 j' L3 a. B7 L5 C0 C2 Q' q' Lc-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 />
! C/ Q) [; J# T, r# X$ a<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 />
' u3 c. X/ m% w* y1 @- x<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 />
# O9 _, R3 q0 A8 L# D( \1 ^<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 />
1 n5 a7 N( I, g/ C<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
) ], w: s( l1 i6 G, hc-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 />
4 V% @  G0 o7 ^' P" D</g>
9 `4 ]8 x  Z5 J<g id=torso>
# }+ }- K5 i6 y9 e4 i- V<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
8 i: p7 w. b' ?# {) 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
% n( z& a( X* cl23.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
: K. m' ?# L# G' E& }" [; `  Xc2.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
. [' i6 p( H) q+ w& K' }" A" zc2.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
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>
" _! W: L& V; N! Q. F+ E# W<g id=right-arm>
% P1 p/ h7 G9 K* d: o<g>
- v( u2 ~  u) `$ }0 G6 k<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
* k" m/ u% |: E" f, Z( ^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 />
) w) V' v5 W" M! P<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
! z: T% u( i1 t/ _2 m& {c231,236,227.5,237.7,223.7,238.6z />
<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
- r4 b$ d4 m* n8 E! \( e1 ql204.4,244.5z />
, Q" l0 ?# }8 r; t1 h6 F" S* j</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
1 r+ ^, x5 ^1 x" V' F' s9 \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 />
) D4 a0 Y3 S" R: Q" z<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 />
% d5 d& E  q+ n/ E3 O( Q1 u# p; p<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 `2 M+ k1 g$ o7 u<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
7 ~; ~8 i6 E  z" l7 J. Mc8.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 />
</g>
, \/ x! n. h6 [% ?" L5 ]3 z! V5 n( p</g>
<g id=head>
<g id=sub-head>
4 n5 U) b9 ~' ^7 {2 ?9 {- U<g>
' E7 f9 O7 @  b<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
' u6 I; m% s+ R$ sc0-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
' ]6 a- Z1 O8 x  A0 h9 ?- nl46.4,23.2c4.5,2.2,11.8,2.2,16.3,0l288.6,197.1z />
2 c% I; I' r' v$ t3 a& 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 />
* C% _+ Z- ]8 P0 ~4 {9 @3 [<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 />
1 T5 O& G+ F" x: p3 F, x) p5 O& m1 }<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 />
<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
2 D& s9 `# n/ J/ i# \  {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 />
7 v# \* k' V# o" i2 {* z</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 />
9 B/ ]  M( O+ }! O+ Z8 b* L<line id=left-eyebrow fill=#4d4d4d stroke=#000000 stroke-width=1.8222 x1=272.4
y1=177.4 x2=288.4 y2=164.6 />
* `! x* s  K0 x* x3 ?7 J5 c<circle id=left-eye stroke=#000000 stroke-width=0.9111 cx=283.6 cy=176.5
r=3.8 />
, ~  ^$ I# e7 q<circle id=right-eye stroke=#000000 stroke-width=0.9111 cx=257.5 cy=186.9
( ~1 |1 ]+ r2 x1 xr=3.8 />
</g>
2 D, y) Q, f/ U! q6 P4 K* g; ?: n<g id=hair>
+ F% \( d% ^. q4 b<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  />
<polygon fill=#fe666d stroke=#000000 stroke-width=0.9111 points=227.5,102.7 201.1,67 221.1,60.1 247,94  />
<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
* N$ z: k  x- W) E223.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
185.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)
gradientunits=userspaceonuse>
<stop offset=0 style=stop-color: #231f20; stop-opacity: 0.3 />
<stop offset=1 style=stop-color: #231f20; stop-opacity: 0 />
1 w0 M! y2 u# l1 X</radialgradient>
<ellipse fill=url(#svgid_1_) cx=240 cy=271.3 rx=122.5 ry=31.1 />
</svg>
# k  z8 Z! p" r) Lcss3代码：
代码如下:
6 e( T4 K& G3 Rhtml {
-moz-box-sizing: border-box;
" U- i& U, h! c% d3 ~8 lbox-sizing: border-box;
}
*, *:before, *:after {
7 w' q/ o. U3 y5 ?4 \-moz-box-sizing: inherit;
box-sizing: inherit;
}</p> <p>html,body {
( Z) C) {: j- q! b5 iheight:100%;
margin: 0;
font: 40px/40px helvetica neue;
font-weight: 900;
7 E: o& u6 J% `& |1 w1 J8 Dcolor: rgba(255, 255, 255, 1);
. h$ b# D7 k6 W, {, [; Z" v9 {-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
}</p> <p>svg {
width: 100%;
height: 100%;
}</p> <p>#left-eye {
4 _2 c' J2 e5 r-webkit-transform-origin: 283px 176px;
-ms-transform-origin: 283px 176px;
4 e) N9 g! _; w. K" Itransform-origin: 283px 176px;
/*animation: pulse 2s linear infinite;*/
}
% [; h% Y$ n3 Q#head {
. B$ [3 t$ V  c+ J) L  o-webkit-transform-origin: 235px 173px;
- W. q9 i1 E5 g; f# P-ms-transform-origin: 235px 173px;
transform-origin: 235px 173px;
-webkit-animation: head 2s ease-in-out infinite;
' B7 \4 M3 u0 A2 |+ t, {animation: head 2s ease-in-out infinite;
% K8 g) P  C/ U( }6 ]1 n}</p> <p>#right-eyebrow, #left-eyebrow {
-webkit-animation: eyebrows 10s linear infinite;
8 P5 O3 z$ x! B$ h5 a0 W7 Z4 ianimation: eyebrows 10s linear infinite;
}</p> <p>#left-leg {
( o6 B7 }  h7 q5 O  f) w6 q% z: @8 ^-webkit-transform-origin: 253px 225px;
-ms-transform-origin: 253px 225px;
- S- n  s/ |) v4 X9 Mtransform-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;
transform-origin: 225px 235px;
, s5 k7 S. M+ o6 {, V/ d-webkit-animation: rightleg 2s ease-in-out infinite;
0 z, l2 T8 A" K: S/ xanimation: rightleg 2s ease-in-out infinite;
+ @9 `0 u- z) C9 a0 N}
#left-arm {
6 X9 W6 L& K' Q- F. D0 C7 J- ]-webkit-transform-origin: 263px 186px;
( \$ L# _+ _0 h) f4 |* u& T  T-ms-transform-origin: 263px 186px;
& O* o" P1 U' U: mtransform-origin: 263px 186px;
-webkit-animation: leftarm 2s ease-in-out infinite;
animation: leftarm 2s ease-in-out infinite;
  p5 f# q. I9 l, z% l8 P/ x}</p> <p>#right-arm {
-webkit-transform-origin: 209px 214px;
" y1 X5 O, B1 S( M1 `' R-ms-transform-origin: 209px 214px;
transform-origin: 209px 214px;
-webkit-animation: rightarm 2s ease-in-out infinite;
animation: rightarm 2s ease-in-out infinite;
' W/ M+ N8 X7 a9 y4 `}
/ b, f; U0 [4 R#hair {
-webkit-filter: hue-rotate(45deg);
' w: G7 \* O% `. Kfilter: hue-rotate(45deg); /* izza not workingz! */
}</p> <p>
- n. Z) D) H  P- k, I. c@-webkit-keyframes leftleg {
2 ^6 ~, m! R' S3 w0%{
-webkit-transform: rotate(0deg);
8 |+ k* s3 x7 t, l) C/ Rtransform: rotate(0deg);
$ Y4 ?1 Q' v$ R/ N4 M% B}
5 |* F+ }/ S. j8 J" i1 d50%{
, R9 F. |8 c+ A3 S( B-webkit-transform: rotate(55deg);
/ s6 d( ~' Z, |transform: rotate(55deg);
8 K- P, q6 ~  U" T}
100%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
/ B7 g" w  U( _4 K  n}
) {, o8 }: d0 m9 T3 {) g& P. c}</p> <p>
& p6 u2 p6 I% {; U@keyframes leftleg {
2 U8 N. m$ e* j( {0%{
* [/ s( f- s8 q& H-webkit-transform: rotate(0deg);
transform: rotate(0deg);
& |; E9 W; d# z* A- r}
50%{
-webkit-transform: rotate(55deg);
. c$ F7 {8 M5 K2 Ktransform: rotate(55deg);
  x, J  T" l" b}
100%{
- F# q5 h8 S) Y  ^-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
. G8 n3 F9 l8 M3 j' i; d}</p> <p>@-webkit-keyframes rightleg {
" r6 |/ `3 D/ X' ?0%{
; W7 X' I4 r' G+ W" q0 H2 M: F$ T-webkit-transform: rotate(25deg);
3 N) i( O0 E- f: _6 Xtransform: rotate(25deg);
}
50%{
-webkit-transform: rotate(-40deg);
transform: rotate(-40deg);
}
100%{
-webkit-transform: rotate(25deg);
+ X, e5 _0 [; D! J1 xtransform: rotate(25deg);
}
}</p> <p>@keyframes rightleg {
" B  ]" e3 X8 Y1 ]" d, `& s0%{
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
}
50%{
-webkit-transform: rotate(-40deg);
transform: rotate(-40deg);
}
( Z9 \0 O0 L- R9 D2 j100%{
-webkit-transform: rotate(25deg);
" b5 M$ [: S2 A, ytransform: rotate(25deg);
}
}</p> <p>@-webkit-keyframes rightarm {
0%{
; D' I4 I$ b5 C3 {-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50%{
" U4 m  R" P- F3 |  g-webkit-transform: rotate(40deg);
transform: rotate(40deg);
/ w" {$ h% n2 O, E, D; T4 l}
* \3 z; }" n& l0 S; Y5 q5 [  a7 h100%{
-webkit-transform: rotate(0deg);
3 S9 I8 A, y1 v  Q/ Z$ W0 C" {/ ~! gtransform: rotate(0deg);
4 A" [4 q- ~, f& Y) a9 U# l}
: Y: x9 ?6 n6 Z}</p> <p>@keyframes rightarm {
' t2 ]: ]2 L; _! F0%{
9 i  E4 X- t1 k' s9 t( `6 w-webkit-transform: rotate(0deg);
& s: C* a' ]; k7 B. U7 Dtransform: rotate(0deg);
; ?2 l1 A  |3 H; E' ?4 Q}
" g$ f/ R4 f" \+ W; g& _- S/ H50%{
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
}
100%{
0 Y7 e6 O+ F8 e& U4 s3 R. d-webkit-transform: rotate(0deg);
; o1 {2 a3 ?! a* Utransform: rotate(0deg);
}
}</p> <p>@-webkit-keyframes leftarm {
6 `- L; x8 _- x" y0%{
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
( u! m( W) T0 J$ ^9 @+ t* G5 d! d0 a8 `2 V}
50%{
" h" ^; g% |' s1 n0 g' |- W-webkit-transform: rotate(0deg);
$ k# o; M, ?  G% b8 K/ ktransform: rotate(0deg);
}
100%{
# _9 w8 C6 H# Q8 M-webkit-transform: rotate(50deg);
0 I' y5 H3 U0 j+ y; \: V( ttransform: rotate(50deg);
}
2 d( [% S) C4 ~! I( M/ I2 W}</p> <p>@keyframes leftarm {
( Z, D8 `7 J! {0 ^: E0%{
-webkit-transform: rotate(50deg);
5 v1 P. t  `* E4 P9 Y3 ~transform: rotate(50deg);
}
50%{
-webkit-transform: rotate(0deg);
! I6 O( T5 |- i& ctransform: rotate(0deg);
* a4 d3 G3 F3 R6 D7 I}
100%{
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
, c/ |, e! z5 }2 O+ e- B}
9 Z" `) I- v9 s: p5 k  X}</p> <p>@-webkit-keyframes head {
0%{
8 X0 p# L! U, ]# Q-webkit-transform: rotate(0deg);
) N# \8 Y! O5 c- @' Utransform: rotate(0deg);
. k! U3 h) T' |" |0 P& {}
50%{
1 f' O; D( e( @1 u2 M-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
. @/ n5 R! H6 S% {$ i}
100%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
* I; Q* R/ U: g, y}
# g8 N' t; E- b7 g$ c' R9 ?}</p> <p>@keyframes head {
9 M& |! F% R1 X1 G  ]& `5 n# x0%{
-webkit-transform: rotate(0deg);
9 L7 M- _/ v$ k/ Atransform: rotate(0deg);
- A  x8 ~& P/ z+ j6 @. ]}
50%{
, F- K1 O2 V9 U& {4 w-webkit-transform: rotate(-5deg);
6 I' F2 P: I0 N6 T+ P' [transform: rotate(-5deg);
( K, T# X6 }* L1 F$ ^, _% {! g6 {}
6 ^1 D1 _  \  t  a7 Q. T+ z- \" A) d100%{
9 A+ `- ?7 |6 p! }" v% l$ x-webkit-transform: rotate(0deg);
0 a0 O9 X4 u+ N0 C7 \/ ?% M  R, H9 wtransform: rotate(0deg);
}
}</p> <p>
@-webkit-keyframes pulse {
3 f' Y* I9 n$ N- [0%{
( h% @. L+ }  I2 F" d2 H/ s+ R0 a-webkit-transform: scale(1);
) ?  g' m6 m0 M/ otransform: scale(1);
9 g1 W6 V0 X: l2 j' [. s2 m4 e}
50%{
-webkit-transform: scale(1.1);
  V, V9 t9 S- D0 y9 Xtransform: scale(1.1);
}
0 A# S% {& ?! O. ~8 k100%{
-webkit-transform: scale(1);
transform: scale(1);
, b# d, A' P. A& Y# t7 T- l8 e& ^}
# \3 E! Q4 ?" o' n3 Z}</p> <p>
7 E; W) _% T6 ?2 y! |4 E@keyframes pulse {
" F. j$ I2 k) N7 B% b2 i0%{
8 w; w0 C, r2 h-webkit-transform: scale(1);
, ?+ M1 @- E( ktransform: scale(1);
}
$ i2 i% B9 _3 _2 P50%{
/ X& c; p: f8 R! w5 t. N: `' u8 G" U-webkit-transform: scale(1.1);
transform: scale(1.1);
}
100%{
2 i9 j/ t- h& l6 [-webkit-transform: scale(1);
1 k1 O- p( S# d9 vtransform: scale(1);
% Y8 e% Q1 ^! q  v+ d: B}
}</p> <p>@-webkit-keyframes eyebrows {
0%{
! Z, A  q* R9 J/ z}
98%{
-webkit-transform: translate(0, 0px);
; n) |! Z$ E, Q# n9 dtransform: translate(0, 0px);
}
# n. \0 c- B7 C8 ?+ k5 L# I99%{
1 ~; f9 S2 ^4 R3 N0 m-webkit-transform: translate(0, -5px);
transform: translate(0, -5px);
}
3 j( @" R" i0 ?* R" O9 R) c3 _" X100%{
3 V- Z. b; ]  V" J( i- R-webkit-transform: translate(0, 0px);
& P. @5 L' F! G' w7 ~. m0 r- o7 i0 Ytransform: translate(0, 0px);
}
& i; |0 g4 s9 Y, ?* l}</p> <p>@keyframes eyebrows {
, L  m% w1 M' W' V% l0%{
* d5 _+ v; z2 L7 q}
98%{
-webkit-transform: translate(0, 0px);
transform: translate(0, 0px);
}
99%{
- @$ v/ r! n* K' Y/ A; ^  m-webkit-transform: translate(0, -5px);
transform: translate(0, -5px);
}
+ o# ~& U; t' M# `6 `% t100%{
-webkit-transform: translate(0, 0px);
transform: translate(0, 0px);
}
6 F) a) s( \% v" v, j, ]2 r$ e& z}
9 h0 f: @) R9 [( X2 q3 J! `
更多网页制作信息请查看： 网页制作

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

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

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

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

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

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

哈哈 ok ~~~

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

…没我说话的余地…飘走

不错的东西 持续关注