html5 css3实例教程

之前介绍了好多款html5和css3实现的动画，今天要给大家带来一款html5和css3实现的小机器人走路动画。该实例的人物用html5绘画的，动画效果是html5和css3实现的。一起看下效果图。
) f. a5 ^7 H, |( F# s4 T2 L* W实现的代码。
html代码：
代码如下:
<svg version=1.1 id=layer_1 xmlns= xmlns:xlink=
- W" o$ j" d( p5 ]" X0 J( ~8 Q" j7 R# g, Jx=0px y=0px viewbox=0 0 458 337 enable-background=new 0 0 458 337 xml:space=preserve>
5 [4 M" B8 h3 M8 Q- }8 U<g id=left-arm>
1 f7 X8 y0 Y- a<g>
, A/ {, k0 g$ ?& s<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
; _7 z; x6 t6 ~' Nc1.2-2.2,1-5.7-0.4-7.7l-5.2-7.5c285.8,208.8,274.7,214.1,264,216.2z />
/ U3 U* b4 a- t* q" R4 g<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 />
5 Q1 o* a- h$ {6 [7 a' ^</g>
1 i4 S+ ]) g7 m' g1 v* \<g>
/ ?& q1 u% E9 N/ F4 y% h* p<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
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 />
# ]7 k3 ?% z) n9 g4 S0 @' 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 />
+ [( D9 s9 p+ G: Q) y9 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
! H5 {8 C. h1 P2 g" e( q5 h: i6 w1 [) Ic-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 />
1 P* O2 U5 {, T</g>
</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
3 W# r3 E- s9 x' j" B! A2 `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
& r7 D- [; N$ H4 ~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 />
6 @7 b9 s9 c& z/ Q5 O2 c- U$ X6 ~<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 />
8 Q! Q0 N3 s$ |<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 />
$ p1 C0 i4 _! L+ D+ c( T/ ^<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
! X8 }/ g' L$ p& P# e" u* Bc-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
8 b$ b1 i2 h9 a6 \  Qc-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 />
0 f; l: v  T+ w8 I( U( |</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
7 V: J7 ]# c1 X- ~5 e! Xc-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 />
$ _/ X- Z, }; @: {: `5 A<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
* B/ ]7 C* O, g+ ?1 F- _1 H/ w( |0 Yl-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
5 i/ l3 u+ p. l$ q6 |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 />
. G3 r6 L8 J/ v( D</g>
  H' d  q9 @5 z9 |1 `<g id=torso>
3 k3 C1 G4 B5 j. g- |1 f0 Y<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
# k- }' q: Y+ Uc0-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 />
5 e+ z8 w6 @$ \& {! x1 `$ |<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 />
9 {4 p7 R' ^& L& i. N/ ]) K<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 />
  }+ {4 Y0 s" `5 ?' a; Q4 G<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
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 />
1 e) f) v( F# M4 M& M0 s</g>
<g id=right-arm>
. y! a; u2 H" j1 d$ H, K<g>
) o8 M/ z4 J  y; R7 m) j<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
1 b2 R: f/ D8 f. H0 yc231,236,227.5,237.7,223.7,238.6z />
. I; Y; H/ L, b( Q<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
! {8 U5 B& Y- F' y+ K' w- V, ]7 {l204.4,244.5z />
</g>
<g>
2 N- _5 {' L) v+ P1 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
/ F+ r- |- n' e$ r& rc-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 />
<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 />
. I8 ~5 c2 U4 E1 t( k/ L  ^<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
7 }! J2 Y& v6 |0 ec227.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
& N% o( }0 {  c& S* d$ b' Z# L6 Vc8.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>
3 [& N1 z- L6 ?' D! a; ~</g>
<g id=head>
<g id=sub-head>
, F) l/ i$ [- W- Q4 r- X7 K' a! m<g>
1 ^0 ?" G9 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
& @! c! f4 q/ n8 r+ hc0-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
* K- j4 R/ q8 s( bl46.4,23.2c4.5,2.2,11.8,2.2,16.3,0l288.6,197.1z />
<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 />
8 Q* x! F: @0 u2 b+ P<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
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>
, k) x( @, p1 }* K2 T<line id=right-eyebrow fill=#4d4d4d stroke=#000000 stroke-width=1.8222 x1=243.3
$ l9 E# ]' |3 F# F4 d- v/ ly1=180.6 x2=266.4 y2=181.7 />
1 g" h, x3 O3 B* D, X8 H* d<line id=left-eyebrow fill=#4d4d4d stroke=#000000 stroke-width=1.8222 x1=272.4
+ H9 g: E0 @) a% ^& O0 F( v" d3 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
r=3.8 />
</g>
<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  />
<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  />
8 i& |& o  n7 ?5 L  u<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  />
% G8 v& Q9 U) Z. Z8 k<polygon fill=#fe000c points=257,143.2 244.4,84.3 264.4,75.9 275.9,132.3  />
) F( s' R" K4 |. R0 M<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
185.6,93.4 185.6,93.4  />
</g>
</g>
$ g- }6 g1 a  z) N1 m& V<radialgradient id=svgid_1_ cx=239.975 cy=271.2543 r=122.4974 gradienttransform=matrix(1 0 0 0.2541 0 202.3306)
& M$ _: r* L1 k  P* S: A% hgradientunits=userspaceonuse>
, N, t: K- z  r" V2 R<stop offset=0 style=stop-color: #231f20; stop-opacity: 0.3 />
% S( Z4 s; O$ I7 c" |$ s4 z<stop offset=1 style=stop-color: #231f20; stop-opacity: 0 />
$ ?" N* D6 W; C3 e7 c2 W/ S</radialgradient>
<ellipse fill=url(#svgid_1_) cx=240 cy=271.3 rx=122.5 ry=31.1 />
</svg>
css3代码：
代码如下:
html {
-moz-box-sizing: border-box;
- Q4 Y8 b0 S  ^/ i) `% obox-sizing: border-box;
}
5 _/ L: M8 e8 A, L$ J*, *:before, *:after {
# J9 r$ P3 ~, i: `-moz-box-sizing: inherit;
box-sizing: inherit;
9 P! x( s8 j: q& s* d/ K}</p> <p>html,body {
height:100%;
margin: 0;
font: 40px/40px helvetica neue;
font-weight: 900;
3 k1 W& Q( m* R7 Jcolor: rgba(255, 255, 255, 1);
-webkit-font-smoothing: antialiased;
. }: n: w1 |. u- s1 v  }$ sfont-smoothing: antialiased;
}</p> <p>svg {
) W: j* _* n5 @) T- Ywidth: 100%;
# W5 w+ s8 D  y  j& b2 ^3 U( J, Aheight: 100%;
. [1 v$ c9 k9 w" `* g( d}</p> <p>#left-eye {
-webkit-transform-origin: 283px 176px;
6 d  q  |# e4 f! g* w4 ~-ms-transform-origin: 283px 176px;
7 H) i3 b& i% w/ p2 ?; U; |transform-origin: 283px 176px;
/*animation: pulse 2s linear infinite;*/
}
#head {
5 a0 j; q: ~7 p  g* R# Q2 ?-webkit-transform-origin: 235px 173px;
-ms-transform-origin: 235px 173px;
transform-origin: 235px 173px;
-webkit-animation: head 2s ease-in-out infinite;
animation: head 2s ease-in-out infinite;
}</p> <p>#right-eyebrow, #left-eyebrow {
-webkit-animation: eyebrows 10s linear infinite;
animation: eyebrows 10s linear infinite;
9 B2 [0 v$ F" B8 W3 ]* z}</p> <p>#left-leg {
-webkit-transform-origin: 253px 225px;
+ Q% V9 h6 ]/ a/ [-ms-transform-origin: 253px 225px;
# e* N* J0 a$ x9 d! W6 y1 Etransform-origin: 253px 225px;
-webkit-animation: leftleg 2s ease-in-out infinite;
9 p0 Y2 s' c6 F7 ?, w: y: @, eanimation: leftleg 2s ease-in-out infinite;
}</p> <p>#right-leg {
. S! U0 v: j7 d4 H-webkit-transform-origin: 225px 235px;
-ms-transform-origin: 225px 235px;
! J1 _0 J2 e0 Z  v! E- ltransform-origin: 225px 235px;
' @7 ?1 m, {) V, L. E4 u; A-webkit-animation: rightleg 2s ease-in-out infinite;
animation: rightleg 2s ease-in-out infinite;
}
' N; O3 p( }/ ^2 U#left-arm {
/ K2 J/ C) ~7 U0 r  r-webkit-transform-origin: 263px 186px;
! W( o2 C4 d; _2 E8 ^: q7 J7 F-ms-transform-origin: 263px 186px;
. y+ [: u; M% R$ ?( `9 ftransform-origin: 263px 186px;
8 k" S% H8 ^2 T1 c9 l-webkit-animation: leftarm 2s ease-in-out infinite;
; _; s- a, x* K2 T7 _' Danimation: leftarm 2s ease-in-out infinite;
}</p> <p>#right-arm {
0 @  i' V7 S9 N8 f" ^  L& Q: j-webkit-transform-origin: 209px 214px;
/ n! D: a( H( a' R& K-ms-transform-origin: 209px 214px;
# h" y1 F1 K# i  rtransform-origin: 209px 214px;
- u" I! v+ f9 q7 |) x8 H-webkit-animation: rightarm 2s ease-in-out infinite;
animation: rightarm 2s ease-in-out infinite;
}
#hair {
1 v- O; t- z. w% ^: U-webkit-filter: hue-rotate(45deg);
filter: hue-rotate(45deg); /* izza not workingz! */
}</p> <p>
$ J8 S4 [: w1 z' V- s@-webkit-keyframes leftleg {
! Y8 X6 ^$ ]: ]4 Z0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
" p% G% ]' ^* T% _8 j}
50%{
-webkit-transform: rotate(55deg);
2 U& k6 ?3 p% i; m2 S8 C' Rtransform: rotate(55deg);
}
0 R0 S: N% a8 p$ y- [, B' l+ Y% Q100%{
1 Q5 q* I3 y0 L& [8 b5 g-webkit-transform: rotate(0deg);
2 O6 w/ u$ O- {+ [3 }9 Ktransform: rotate(0deg);
+ E  k& Y0 g) z- i, K; z}
}</p> <p>
' m" i; {- k. z" P& W  ?@keyframes leftleg {
, [# D; ^4 o7 l6 X0%{
& C' l6 F0 G3 y# g, R4 j, O: c-webkit-transform: rotate(0deg);
6 l) n# h2 _5 `transform: rotate(0deg);
2 }( g3 p0 M8 Z% [: D}
50%{
-webkit-transform: rotate(55deg);
transform: rotate(55deg);
}
100%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
3 o; v5 t! _+ o' S+ ?1 A& i}
' K0 E: B4 C3 A8 ~' e; W( v}</p> <p>@-webkit-keyframes rightleg {
0%{
-webkit-transform: rotate(25deg);
: x) {8 P& f  ~* X! ltransform: rotate(25deg);
5 e1 B( `( j3 ^( O$ Y}
50%{
, W: [9 _/ @* F: q: u-webkit-transform: rotate(-40deg);
/ i4 V& s% J7 u# [# s8 Q( d* I& ltransform: rotate(-40deg);
! l, _6 ], e* E+ s; M$ C/ A}
6 M! B5 C- p9 a. U" M( n2 h7 t100%{
-webkit-transform: rotate(25deg);
- l# R. a% n& }( S9 h2 X& g+ \transform: rotate(25deg);
0 W5 `9 e6 r! s9 `  A9 s}
" l' X# h. H2 v}</p> <p>@keyframes rightleg {
. n( }; e6 M( |" ~1 L0%{
-webkit-transform: rotate(25deg);
4 b, B# p  p+ F) N! Stransform: rotate(25deg);
}
50%{
2 H/ A# c. K& T* Q' v4 i7 e. W7 ?-webkit-transform: rotate(-40deg);
transform: rotate(-40deg);
}
0 Q2 e9 o$ ?! _100%{
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
}
}</p> <p>@-webkit-keyframes rightarm {
- |! A$ Q/ J' G/ ?  ?8 ^' C0%{
& L7 X& H& K! }3 C3 U/ K! ~-webkit-transform: rotate(0deg);
$ c- H7 x% I  m4 y9 mtransform: rotate(0deg);
7 A$ x; ?# B7 T- ~; r}
50%{
: s% }2 }6 Y% o: r/ T$ V& k  z9 q) d-webkit-transform: rotate(40deg);
6 T% s0 p+ v4 a# x  W( x1 {transform: rotate(40deg);
. ~! P% a: Q6 M% O}
/ Z6 m+ }/ z  w5 M) N; u100%{
9 p5 z2 o9 i" y7 M) [4 |-webkit-transform: rotate(0deg);
# @; k4 |6 q/ h. ttransform: rotate(0deg);
' B8 V9 ~( q. z3 T% R* D3 [8 y}
}</p> <p>@keyframes rightarm {
0%{
6 Y6 c/ u4 ?* m' A-webkit-transform: rotate(0deg);
% k! ]' ]; A6 v* M/ t4 ^2 F, H# ~+ G8 Qtransform: rotate(0deg);
}
4 ?, W* R0 e% ^. \4 P3 ?' C; b50%{
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
$ P: }8 p) i% T}
- D# F+ J; y' a0 I& z8 t/ m100%{
-webkit-transform: rotate(0deg);
2 m% r  G7 N0 b  a9 |" Y2 ztransform: rotate(0deg);
8 h  D. A: n. \0 A}
5 Q6 e& t6 d6 D}</p> <p>@-webkit-keyframes leftarm {
* S5 y9 y: H4 H) o0%{
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
& W7 X+ J# r( o/ t}
6 H3 U. ~6 M5 f( y* R+ p" b) G) \2 q, h$ O50%{
-webkit-transform: rotate(0deg);
7 \% m/ v3 b' Y  N5 Qtransform: rotate(0deg);
}
100%{
( _: o  P8 N9 @* _-webkit-transform: rotate(50deg);
transform: rotate(50deg);
}
}</p> <p>@keyframes leftarm {
0%{
* {7 @5 |% c( n7 d! m* `* o-webkit-transform: rotate(50deg);
transform: rotate(50deg);
}
50%{
" s1 X& x- P0 ~3 v6 N" t% z-webkit-transform: rotate(0deg);
transform: rotate(0deg);
+ q( K7 O# ~6 t  N) O. h}
! B* P. i2 P+ q6 D/ F8 s6 v100%{
3 T" V1 j$ J. g4 h: \-webkit-transform: rotate(50deg);
+ ?0 W0 K$ n5 m0 itransform: rotate(50deg);
* O, O/ d' P7 U" p7 L}
}</p> <p>@-webkit-keyframes head {
" k# [0 L4 J$ K9 q0%{
8 K% ?; T% N# H/ Y1 I-webkit-transform: rotate(0deg);
transform: rotate(0deg);
% K" Z' ~* g1 ^& y1 _}
50%{
) [* l+ r3 }0 Q% @9 L' X7 O" c-webkit-transform: rotate(-5deg);
6 Z' x+ y# w" H( _$ stransform: rotate(-5deg);
}
100%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
+ {+ E8 F  U3 m: ]. _}
}</p> <p>@keyframes head {
) _$ c! R* ?- s% q0%{
-webkit-transform: rotate(0deg);
8 L6 n2 X- {/ R4 d- R, S$ jtransform: rotate(0deg);
}
* V* B. W. p2 Q9 d- P* l* n50%{
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
* P9 `# n9 X) I}
! C! T) D: H0 F9 Q" d# d100%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}</p> <p>
3 B+ v( i. q1 b9 z8 ?* u@-webkit-keyframes pulse {
0%{
-webkit-transform: scale(1);
8 ]* d% `) y( o/ Z1 ytransform: scale(1);
}
50%{
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
' p) j6 r) O, P100%{
-webkit-transform: scale(1);
' L8 {9 V9 H. `transform: scale(1);
' q, J  `! k8 R5 S6 f}
3 {7 v! }- y3 a9 c# T}</p> <p>
$ K6 e* _# B# _) F  T@keyframes pulse {
( M7 v: \2 \7 S# r0%{
$ j" L  ~  @6 s8 E( o6 a: N-webkit-transform: scale(1);
transform: scale(1);
}
+ ^. g, l$ L" }% J* W50%{
-webkit-transform: scale(1.1);
transform: scale(1.1);
3 I, Z" b6 i. g+ [2 m. u  Q# m* X+ L}
100%{
-webkit-transform: scale(1);
transform: scale(1);
}
# R$ C1 ?) \, X8 V}</p> <p>@-webkit-keyframes eyebrows {
8 K- e  G9 ^9 A6 l6 v( s* s0%{
}
9 m6 n0 T* X1 b7 ^! U. F98%{
-webkit-transform: translate(0, 0px);
/ q" R& b% {; j8 Z3 v7 I4 A7 utransform: translate(0, 0px);
7 I" A& W  K( e& H4 E- m6 ?}
& x* Z% l+ Z" H0 B99%{
-webkit-transform: translate(0, -5px);
0 a4 d! _- w9 h0 c0 R" @3 ]4 ktransform: translate(0, -5px);
}
' w( [: |! F, R9 }* q- p( O. [100%{
-webkit-transform: translate(0, 0px);
transform: translate(0, 0px);
. d* s$ l% I% X; d( \5 E0 d9 u}
}</p> <p>@keyframes eyebrows {
0%{
}
" ?5 D$ ]; {; @4 R98%{
-webkit-transform: translate(0, 0px);
transform: translate(0, 0px);
}
99%{
-webkit-transform: translate(0, -5px);
transform: translate(0, -5px);
8 V. x9 S7 D3 o9 L6 k  }6 |0 P}
' ^% F# d6 Y; E( g100%{
-webkit-transform: translate(0, 0px);
0 ^6 O+ {0 a$ T5 B7 p0 Dtransform: translate(0, 0px);
. E; ?( |2 a1 ^5 g$ B. q}
}
+ h; R- l; L% Z% w
更多网页制作信息请查看： 网页制作

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

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

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

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

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

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

哈哈 ok ~~~

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

…没我说话的余地…飘走

不错的东西 持续关注