html5 css3实例教程

之前介绍了好多款html5和css3实现的动画，今天要给大家带来一款html5和css3实现的小机器人走路动画。该实例的人物用html5绘画的，动画效果是html5和css3实现的。一起看下效果图。
! ^. H3 Y% u/ f: @# E4 E  [& a实现的代码。
. \/ |1 w! Z2 d9 xhtml代码：
代码如下:
<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>
  t' Z3 Q; C& o# t( s<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
3 i% k; w8 z" {% z9 W1 ^4 W4 Bc1.2-2.2,1-5.7-0.4-7.7l-5.2-7.5c285.8,208.8,274.7,214.1,264,216.2z />
" i' R8 q- K9 z6 X<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
' h- |* x3 Z  X! B$ I7 j0 r9 [9 Qc289.8,202.2,286.7,205.6,282.9,208.4z />
7 j. P. o0 f- q( x: l</g>
<g>
, x: n2 p/ d6 i0 Z8 q  O<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 />
1 U0 ~; v  x4 f<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 />
4 I% p, e' |' `" Y<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
$ ^" A$ r  r$ B4 t# H. R% R' oc-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>
</g>
1 V1 D& a- O+ X( n4 u0 _! B, [<g id=left-leg>
8 |7 i( {% r0 q2 H  N9 v) F" K<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 />
% s+ g/ P2 n7 O$ B# 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 />
; E" r: Y0 t- T3 P! ?. ]- P0 e  M<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
( E5 J4 ?4 s, Ic1.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
+ W( ^; l7 I6 x/ B$ ac-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 />
0 ^5 X7 i3 b8 v) b' |<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 />
</g>
<g id=right-leg>
9 A6 V% z/ `/ r. \. _5 E- R! v; k<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
" b8 m0 k6 o  E- l1 O9 e, _5 g1 ?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 />
7 n; j' V6 q# ^. D0 z4 @<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
# @4 _' u' N# c1 }! ec2.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 />
. O' w0 a8 Y. }" h, M" Y& D# u<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 />
</g>
, |! R' o4 U' Z9 ]+ M" {+ E8 {1 @; o<g id=torso>
) X+ s' z, \, |$ W<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
3 E8 ^5 X. K! M! U/ Vc0-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
2 p' N' j& C$ L7 X: i1 R; el23.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 />
# z* f2 x. K6 @- C$ x& B; I<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
$ `( c% V! v- P" \( ]. e: U$ rc2.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 />
  v4 J. r# P6 O4 Y, _5 K  d<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 />
& z- d0 U( w* ]% a" [1 R</g>
<g id=right-arm>
<g>
: o% s) h( B8 a, Y8 A; _0 c<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
0 L) O- P7 Q) H/ [( ?9 H. R6 r" \c231,236,227.5,237.7,223.7,238.6z />
6 ]) e5 F% F  U$ q* j: u<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 />
+ D  Y9 {7 a3 X: `: V</g>
& E" b% U, x/ @) B1 r( x<g>
* S6 k2 `8 @4 F0 k2 |' 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
c8.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
8 V. S2 p/ ^. p1 t# @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>
<g id=head>
; H! G% |! J; u  S3 X7 |<g id=sub-head>
# a4 s- ?& W/ m5 x0 b<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
- I( T+ E2 [4 J: kc0-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
, Z! c% M3 l2 y5 S$ `l46.4,23.2c4.5,2.2,11.8,2.2,16.3,0l288.6,197.1z />
; _  n2 G2 Z( Y, t+ T3 i5 Z/ y<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
/ I9 O+ C4 i& ?; G0 `& {7 \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
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>
<line id=right-eyebrow fill=#4d4d4d stroke=#000000 stroke-width=1.8222 x1=243.3
y1=180.6 x2=266.4 y2=181.7 />
% R5 l7 A0 P9 Q' T" n<line id=left-eyebrow fill=#4d4d4d stroke=#000000 stroke-width=1.8222 x1=272.4
y1=177.4 x2=288.4 y2=164.6 />
. r8 Y0 Z3 R( f: S' |. j<circle id=left-eye stroke=#000000 stroke-width=0.9111 cx=283.6 cy=176.5
r=3.8 />
/ e. ?" i* N3 x  ^; Z# P, z<circle id=right-eye stroke=#000000 stroke-width=0.9111 cx=257.5 cy=186.9
r=3.8 />
</g>
6 d  i/ C: Y' ]' ]<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  />
<polygon fill=#fe666d stroke=#000000 stroke-width=0.9111 points=227.5,102.7 201.1,67 221.1,60.1 247,94  />
4 h$ j$ S9 l. |5 j4 X; f5 R- b" x5 a<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  />
) X- c! |8 b  ]; X2 b5 \7 \: ~<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>
0 o; f/ I6 S; O</g>
<radialgradient id=svgid_1_ cx=239.975 cy=271.2543 r=122.4974 gradienttransform=matrix(1 0 0 0.2541 0 202.3306)
8 f3 D8 _' u5 V+ Q  A6 E" Dgradientunits=userspaceonuse>
<stop offset=0 style=stop-color: #231f20; stop-opacity: 0.3 />
<stop offset=1 style=stop-color: #231f20; stop-opacity: 0 />
* y, Q1 T5 r1 d. m7 _0 J4 P& A</radialgradient>
: s7 \& b* ~' m# J. H<ellipse fill=url(#svgid_1_) cx=240 cy=271.3 rx=122.5 ry=31.1 />
</svg>
css3代码：
代码如下:
( W: W; u% [3 b' x- Q! a+ xhtml {
-moz-box-sizing: border-box;
* d- ]% P2 ], ]box-sizing: border-box;
" s! ~: K" ?7 e! y% k+ w% e}
*, *:before, *:after {
-moz-box-sizing: inherit;
box-sizing: inherit;
: M4 d0 L9 O# h# |}</p> <p>html,body {
height:100%;
, q  D6 r' Y5 zmargin: 0;
font: 40px/40px helvetica neue;
) n& g4 ~$ u+ }6 ~* zfont-weight: 900;
color: rgba(255, 255, 255, 1);
- \1 l& t  M6 g9 I' \-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
8 G! O0 t) I1 Y) w6 l& \}</p> <p>svg {
width: 100%;
0 r7 p+ P, Y$ d' Kheight: 100%;
}</p> <p>#left-eye {
-webkit-transform-origin: 283px 176px;
-ms-transform-origin: 283px 176px;
2 {. z+ m  a; s" Ktransform-origin: 283px 176px;
/*animation: pulse 2s linear infinite;*/
}
" u1 E: V/ \7 }# A1 H#head {
-webkit-transform-origin: 235px 173px;
& G1 X1 o: C8 B" B-ms-transform-origin: 235px 173px;
transform-origin: 235px 173px;
, C% _# o& r0 Y; C# K4 j-webkit-animation: head 2s ease-in-out infinite;
' E$ t0 ]6 o7 |5 I' Oanimation: head 2s ease-in-out infinite;
: s3 E- v8 S+ E" B}</p> <p>#right-eyebrow, #left-eyebrow {
4 W* l1 j& z  u% `-webkit-animation: eyebrows 10s linear infinite;
+ ]! M- d* p$ Qanimation: eyebrows 10s linear infinite;
}</p> <p>#left-leg {
-webkit-transform-origin: 253px 225px;
-ms-transform-origin: 253px 225px;
" L. X0 g. {* B6 I$ S8 ^transform-origin: 253px 225px;
-webkit-animation: leftleg 2s ease-in-out infinite;
4 F9 H7 M1 d1 fanimation: leftleg 2s ease-in-out infinite;
}</p> <p>#right-leg {
-webkit-transform-origin: 225px 235px;
8 a/ G4 s5 `8 U4 r8 e-ms-transform-origin: 225px 235px;
transform-origin: 225px 235px;
-webkit-animation: rightleg 2s ease-in-out infinite;
! h0 F  A0 G, ?: V7 q3 Janimation: rightleg 2s ease-in-out infinite;
, C. V+ [* p4 H' Q% h+ H}
3 U5 V2 p2 p4 ?: s$ C2 o#left-arm {
-webkit-transform-origin: 263px 186px;
9 [, _$ }" Q8 Q* Q$ f; _-ms-transform-origin: 263px 186px;
transform-origin: 263px 186px;
, S  F( F! s3 X6 [& v, O" ?/ j5 p-webkit-animation: leftarm 2s ease-in-out infinite;
animation: leftarm 2s ease-in-out infinite;
}</p> <p>#right-arm {
  C5 o! z9 _& @# x, q: M+ P7 @. @-webkit-transform-origin: 209px 214px;
-ms-transform-origin: 209px 214px;
( o7 g  E- E( _! H( S/ ttransform-origin: 209px 214px;
) v! U% s' C& R-webkit-animation: rightarm 2s ease-in-out infinite;
animation: rightarm 2s ease-in-out infinite;
}
#hair {
% [: \- m" ]; @( C$ H8 B# q-webkit-filter: hue-rotate(45deg);
filter: hue-rotate(45deg); /* izza not workingz! */
1 X" T# ]: ^5 n9 l8 {9 M1 h}</p> <p>
@-webkit-keyframes leftleg {
0%{
/ d6 |# _% L+ m7 n5 }* E7 R-webkit-transform: rotate(0deg);
" w) s( x& @$ b+ L0 Ztransform: rotate(0deg);
}
2 r6 e4 y! x* x+ D, B. ~50%{
-webkit-transform: rotate(55deg);
transform: rotate(55deg);
}
100%{
; x  k8 L8 a* h1 }; j8 D# F-webkit-transform: rotate(0deg);
3 {! g, `4 f+ J. {$ W9 E4 Ptransform: rotate(0deg);
}
5 E; c1 m- ^7 r1 X5 Z% q& D}</p> <p>
) v/ ~6 k/ X+ m1 A7 B$ n1 ]@keyframes leftleg {
0%{
) [$ j5 t  W) d7 ^0 Y! n; h- |-webkit-transform: rotate(0deg);
transform: rotate(0deg);
6 h+ P1 F9 w+ s6 g) p0 t  A6 F) x}
50%{
5 q6 e) h9 Z* S, H2 @& }, L- i5 _-webkit-transform: rotate(55deg);
transform: rotate(55deg);
: Q& F6 k: }- d: m}
100%{
-webkit-transform: rotate(0deg);
9 _" O2 Y! V( U# Rtransform: rotate(0deg);
& j7 O* p+ o6 w8 i) k}
}</p> <p>@-webkit-keyframes rightleg {
0%{
-webkit-transform: rotate(25deg);
' @$ t- a- U7 e$ O8 {6 rtransform: rotate(25deg);
}
# f2 a: _, S$ C) y1 |1 ~50%{
8 }: i( C9 X7 H2 y0 Z% G, x6 t, D-webkit-transform: rotate(-40deg);
transform: rotate(-40deg);
% T  k' g# ~' C& w  s3 g}
100%{
* M/ B$ }* w2 X. S-webkit-transform: rotate(25deg);
transform: rotate(25deg);
}
}</p> <p>@keyframes rightleg {
0%{
8 z# c1 G9 X+ I-webkit-transform: rotate(25deg);
transform: rotate(25deg);
}
50%{
( o. t& T5 I- J& ]- M-webkit-transform: rotate(-40deg);
transform: rotate(-40deg);
( [; U9 R/ r" G* t2 m, Q}
100%{
; k4 T/ B; S8 Z5 Z+ B-webkit-transform: rotate(25deg);
transform: rotate(25deg);
}
}</p> <p>@-webkit-keyframes rightarm {
0%{
, I: B! s$ E4 _. ^( ?, H7 ]-webkit-transform: rotate(0deg);
- x* z5 G7 b5 r+ `: G2 B- X! K! @0 etransform: rotate(0deg);
}
: d- ]) ~( m; N+ \# E8 f( z6 n50%{
, t2 g% X7 t8 E  Z) i3 ]-webkit-transform: rotate(40deg);
transform: rotate(40deg);
( F  V  ^3 T. B}
6 a2 ~" A. H/ G+ c- s5 Q100%{
+ d- k( g( ?" h, ]( \+ T! c' g-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}</p> <p>@keyframes rightarm {
0 s! N3 n' j* H/ I$ y0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
5 ~: n0 z, \6 i50%{
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
}
100%{
. u6 ^. k7 H8 S/ q' b& Q! _- V-webkit-transform: rotate(0deg);
: D5 u7 f6 X" }( j4 Mtransform: rotate(0deg);
}
# h2 |, l% O( Z1 e}</p> <p>@-webkit-keyframes leftarm {
% p& X2 i; ~8 e9 n- Z0 C9 W0%{
4 l% C$ c* |; k* ]7 {: N-webkit-transform: rotate(50deg);
/ L; B. e& R" u% _4 f& |transform: rotate(50deg);
}
/ M0 K; w+ |# l6 F4 C" U- A, D! q/ a. I50%{
* }' s# ]+ Y, X  d-webkit-transform: rotate(0deg);
transform: rotate(0deg);
8 ?0 x3 \4 ~- O2 D9 [- ]& z' i}
100%{
% Y5 N' D& n2 G-webkit-transform: rotate(50deg);
transform: rotate(50deg);
}
. S% X$ t- r3 R}</p> <p>@keyframes leftarm {
9 g0 H0 g" H  N5 X) Y0%{
% V+ }, G% g3 T2 `4 j( R-webkit-transform: rotate(50deg);
transform: rotate(50deg);
# W6 Z  W' t' V6 t) H( g}
50%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
- w/ a3 f" I+ R/ ?  J}
/ E6 D+ r7 U9 E100%{
-webkit-transform: rotate(50deg);
- v: f, ?+ P/ J2 C- ?transform: rotate(50deg);
}
' A$ o: L: z% k7 E9 x}</p> <p>@-webkit-keyframes head {
) U# `" [# Q& }- A9 A0%{
-webkit-transform: rotate(0deg);
) j) O2 [" F/ q' L: p- i4 Mtransform: rotate(0deg);
}
, |0 X, }! m+ T50%{
' c, D8 n4 [" Z-webkit-transform: rotate(-5deg);
7 B3 v! T, j3 |. |transform: rotate(-5deg);
}
100%{
-webkit-transform: rotate(0deg);
2 [. o3 s; \& h$ |% Jtransform: rotate(0deg);
}
}</p> <p>@keyframes head {
1 J' i8 g3 z5 x( a* n6 ?' `0%{
9 D. I! |/ \% {" s-webkit-transform: rotate(0deg);
9 e) M/ l$ y% u, }( V2 u9 |$ atransform: rotate(0deg);
}
9 M$ d  A6 Q& j. |& o50%{
, P* }; M  U" U9 @2 v-webkit-transform: rotate(-5deg);
* g* R- G8 J& |8 etransform: rotate(-5deg);
}
( M% ]; V" |4 Y) I100%{
9 ~5 H  Q% N' H- B% O8 @) V-webkit-transform: rotate(0deg);
transform: rotate(0deg);
: Y) _3 z! w! P# s/ |}
}</p> <p>
5 [( Y1 B0 N0 V" n! X@-webkit-keyframes pulse {
4 a- f1 F) t$ b3 A( Y$ m* _! F. Q4 z0%{
-webkit-transform: scale(1);
transform: scale(1);
}
: ?; i$ v5 C# E8 O+ n: C50%{
-webkit-transform: scale(1.1);
# n" y, b! ?3 T. s5 ~transform: scale(1.1);
}
9 J* \" E5 e3 ^100%{
( e* k1 L" o& v* ?0 u-webkit-transform: scale(1);
0 r; p( Y$ n+ J* N* |transform: scale(1);
}
}</p> <p>
  u# L/ ^" d4 [6 N, d! d& U@keyframes pulse {
7 x4 k0 u3 Y3 B+ P0%{
-webkit-transform: scale(1);
transform: scale(1);
}
5 h' L# e8 _/ T% n1 l/ B+ \' w50%{
-webkit-transform: scale(1.1);
8 F4 j6 \4 J- R- ~7 q. l0 K6 W4 ztransform: scale(1.1);
! }1 I  t  q, _}
100%{
-webkit-transform: scale(1);
transform: scale(1);
9 _, t" y- ~+ Q+ E}
}</p> <p>@-webkit-keyframes eyebrows {
" }: M* h0 L$ D* e3 z( k0%{
}
# ?! Y- {" q6 b& ]; o98%{
# C; \; [/ @8 e2 ~7 O; a-webkit-transform: translate(0, 0px);
transform: translate(0, 0px);
' p/ S2 K( W; i3 h6 q1 e; t}
% D( W% m- v3 z  L  q99%{
, U$ \! N3 o* b" S! s0 v-webkit-transform: translate(0, -5px);
transform: translate(0, -5px);
4 _# C( \. y. ~2 _+ s5 h) a9 R6 I}
100%{
9 p3 l! x" S/ k, V- Z4 K! f) H4 P* ]-webkit-transform: translate(0, 0px);
2 F8 w2 o- l. htransform: translate(0, 0px);
}
, X7 n3 h$ Y; {" c' |}</p> <p>@keyframes eyebrows {
0%{
1 x* P5 ?) G( ]- J* i7 y}
98%{
-webkit-transform: translate(0, 0px);
$ e. h/ S5 U0 n9 e% Q% g! [' Utransform: translate(0, 0px);
/ b2 X# U- {: P/ q* S! m}
2 I6 ^# B% J& U* W  u/ C) Q2 J99%{
4 S# N0 }% M1 V! X, E8 u-webkit-transform: translate(0, -5px);
, T# R9 z. N6 R/ y7 y4 btransform: translate(0, -5px);
0 o2 Z2 R# `2 N6 @/ T4 X}
100%{
4 i7 f% {4 i) K5 N' ?/ D3 Z-webkit-transform: translate(0, 0px);
transform: translate(0, 0px);
}
9 ]( e% D7 T2 K% g/ c! V6 t1 p8 f}
. d) r6 }) b" w6 s! Z
# ?, u5 R% l. ]更多网页制作信息请查看： 网页制作

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

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

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

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

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

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

哈哈 ok ~~~

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

…没我说话的余地…飘走

不错的东西 持续关注