html5 css3实例教程

之前介绍了好多款html5和css3实现的动画，今天要给大家带来一款html5和css3实现的小机器人走路动画。该实例的人物用html5绘画的，动画效果是html5和css3实现的。一起看下效果图。
实现的代码。
html代码：
: Z/ a# N! n  A1 i. n, Q% J1 D- [代码如下:
<svg version=1.1 id=layer_1 xmlns= xmlns:xlink=
/ w6 h8 v5 Q5 p( b, ?# I, {x=0px y=0px viewbox=0 0 458 337 enable-background=new 0 0 458 337 xml:space=preserve>
9 E7 h+ N) r7 K4 s1 {0 e<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
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 />
# o0 N7 e; |" w8 a) ?3 s<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 />
! ^2 R  t& _. ?8 O- i7 Y. _2 \</g>
. x/ v/ L  e( k7 ?8 {<g>
; V1 a- }5 p4 S! ~1 Q# n& J) Y<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 />
<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
& T1 L# C7 `' t! A4 [7 Vl287.8,189.9z />
0 Y- H$ P7 H0 D<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 />
7 l: o7 W% u! e</g>
; Q9 m0 h5 g1 D: g' k  d) V! C+ @7 t( }</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
( I+ s2 a$ @7 }7 B* D% o, ?3 yc-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
( f! C  C* G8 @7 c0 G% f% Z5 V  ac1.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 />
2 c' g! y  j. D<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 />
% Q$ K9 m7 e; F- y6 t4 y. u<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
2 C' U, ~6 W/ }% A1 P+ s# k4 yc-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 />
4 b3 S( _9 M, A9 @) ]1 W<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
4 N) l4 [, I3 f8 B$ Ic-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 />
9 d; l5 B, ^! j3 e</g>
0 S. s7 y( a7 s3 A( O<g id=right-leg>
6 n$ I5 _  Q! a: w( h/ R<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
: C5 q2 H; O3 l5 Fc0.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
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 />
! z0 q1 A) o+ M- U<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 />
* q, G+ S0 x% e" Y: G$ v% @  a7 O<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
: D+ z+ J. V& `% U9 e% ul-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
8 j7 ^" S' @; t$ L, [  e3 r  [, T# ~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 />
( h- `% T: K4 U: d</g>
<g id=torso>
* L9 j6 z7 }. e<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 X$ J& N  a. S. rc0-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
3 C7 V; G5 G- o/ Dl23.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
c2.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 />
3 O3 j) ]8 A) k2 t# b8 \2 |<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 />
# q6 R3 H; j; i7 K</g>
6 Q& g# X( q$ \1 b; B0 c<g id=right-arm>
, {7 c0 B) G7 L9 t<g>
<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 />
4 {0 B& U# V: @/ E( P! [* m<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
" b8 y2 l; @/ X! a% O* Ic231,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
0 D3 d6 F3 B/ c7 x/ y9 x; Pl204.4,244.5z />
</g>
/ n- g4 O2 ?4 Q. M8 _. h: L2 e1 S<g>
' u2 f8 [" A) E& {  T<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 />
<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 />
<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
- x0 V' L7 r7 nc8.2,1.7,16.8,3.8,24.4,2.1l-1.1-1.8l214.5,205.7z />
5 B% n* [7 h) ]6 A/ ^<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
' ]8 Z0 K# J" I  A8 y) \8 Cc-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>
</g>
<g id=head>
<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
* _2 R& `) _6 h8 u) e# Dc0-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
* X! M9 a( ~$ ~; y& s  h0 Yl46.4,23.2c4.5,2.2,11.8,2.2,16.3,0l288.6,197.1z />
2 g/ `8 |3 r+ n; q. b<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
1 @+ g; j# a3 z7 P9 q! `* sl46.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
% L1 O3 C0 v( v! u0 tl-46.4-23.2c-4.5-2.2-8.1,0-8.1,5v183.9z />
' ?7 e3 l2 @- X<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
3 O3 f2 o, X. zc-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 />
4 ?4 i- I- l/ q. g</g>
7 A3 K( {! X  J. c" B+ g1 T& z<line id=right-eyebrow fill=#4d4d4d stroke=#000000 stroke-width=1.8222 x1=243.3
% Y0 V. o# T2 g. Ry1=180.6 x2=266.4 y2=181.7 />
9 T" D% e6 ?, l$ I<line id=left-eyebrow fill=#4d4d4d stroke=#000000 stroke-width=1.8222 x1=272.4
& v* f! l0 K0 xy1=177.4 x2=288.4 y2=164.6 />
9 K9 E- |+ Q7 {2 g, F3 o, P! G6 Q<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
! A' f; G6 j. \* h$ K  Vr=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  />
" v3 Q, W8 c9 u. I/ J* Y+ C<polygon fill=#fe666d stroke=#000000 stroke-width=0.9111 points=227.5,102.7 201.1,67 221.1,60.1 247,94  />
0 e1 k' g! w5 s1 _) T. i# H4 l<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
9 ?, _3 T- t, R) S223.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
# a' i  e; f# G185.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)
! q8 u7 C0 K4 k2 n& ~gradientunits=userspaceonuse>
<stop offset=0 style=stop-color: #231f20; stop-opacity: 0.3 />
! j0 U" @, P" y  }2 K7 }5 e( @<stop offset=1 style=stop-color: #231f20; stop-opacity: 0 />
; X9 W) a. l) }$ a# ~2 l- k% m7 D</radialgradient>
<ellipse fill=url(#svgid_1_) cx=240 cy=271.3 rx=122.5 ry=31.1 />
</svg>
css3代码：
代码如下:
1 _5 g$ R6 X% ohtml {
4 E- q1 q. t. \-moz-box-sizing: border-box;
3 m( e) d2 {" z; h) z# `# pbox-sizing: border-box;
7 K' k9 h7 r0 q. k6 T}
*, *:before, *:after {
-moz-box-sizing: inherit;
box-sizing: inherit;
$ g: k, i/ ]8 h1 q; r. x}</p> <p>html,body {
+ S5 n9 `" J: n7 \+ bheight:100%;
margin: 0;
font: 40px/40px helvetica neue;
: m. ]% \+ c6 G) D, H, N  }font-weight: 900;
color: rgba(255, 255, 255, 1);
# R# V3 |9 D2 l, _! N8 P/ U3 Y4 X-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
}</p> <p>svg {
* v" B; v7 I2 ~3 j- k$ W# Ywidth: 100%;
$ D3 E9 Q! H) sheight: 100%;
% B6 b' C4 z6 L- L6 V}</p> <p>#left-eye {
-webkit-transform-origin: 283px 176px;
-ms-transform-origin: 283px 176px;
transform-origin: 283px 176px;
/ B3 y  {' k4 W8 C' g/*animation: pulse 2s linear infinite;*/
}
# w( g0 _2 E" ]6 R" P+ I#head {
-webkit-transform-origin: 235px 173px;
-ms-transform-origin: 235px 173px;
transform-origin: 235px 173px;
  _/ g3 l! l3 b) o2 J5 Y-webkit-animation: head 2s ease-in-out infinite;
' R% G. W) h9 u* H# Hanimation: head 2s ease-in-out infinite;
/ W: |" d( j, u* j9 p* J5 U}</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;
6 S% R! O# q! k0 @-ms-transform-origin: 253px 225px;
transform-origin: 253px 225px;
-webkit-animation: leftleg 2s ease-in-out infinite;
animation: leftleg 2s ease-in-out infinite;
. [3 G  h$ Q; _2 e}</p> <p>#right-leg {
& z) s- v' e) r; a-webkit-transform-origin: 225px 235px;
8 K, {. M% d5 A/ [+ o-ms-transform-origin: 225px 235px;
transform-origin: 225px 235px;
-webkit-animation: rightleg 2s ease-in-out infinite;
* \7 D" @) Z( ?* p* ?# [/ Fanimation: rightleg 2s ease-in-out infinite;
3 A1 O5 l5 _0 ]' i+ L- [6 M1 c' Q}
#left-arm {
! |& `  r4 j& X# k) k7 }$ h* x-webkit-transform-origin: 263px 186px;
-ms-transform-origin: 263px 186px;
) s) ?* S; S8 C+ r0 Otransform-origin: 263px 186px;
; L3 [6 W$ Z0 Y* y9 t& ^-webkit-animation: leftarm 2s ease-in-out infinite;
1 O# H2 [$ _! R  \/ M) ]animation: leftarm 2s ease-in-out infinite;
}</p> <p>#right-arm {
! s# q6 t0 ?. ^0 J, c1 s  d) _. i-webkit-transform-origin: 209px 214px;
3 s6 w, h& N* [3 K6 z- a7 k-ms-transform-origin: 209px 214px;
2 \" D2 C" t9 @transform-origin: 209px 214px;
) L) b. R1 g3 K- @0 Q' A& q  U-webkit-animation: rightarm 2s ease-in-out infinite;
, x& j8 t! t- Z9 e5 d5 H9 Lanimation: rightarm 2s ease-in-out infinite;
; o2 }8 q: f6 @& }1 q}
#hair {
6 Z* s3 x: N' W+ M/ F-webkit-filter: hue-rotate(45deg);
filter: hue-rotate(45deg); /* izza not workingz! */
}</p> <p>
2 f! T# \: l- N/ R! }( N& g@-webkit-keyframes leftleg {
; F* M  b9 a# D3 K$ [7 ?2 L0%{
1 h- A5 M0 X5 p2 N% A* k-webkit-transform: rotate(0deg);
transform: rotate(0deg);
) @8 f  i! _& s: r}
  j- O8 i* U3 B! v  r0 v50%{
; c4 @+ |/ r# s8 K. L6 l5 {-webkit-transform: rotate(55deg);
transform: rotate(55deg);
}
# f( h% j* K; ?) ^( |* }100%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
' b9 _( n2 _( h$ f}</p> <p>
@keyframes leftleg {
9 K; R. u! p: l3 N  T0%{
) J/ m# m: T% N2 ~- q4 _7 D-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50%{
-webkit-transform: rotate(55deg);
transform: rotate(55deg);
( g( [" i( ]; s! D8 k) Z6 T}
2 Z' m) H4 [' g" S100%{
7 ?3 V/ C, P  }+ @% B$ v9 M' R5 g-webkit-transform: rotate(0deg);
1 h! [, ^2 F8 ?7 C. t, ~. @transform: rotate(0deg);
2 g' H2 ?7 ?; g. @% P$ P}
) e6 H8 ]! S" B& P+ g; P}</p> <p>@-webkit-keyframes rightleg {
# M: c4 C3 e; ~0%{
5 I7 ~5 D0 f; t7 h+ X1 I-webkit-transform: rotate(25deg);
transform: rotate(25deg);
. E3 |" W1 |2 H* T& E8 r  Y}
. z1 ?. B/ ?5 {2 ]' S3 ?6 _50%{
-webkit-transform: rotate(-40deg);
+ s  i* [. F  q6 n& R: ^9 l. Q( ^transform: rotate(-40deg);
}
5 M" e( b2 b4 j9 ?1 V: ^100%{
/ P" p* N2 I3 m-webkit-transform: rotate(25deg);
6 T& Y% K7 m. l  \transform: rotate(25deg);
}
+ t& m2 [0 c1 I6 n4 k" M* d4 X}</p> <p>@keyframes rightleg {
* U$ ?. J: s9 O2 _7 R* u% D0%{
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
}
50%{
9 e- m2 \: V: t* \. M: S-webkit-transform: rotate(-40deg);
transform: rotate(-40deg);
3 N  z" w' O" v4 _! m# M% X% |}
( {7 i4 F8 D0 W$ @9 ^100%{
-webkit-transform: rotate(25deg);
+ a  Q+ n) J' _& t# ?transform: rotate(25deg);
  s" n/ ~& K- |# P}
}</p> <p>@-webkit-keyframes rightarm {
0%{
-webkit-transform: rotate(0deg);
" }% o* y; i; }# ptransform: rotate(0deg);
! M( X+ F( N& P8 u}
$ J8 N9 s; t5 n  q50%{
-webkit-transform: rotate(40deg);
! e' i: A! `$ a1 y3 {transform: rotate(40deg);
& H; n2 P3 ]4 s( X+ Q}
100%{
; B) E& B  m2 x& `% N1 r-webkit-transform: rotate(0deg);
+ g6 o4 e* d0 c. ntransform: rotate(0deg);
2 V  S  a, e8 J% |4 H8 Y" q! _}
}</p> <p>@keyframes rightarm {
9 J$ t) S  G9 j  r- F0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
0 o% ?2 m! L5 T+ \: M& r}
! [8 Q" G. y6 H- T5 p" L/ A50%{
$ a/ z8 @' z- Z8 K-webkit-transform: rotate(40deg);
transform: rotate(40deg);
}
& E) ?8 h! g9 S) J+ e9 ?100%{
-webkit-transform: rotate(0deg);
) q9 g* [/ W# w- Q! a# Wtransform: rotate(0deg);
% z) u$ _9 |/ `5 k}
' ?) z5 J6 @' V& \" R# h}</p> <p>@-webkit-keyframes leftarm {
; B: r: e/ y+ {4 r' Z; R! H$ E0%{
% \' H' i. K* U8 \0 |- [-webkit-transform: rotate(50deg);
# a; O2 \- D% _5 k- Etransform: rotate(50deg);
}
50%{
/ f; X' u! `. b-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
}
% v" Y0 Y. r+ n  W. u6 C}</p> <p>@keyframes leftarm {
0%{
9 L* L9 Y& l! Q' |$ H-webkit-transform: rotate(50deg);
1 @: K" Z9 g- x6 A3 y+ T# atransform: rotate(50deg);
* d( t/ g7 @. C' |: ~* Y: u( I3 b9 t}
50%{
$ s% P, O0 ?! V4 ]% B. c! }-webkit-transform: rotate(0deg);
! C! h# c: Z& ]; U  b. Atransform: rotate(0deg);
}
* J$ K4 s1 r. F. R7 |100%{
' H( d/ t& i* H6 S-webkit-transform: rotate(50deg);
transform: rotate(50deg);
9 A9 J/ s3 u4 ]# G. `5 ]" I}
}</p> <p>@-webkit-keyframes head {
0%{
% P5 O: c* a1 {  D-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
* e" Q' G% K# m1 N& K50%{
! k' G2 M" A  S7 C-webkit-transform: rotate(-5deg);
+ n, U1 c, s3 L! p) ~( Ctransform: rotate(-5deg);
}
4 p1 U& G# h# {9 O. [100%{
-webkit-transform: rotate(0deg);
6 m7 \( `- X% p! c+ D" Ntransform: rotate(0deg);
}
; M% Y- J; h6 A: J/ S/ z4 ?}</p> <p>@keyframes head {
& Z; X9 w. s' v% U0%{
8 p- V  W8 {9 Q6 {+ z-webkit-transform: rotate(0deg);
6 s) b" J% w( z, u, g  etransform: rotate(0deg);
}
50%{
-webkit-transform: rotate(-5deg);
2 P3 r" E+ W8 e* Atransform: rotate(-5deg);
* [2 W( T6 v7 ^}
# m* R+ Y; M; r100%{
-webkit-transform: rotate(0deg);
7 K( r( c# |. |transform: rotate(0deg);
  M: `6 D2 J* L# }9 Z}
, |- ?, `: d/ E! r: k}</p> <p>
' \  I6 r% S  M% G& {  e@-webkit-keyframes pulse {
5 c! l9 t, ?" H+ j$ ]/ `. q) z0%{
' K" K8 g7 Q( I8 n-webkit-transform: scale(1);
transform: scale(1);
0 s. {7 R# e8 A% @3 M" S}
5 T: Y' m6 N% m" w# C50%{
9 x$ P4 u# _8 m* \9 b2 F* X-webkit-transform: scale(1.1);
8 L0 |6 M  b8 V+ j  Vtransform: scale(1.1);
}
2 ~: r& b4 r  j& S! d100%{
-webkit-transform: scale(1);
transform: scale(1);
}
; A; {) `3 E. f}</p> <p>
@keyframes pulse {
; P1 v( x' g8 i1 q: O' q* U: O! S/ y0%{
-webkit-transform: scale(1);
transform: scale(1);
}
" _7 I1 p' s- I$ P50%{
-webkit-transform: scale(1.1);
% x, J. R* S4 U4 ?% b7 G3 Dtransform: scale(1.1);
+ Q9 S4 a6 k, ~' [6 u% b}
100%{
-webkit-transform: scale(1);
7 q, @; B  U% D$ r: C! Ttransform: scale(1);
9 M& [) K9 l" B. Y% P/ ~# m# R' x* w}
}</p> <p>@-webkit-keyframes eyebrows {
0%{
}
98%{
-webkit-transform: translate(0, 0px);
transform: translate(0, 0px);
}
99%{
-webkit-transform: translate(0, -5px);
. ~. d; A0 \# ntransform: translate(0, -5px);
}
5 n$ t' R1 ?" i3 n- L. ]) I* Z; t100%{
, [6 f+ y7 Y" l-webkit-transform: translate(0, 0px);
transform: translate(0, 0px);
& [0 N! `- m8 Q0 O7 u}
}</p> <p>@keyframes eyebrows {
+ r. D0 R% ^& h0%{
}
  i0 T- w! H  y* Y98%{
1 Z. `6 o2 f; N2 A) ?- M-webkit-transform: translate(0, 0px);
transform: translate(0, 0px);
}
99%{
# A, R8 r0 M" h- q! K-webkit-transform: translate(0, -5px);
$ o0 k; n0 W8 {" c9 |% Otransform: translate(0, -5px);
" y( l1 H6 L+ S, ~. p}
- c2 g6 O( e# n9 e0 s+ C; G) ]100%{
6 K; y) T, Q! p" a: Z9 A3 z3 k$ k-webkit-transform: translate(0, 0px);
transform: translate(0, 0px);
}
}
5 J" U; Z' v( K9 _
更多网页制作信息请查看： 网页制作

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

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

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

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

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

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

哈哈 ok ~~~

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

…没我说话的余地…飘走

不错的东西 持续关注