html5 css3实例教程

之前介绍了好多款html5和css3实现的动画，今天要给大家带来一款html5和css3实现的小机器人走路动画。该实例的人物用html5绘画的，动画效果是html5和css3实现的。一起看下效果图。
实现的代码。
' d1 I* L$ d  v5 u4 S: f+ thtml代码：
代码如下:
<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
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 />
0 O& m/ K! ^, R) B  k1 ?<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>
% L  [- @/ t0 }) E<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
2 R+ g% `. c% ?" a, Oc-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
" O( O% E0 C! S& Ql287.8,189.9z />
6 A- `8 ?6 T& j' Z$ t7 o<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 />
2 w7 T/ ?+ }# D8 z. n+ |9 H% w</g>
0 _( x) [0 i3 e1 K! T; P</g>
3 }: K8 Q: V+ w( d1 w: l) q6 t7 k<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
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 />
) k0 `3 Z# F+ G1 n6 b<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 />
% s, G. i3 {: K4 C' I) g<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 />
  i. q5 R3 x/ [4 Z8 p" M# M( f, N<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 />
. M9 {: X. @. C& G. S2 W- N</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
$ U- f$ ~8 t7 |2 U3 ^0 ]$ ^7 w: _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
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 />
<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 />
- M! R  ]4 x5 b% F. A# |) A9 Z<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
. K/ X: E- u" P* dc2.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 />
5 }7 y! T* o" d4 d+ }9 w+ i9 ]# a<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 />
' V. m0 O" a* b' q</g>
<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
2 a: n. v* d7 ic0-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 />
# d9 s5 b+ z& N) r" I<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 />
% {+ ?' K4 M  I8 f+ A, h<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
. \2 f- Y, G- C5 f7 Q4 q" oc2.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
: r  T/ t" m7 J- P) Y- Kc-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>
<g id=right-arm>
4 g5 v& p) H) I; P& S<g>
3 V; ~4 S( w5 T5 U& S& Z<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& c. x, m" Ic2.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
6 h6 X7 k( A. E4 g: }9 S' x* _c231,236,227.5,237.7,223.7,238.6z />
7 f2 J1 g. ~! w6 ^  l<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
l204.4,244.5z />
</g>
<g>
$ v0 b! ^0 h% [3 _9 {+ Y# ?6 [<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
+ B  R0 o0 z& k( {5 l, i( e/ @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 />
, T# r- Z" W! g7 p, p/ f<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
+ B' p: W' `8 l) s- |: Qc8.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
3 Y( D8 ^4 N3 i# W2 z7 i% l3 @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>
</g>
! Y9 R2 x. {4 q5 m3 m, b1 e. g# i<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
  O8 E9 F# ~6 \! E, c' @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
- J  d* H& X6 d9 {l46.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 />
( P* k% y; A2 N( _/ u<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
  b1 s9 T( @3 ?3 D" |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
7 P; ]+ l% r& A, p( }1 Pc-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>
% Q. d9 X* e. a  O9 r<line id=right-eyebrow fill=#4d4d4d stroke=#000000 stroke-width=1.8222 x1=243.3
y1=180.6 x2=266.4 y2=181.7 />
6 O0 \2 {3 _7 ~) T$ c5 j<line id=left-eyebrow fill=#4d4d4d stroke=#000000 stroke-width=1.8222 x1=272.4
y1=177.4 x2=288.4 y2=164.6 />
5 T' M+ S3 L2 k' X0 p. f<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
% J/ F; C1 U- T+ Kr=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  />
2 P: Z: }: X0 I* _<polygon fill=#fe666d stroke=#000000 stroke-width=0.9111 points=227.5,102.7 201.1,67 221.1,60.1 247,94  />
; s- L% f+ h* e8 Q1 ]' p<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  />
* W% a/ ~- x; S- a" K<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
$ m1 r: \' }- n4 }0 j( h. {& C0 u185.6,93.4 185.6,93.4  />
; C* Q+ I7 f; L, G</g>
- d* L; ]' x! I, _( T( C) f</g>
<radialgradient id=svgid_1_ cx=239.975 cy=271.2543 r=122.4974 gradienttransform=matrix(1 0 0 0.2541 0 202.3306)
+ T# a. m+ D8 R$ g) Rgradientunits=userspaceonuse>
<stop offset=0 style=stop-color: #231f20; stop-opacity: 0.3 />
<stop offset=1 style=stop-color: #231f20; stop-opacity: 0 />
- I' F" e6 `' D2 b5 m</radialgradient>
) |1 s4 D' V! O. z! k<ellipse fill=url(#svgid_1_) cx=240 cy=271.3 rx=122.5 ry=31.1 />
* r# I# H  D: }, L! s$ }7 n8 Z</svg>
css3代码：
% B+ V! r: p  t" r代码如下:
: k% q( H. y& u8 Uhtml {
. A* m$ M! w3 `6 J5 E: X0 J9 R-moz-box-sizing: border-box;
box-sizing: border-box;
0 R* U" F8 b5 B4 w; t}
*, *:before, *:after {
-moz-box-sizing: inherit;
box-sizing: inherit;
! F, M5 s% n3 f* e# }}</p> <p>html,body {
height:100%;
margin: 0;
font: 40px/40px helvetica neue;
* n2 B6 j3 d1 Zfont-weight: 900;
color: rgba(255, 255, 255, 1);
-webkit-font-smoothing: antialiased;
1 j8 Z. m8 ^2 ]8 s; _font-smoothing: antialiased;
}</p> <p>svg {
0 V! g+ ?3 I- kwidth: 100%;
height: 100%;
}</p> <p>#left-eye {
0 v& v# h! ]. R-webkit-transform-origin: 283px 176px;
4 K) o/ R: _, k8 f) S- j% z; H9 N+ {-ms-transform-origin: 283px 176px;
4 V+ v8 E- G: ?2 b  atransform-origin: 283px 176px;
! [3 b" z! M- Z4 O4 f+ b/*animation: pulse 2s linear infinite;*/
}
#head {
( L" Q  T8 E* U-webkit-transform-origin: 235px 173px;
-ms-transform-origin: 235px 173px;
transform-origin: 235px 173px;
9 ~) d- l3 g1 Q# [0 X-webkit-animation: head 2s ease-in-out infinite;
8 h& i6 v8 A) w9 C) Canimation: head 2s ease-in-out infinite;
- a# t! {+ w# R( T4 A}</p> <p>#right-eyebrow, #left-eyebrow {
  @0 s8 |" z: T+ N3 o7 f3 ?! F-webkit-animation: eyebrows 10s linear infinite;
animation: eyebrows 10s linear infinite;
" b) O4 c. `1 g$ r$ N0 S}</p> <p>#left-leg {
-webkit-transform-origin: 253px 225px;
% @2 O2 S6 }4 G- b6 I, h1 S-ms-transform-origin: 253px 225px;
' l" @7 k0 f  s3 b, Ctransform-origin: 253px 225px;
-webkit-animation: leftleg 2s ease-in-out infinite;
animation: leftleg 2s ease-in-out infinite;
}</p> <p>#right-leg {
. l# N3 `7 z. s  Q/ B: Y-webkit-transform-origin: 225px 235px;
-ms-transform-origin: 225px 235px;
transform-origin: 225px 235px;
-webkit-animation: rightleg 2s ease-in-out infinite;
animation: rightleg 2s ease-in-out infinite;
5 G% d- q& l% E* h/ {: G7 Q) c}
#left-arm {
0 C5 Y& ^3 Y! p  X7 c3 N+ I-webkit-transform-origin: 263px 186px;
, u* B' h  T3 b) V-ms-transform-origin: 263px 186px;
! K0 a# H/ ~$ Y( ytransform-origin: 263px 186px;
9 n+ ~7 [0 i- ~  B1 l! V; P-webkit-animation: leftarm 2s ease-in-out infinite;
animation: leftarm 2s ease-in-out infinite;
9 E# ^' K+ r. t( O) H}</p> <p>#right-arm {
-webkit-transform-origin: 209px 214px;
-ms-transform-origin: 209px 214px;
transform-origin: 209px 214px;
-webkit-animation: rightarm 2s ease-in-out infinite;
) Z7 f% c6 l5 ^7 t7 @* Manimation: rightarm 2s ease-in-out infinite;
}
#hair {
-webkit-filter: hue-rotate(45deg);
7 F9 N3 Q- J, B' G- W* L, |filter: hue-rotate(45deg); /* izza not workingz! */
}</p> <p>
8 Y% o% q9 `, P/ Z$ x2 P4 l7 V@-webkit-keyframes leftleg {
0%{
7 z2 H. c, Z) k-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50%{
-webkit-transform: rotate(55deg);
3 j. ?& I* `4 O& j, H: v8 ftransform: rotate(55deg);
}
+ D9 \5 |+ l6 L- y; k100%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}</p> <p>
% C7 x4 H1 Z) [# L1 J: F@keyframes leftleg {
" A( C1 C* `; E0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
7 M. `6 M0 j; o& G9 Z}
50%{
( t1 \; ^; n8 E  }4 U* Y-webkit-transform: rotate(55deg);
. ]6 j9 Q4 `# P5 x& qtransform: rotate(55deg);
}
! R% ]! t+ \: H+ E; ?5 A* D100%{
/ \* A3 s( l$ w, N-webkit-transform: rotate(0deg);
transform: rotate(0deg);
8 K2 V8 g, w1 p1 m& Q/ V}
- g* L- U( G- T( ?* t2 L}</p> <p>@-webkit-keyframes rightleg {
! `" ^  }0 E- I% i" g0%{
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
2 ~5 }* g1 P$ G% \9 w}
50%{
0 g: W9 r1 U9 V! s-webkit-transform: rotate(-40deg);
! ]. ^+ E; ]# ^% V% qtransform: rotate(-40deg);
8 W3 _) _" T8 X2 a0 Q}
100%{
-webkit-transform: rotate(25deg);
( `* Q/ D0 `3 \$ v8 Xtransform: rotate(25deg);
}
}</p> <p>@keyframes rightleg {
0%{
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
7 B* Z9 N7 k+ c. [}
50%{
-webkit-transform: rotate(-40deg);
( C0 H4 |4 _) |+ l5 q; h, n; a4 n! {transform: rotate(-40deg);
. u+ V1 y5 I* g5 \% V3 C' j}
2 a) H* u% e6 p7 X100%{
-webkit-transform: rotate(25deg);
2 M* j' N) I' p" L4 J. ]3 X, Dtransform: rotate(25deg);
}
! I5 U9 Y5 B7 r* L# ^4 p! Z}</p> <p>@-webkit-keyframes rightarm {
0%{
# n/ m* @( y" S" N( }" N! o* E-webkit-transform: rotate(0deg);
+ u- Z8 E) A. y8 k- ntransform: rotate(0deg);
* B' J! o' \4 j0 v}
50%{
-webkit-transform: rotate(40deg);
8 a, o! N8 ~: L5 ptransform: rotate(40deg);
}
) g0 d8 B, G# l5 t100%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
. K5 `7 o* h7 p' m- Z}</p> <p>@keyframes rightarm {
; [# ]$ i! L. ^) s  b" p  C0%{
* W. C& ^2 h* U9 A" n% r, `-webkit-transform: rotate(0deg);
$ c# Y! V8 u8 R! R, Htransform: rotate(0deg);
}
" A/ ^/ |& L. x5 b. F+ s0 }5 Q50%{
( v' c4 m2 J3 k-webkit-transform: rotate(40deg);
transform: rotate(40deg);
}
100%{
-webkit-transform: rotate(0deg);
, `. W9 y' D# }; otransform: rotate(0deg);
2 v' d, V% ~$ v- u) P" I}
7 O9 C2 f9 H  ]2 \6 m7 g& }: ~}</p> <p>@-webkit-keyframes leftarm {
+ a2 M1 w! D3 H0%{
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
}
3 C% j' R8 [- N* D1 ^, ?; j* h50%{
6 j+ n' K3 s6 Q& y9 D-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
}
}</p> <p>@keyframes leftarm {
0%{
5 ^# E' m" m% s+ ~3 \* b& n7 m. u- M-webkit-transform: rotate(50deg);
transform: rotate(50deg);
. c) W% b" ^- j}
8 Y) \/ g! H1 |" S2 b5 j50%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(50deg);
6 c/ g7 h' m+ `, e" a) m1 ntransform: rotate(50deg);
}
}</p> <p>@-webkit-keyframes head {
) x/ Y2 o. K, s, j0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
/ k0 o; V5 Q. V0 C+ n3 d* D50%{
/ x- _/ W% u8 D-webkit-transform: rotate(-5deg);
) D& a: O3 U1 o4 Y. D4 Jtransform: rotate(-5deg);
}
100%{
. r5 |& Y0 `- c# j  X9 ]! R! c( q-webkit-transform: rotate(0deg);
( J# [7 W# S) {! Y7 Xtransform: rotate(0deg);
}
}</p> <p>@keyframes head {
2 s  y4 g; }5 s: i3 L& h' [4 Q6 k0%{
-webkit-transform: rotate(0deg);
# ]+ S7 _3 @$ i& G7 f( ntransform: rotate(0deg);
}
1 a! t! n8 h" ?50%{
-webkit-transform: rotate(-5deg);
6 z; W- z$ [1 Ttransform: rotate(-5deg);
}
0 t- C6 L! \9 Y7 r& |3 e" w3 z100%{
5 G; N8 s$ ^* {6 t-webkit-transform: rotate(0deg);
2 F6 N  Q: ]' K# Jtransform: rotate(0deg);
}
' |, I) E, v) j}</p> <p>
@-webkit-keyframes pulse {
0%{
-webkit-transform: scale(1);
2 W" Q0 z* y2 ~. {$ E) f, ftransform: scale(1);
}
50%{
; D7 V+ a0 Y# a! o, M-webkit-transform: scale(1.1);
5 r5 @5 g* n5 Z6 F" ptransform: scale(1.1);
}
& {/ F# t% X; H5 ]100%{
-webkit-transform: scale(1);
) a: h7 ?, E" W8 G, O4 u2 P8 {transform: scale(1);
- p( e  N! v% r2 b+ y: W}
8 T' S5 _+ \% K# L1 v: |: q}</p> <p>
@keyframes pulse {
6 i1 ^, C- Z- J7 {- y/ e: R0%{
8 |6 ^( D  d2 z' e-webkit-transform: scale(1);
transform: scale(1);
}
50%{
-webkit-transform: scale(1.1);
transform: scale(1.1);
) d/ Q! G  f5 {0 E2 t# Q}
7 w: o+ f" f0 N+ P; q- I100%{
-webkit-transform: scale(1);
transform: scale(1);
% {$ N+ n1 K" Z% h4 ~& Z}
5 ~+ D# O4 ~8 ^0 _8 M0 c}</p> <p>@-webkit-keyframes eyebrows {
! E/ ]* k' ]9 y- G9 O" Q" V- n0%{
' H+ d: i- U/ I5 n% r9 q}
' Z5 B- e6 V2 i- H: Y- s- @1 c98%{
-webkit-transform: translate(0, 0px);
9 {; Z1 M2 Z0 m' F: B2 Mtransform: translate(0, 0px);
& c! @$ |% l5 d# I}
2 K7 w' R& {9 I99%{
5 Y: L3 d# B( Y( t" s-webkit-transform: translate(0, -5px);
transform: translate(0, -5px);
$ Z# M7 ?7 Z4 ~; A3 Z. c2 l: P}
- n7 f" `9 d$ X* j100%{
-webkit-transform: translate(0, 0px);
& B' r, v# s% s, h" Ptransform: translate(0, 0px);
5 a- z7 p  S9 a4 X% y}
}</p> <p>@keyframes eyebrows {
0%{
3 c/ Q; k. q( z5 f! E% Z4 H; d}
: T4 e3 _! ^! h. K" R" d98%{
: l  `) f) u, z( y-webkit-transform: translate(0, 0px);
& L1 m7 E1 E* f& D' j- R( Btransform: translate(0, 0px);
}
! I) J4 `2 K' z- F7 Q  f9 r# y99%{
( V  U6 C8 q  j6 S6 c-webkit-transform: translate(0, -5px);
" b( ~" z" |% R  otransform: translate(0, -5px);
5 c9 ^. E5 X6 d% N* P+ {4 z5 V# o}
( x5 Y, c7 T( j  m100%{
-webkit-transform: translate(0, 0px);
: \* B& k( s0 @; d. dtransform: translate(0, 0px);
}
}

更多网页制作信息请查看： 网页制作

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

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

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

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

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

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

哈哈 ok ~~~

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

…没我说话的余地…飘走

不错的东西 持续关注