html5 css3实例教程

之前介绍了好多款html5和css3实现的动画，今天要给大家带来一款html5和css3实现的小机器人走路动画。该实例的人物用html5绘画的，动画效果是html5和css3实现的。一起看下效果图。
实现的代码。
; k- R0 ]' F( x8 A  K0 Bhtml代码：
代码如下:
* i% g; y" a: `/ F<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 />
- q! j* ?9 [& U: M* _! t<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 />
- ]' p7 b5 M6 N/ w</g>
<g>
' ]" N9 W$ R/ |6 B. _" L<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
& l0 ?$ a) F  ^/ H" B% T8 Kl287.8,189.9z />
<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
: Q+ ^/ b& h3 G, L- B2 Ac-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>
5 M2 X1 I! u8 _  \, c2 h<g id=left-leg>
3 ]# P' e7 F- i; O/ Q" X' F4 U<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
0 O2 T) u1 C$ `4 [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 />
<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 />
0 ?1 e/ ^/ }  I<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 />
<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
5 s; {  S* Q3 @! W2 Y- ]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
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 />
( g3 L/ ?' J/ I% j0 c3 ]7 N</g>
: ~" z# u) q3 U<g id=right-leg>
/ W$ `8 y/ t  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
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
+ k2 C) }. g0 A( q4 Yc-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 />
; P8 w* ?7 _2 H  ]<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 />
<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 />
) f& M2 h" ?8 ?; j  p' \* R<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 />
3 ~+ i% `$ O* s0 g# e' |- x) {</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
, a  m+ k9 k8 C5 {+ L8 h' L) i; ]c0-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
& k. I# b7 h# _4 u2 w1 m/ }  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 />
% @4 N8 m7 A3 |, \. W<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
1 n: D; _. z) a9 R) J1 Bc2.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 />
<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
$ [3 t" B: S* c" O: lc-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>
; ]( ~5 G% b$ q: P* r9 `- P<g id=right-arm>
( V) t! y2 a9 D5 L4 S- ^- `7 ]<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
* t% ^6 c- p+ O  W2 b2 G4 |, mc2.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 />
- a1 K/ D- g+ |4 v<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
% b/ j- z; r) g/ K/ O& i" Mc231,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
6 x+ }7 t. Q# Z2 K+ p1 sl204.4,244.5z />
7 w$ |0 k$ O: A+ P$ |6 D</g>
8 p0 ]" i: b0 ^+ y( N! v% u<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
' y9 }  n; n# x5 f' \  H1 u% 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 />
$ _' `% w" h5 J2 _+ t<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
1 E3 l4 a0 ?! e0 @- v4 v' |) Rc227.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
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>
<g id=sub-head>
) B! ^( N4 M& L" {$ A" O9 \<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
% Z7 I  Z9 M0 `7 T6 Mc0-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
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
* C( j+ E# W6 El46.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
2 k# f- R$ b4 El-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
* k6 r* w  i: Kc-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
' u" T8 G. g8 C( c9 Ky1=180.6 x2=266.4 y2=181.7 />
<line id=left-eyebrow fill=#4d4d4d stroke=#000000 stroke-width=1.8222 x1=272.4
7 R) l* Q/ t, S8 D4 Ey1=177.4 x2=288.4 y2=164.6 />
$ P9 v& D  l# k3 q4 L2 O& O<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
: x% r6 R  E6 ]" N( ar=3.8 />
</g>
7 Q, Q/ K$ r9 w0 \) b<g id=hair>
' n2 V" R" U4 V+ N' _! T: m<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  />
, J7 A& {0 A7 n# d& B! m" m: e3 S8 C8 d<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  />
( I1 y$ S) G$ ]- [7 e3 b<polygon fill=#fe000c points=257,143.2 244.4,84.3 264.4,75.9 275.9,132.3  />
1 {! l/ s, L8 P3 e8 h. N$ D; W<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
5 q( x1 W3 l9 e" p/ }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
% k- X  G& q! u: I185.6,93.4 185.6,93.4  />
/ ]7 n" N% K$ M0 h</g>
# \7 d2 Y! {, |  `' p6 G" h0 F8 q) F</g>
4 \! c5 @5 {3 B. L; r) G9 i<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 />
: V8 F% R/ `0 q1 @3 ]0 i$ ?# i; E<stop offset=1 style=stop-color: #231f20; stop-opacity: 0 />
</radialgradient>
<ellipse fill=url(#svgid_1_) cx=240 cy=271.3 rx=122.5 ry=31.1 />
</svg>
6 o. Q* ~- `* T+ B2 B# O4 h% M4 u# V8 u* Zcss3代码：
5 ~- ~* X$ ]! B/ ]. Y# `$ ~9 g3 s代码如下:
' E- {2 W/ P* ]html {
0 T8 u4 ^) z' A4 i-moz-box-sizing: border-box;
box-sizing: border-box;
}
# g* y% a+ [, K& Z7 t*, *:before, *:after {
-moz-box-sizing: inherit;
box-sizing: inherit;
% w0 K. i$ E3 R}</p> <p>html,body {
height:100%;
3 B  M( H# G' N$ e$ rmargin: 0;
font: 40px/40px helvetica neue;
7 Y& r9 `5 u, W5 q  Efont-weight: 900;
; P/ g+ Z3 f2 t8 v% ~2 c) scolor: rgba(255, 255, 255, 1);
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
}</p> <p>svg {
* j/ L, u+ }+ M9 k, A2 s1 |width: 100%;
" M6 @. [: J" ^) Q8 d3 I. ]height: 100%;
/ B7 l! j2 i; X4 D+ a0 Q- o}</p> <p>#left-eye {
2 o/ D2 s& Z8 k  w. A-webkit-transform-origin: 283px 176px;
-ms-transform-origin: 283px 176px;
1 d+ s" j0 y2 \2 q+ F" rtransform-origin: 283px 176px;
/*animation: pulse 2s linear infinite;*/
  W, J' M7 ~7 J}
; P" m3 L1 Y4 d% H- ?  D#head {
-webkit-transform-origin: 235px 173px;
-ms-transform-origin: 235px 173px;
+ {0 {$ a* q4 K/ ^# \transform-origin: 235px 173px;
/ J" D! n8 P+ b4 Q; b-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;
% ^: B2 f$ ^$ oanimation: eyebrows 10s linear infinite;
}</p> <p>#left-leg {
-webkit-transform-origin: 253px 225px;
  y: @( d4 N" ~' a4 A; E/ `$ B-ms-transform-origin: 253px 225px;
+ e2 {, b& ]5 ]: `! R2 g+ D& rtransform-origin: 253px 225px;
! E9 h3 c% ^- E  O/ ?5 d# W-webkit-animation: leftleg 2s ease-in-out infinite;
animation: leftleg 2s ease-in-out infinite;
}</p> <p>#right-leg {
9 r. l. }3 G+ c2 V# d6 Y1 L-webkit-transform-origin: 225px 235px;
-ms-transform-origin: 225px 235px;
5 M5 ], o- m2 ftransform-origin: 225px 235px;
! m( C$ `+ l5 T; O-webkit-animation: rightleg 2s ease-in-out infinite;
5 L7 G: b2 o5 `& E# J. p% ^1 tanimation: rightleg 2s ease-in-out infinite;
}
#left-arm {
-webkit-transform-origin: 263px 186px;
-ms-transform-origin: 263px 186px;
( `5 O; g1 f; X" [, C+ Ctransform-origin: 263px 186px;
-webkit-animation: leftarm 2s ease-in-out infinite;
animation: leftarm 2s ease-in-out infinite;
}</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;
animation: rightarm 2s ease-in-out infinite;
  L8 }5 ~/ e7 m) }8 `}
% u8 |. [& ?- b# q$ k* P9 U#hair {
-webkit-filter: hue-rotate(45deg);
5 s# M# d% Z2 }' z+ H+ lfilter: hue-rotate(45deg); /* izza not workingz! */
! c. U1 i& `: X}</p> <p>
/ _( g2 ~$ F3 ?+ ~$ u8 I@-webkit-keyframes leftleg {
9 F% Y6 U- t' o0 E0 t* l0%{
/ N& M5 j* I, `* a. }2 t, a  l-webkit-transform: rotate(0deg);
+ P) \1 R7 u' M: P- ^2 q* rtransform: rotate(0deg);
4 C5 w  ]' K1 u& }5 F& E}
0 r4 _1 }$ }: t( U( M3 F50%{
4 u: b' g) r5 x1 s; u-webkit-transform: rotate(55deg);
transform: rotate(55deg);
}
100%{
-webkit-transform: rotate(0deg);
- L9 Y0 a7 M5 }% Ktransform: rotate(0deg);
}
- y' q$ y9 r" g% l5 A# v; \}</p> <p>
@keyframes leftleg {
6 _' v8 b: L* O, f' _; q+ i0%{
-webkit-transform: rotate(0deg);
: W' T* X. f& mtransform: rotate(0deg);
}
6 |7 ~  F) t! d6 k/ Z; k8 P+ n50%{
-webkit-transform: rotate(55deg);
transform: rotate(55deg);
0 T& e0 v5 b! [" |% `, w0 Z+ v, x}
4 e3 ]7 w1 j7 g* w* f, g8 Q100%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
' K- m2 d' {0 W: s}
! ~  s* N" `9 n9 q}</p> <p>@-webkit-keyframes rightleg {
) Z, D- x' N6 L0 Z1 ^/ U. @0%{
* C5 T, L+ z' C* w/ m! `9 X-webkit-transform: rotate(25deg);
transform: rotate(25deg);
( t, h  r( Y) x}
50%{
4 k; a! a3 P1 V2 i  g-webkit-transform: rotate(-40deg);
. H% Y9 I# Z8 ^. D* [. ]" C2 ltransform: rotate(-40deg);
}
7 s3 A% }6 a0 s; G: ~: j4 M! w100%{
-webkit-transform: rotate(25deg);
- O% c1 Z6 G- j$ N7 |$ S& M+ |transform: rotate(25deg);
6 Z2 k& H/ R+ u0 q}
}</p> <p>@keyframes rightleg {
( c8 m& [! u' n" V0%{
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
}
50%{
, Q, B. I0 Q' u( G4 v" X# p-webkit-transform: rotate(-40deg);
3 b" h3 ?" }9 b! }transform: rotate(-40deg);
$ N) c3 D+ m1 U+ _. G4 ]2 k}
100%{
  v8 x0 A$ M* m2 f; K-webkit-transform: rotate(25deg);
. s+ X& h* g! Q2 u& X6 a  ltransform: rotate(25deg);
}
- f* `. _+ ^$ x}</p> <p>@-webkit-keyframes rightarm {
8 O) p3 _1 [) h5 v: E0%{
$ Z8 e7 N7 G  P; w* A! T  o' K-webkit-transform: rotate(0deg);
transform: rotate(0deg);
1 O, t+ o6 X! {$ I" [& s6 v% r}
50%{
  e0 |. m; F) b) }& Y-webkit-transform: rotate(40deg);
* m9 ^  T( O/ {8 q9 X# K9 a! m! stransform: rotate(40deg);
0 J, m. @$ {9 j}
100%{
5 q1 ^; G. R6 P; v' |-webkit-transform: rotate(0deg);
* @, A9 Y- W5 stransform: rotate(0deg);
}
+ y8 ?& v% E" A}</p> <p>@keyframes rightarm {
0 G& T/ z: \1 G3 v' \1 c4 N0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50%{
" \$ u' g' t* w, B/ p# ?* c. ^- \* C-webkit-transform: rotate(40deg);
$ L+ q1 N% c8 U6 z! ytransform: rotate(40deg);
* q/ H: f. o, [}
6 o" q) i, A# {0 @. L2 W( S/ J4 @5 {100%{
- o2 z% D# r1 b; K-webkit-transform: rotate(0deg);
* ]7 n1 z" @8 M, Q9 t7 Ztransform: rotate(0deg);
}
! {3 }6 D& P  l5 \( T- x}</p> <p>@-webkit-keyframes leftarm {
* u% {# j/ u) K  T2 ?/ |5 x0%{
5 e; |( |* L1 @  ^! k-webkit-transform: rotate(50deg);
transform: rotate(50deg);
}
, I, e. d6 q, ~5 Y9 S50%{
-webkit-transform: rotate(0deg);
5 ~: L) P1 M) U- y3 R  l# Otransform: rotate(0deg);
1 m$ A- c4 F& H" F- w. B}
/ z" U  L  P/ O, X4 u+ P% O- ~. J( `100%{
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
}
}</p> <p>@keyframes leftarm {
0%{
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
}
50%{
7 w3 K( G8 l9 q4 z4 E5 p7 W-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
0 D1 r- `  u+ s% K  M' h}
}</p> <p>@-webkit-keyframes head {
- x5 M: t5 F, A7 d6 Z0%{
) q& `7 @( L' t-webkit-transform: rotate(0deg);
8 f: |  H, d# ]( Ctransform: rotate(0deg);
, f+ j) x3 x  l4 m}
' d% X# C, q! B2 |; a; r& _50%{
4 P' \4 ?  s0 L" |4 @7 G-webkit-transform: rotate(-5deg);
4 P* J9 M1 ~4 Etransform: rotate(-5deg);
$ Y2 D! R1 E) e- {) v}
( p  f7 [$ f/ }100%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
  d! Z1 u! l# q}</p> <p>@keyframes head {
0%{
) ~. m. m& T) u-webkit-transform: rotate(0deg);
, K5 m, [* U+ G: r$ P# ?% [transform: rotate(0deg);
/ ~$ r) r" i- W) C! u( l5 m" g}
7 b! \0 s8 J2 O50%{
' w6 g( p% l/ u; S$ R-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
}
100%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}</p> <p>
@-webkit-keyframes pulse {
6 M8 }% o7 }- f. n, D6 Z6 |0%{
& Q- c! u# R, m4 P- j3 R-webkit-transform: scale(1);
$ ^; A8 r$ D3 V/ U4 ytransform: scale(1);
}
50%{
6 s1 w$ P1 Y& P  y3 J; {) T-webkit-transform: scale(1.1);
transform: scale(1.1);
}
100%{
-webkit-transform: scale(1);
9 n5 P$ t) B. u% \transform: scale(1);
}
) s& i2 \1 p0 y3 X# ?5 i}</p> <p>
. R! \' p* a" J' j, l@keyframes pulse {
0%{
! P$ K: M' V  u2 q-webkit-transform: scale(1);
' a. _6 ]. ~: f7 r3 c7 ?; J4 Stransform: scale(1);
& I( R, ?/ N, _' p+ r2 e}
50%{
* Y3 H9 X9 Q3 E/ o-webkit-transform: scale(1.1);
% ]! J: E5 \& n+ w3 @) vtransform: scale(1.1);
  H, W- j( N& J+ @7 E! Q3 v}
/ K' H7 y. \: P9 C6 ]100%{
, R( P1 C6 b8 [* ]-webkit-transform: scale(1);
transform: scale(1);
' [; s. g+ u% h( [: u1 a}
}</p> <p>@-webkit-keyframes eyebrows {
0%{
}
9 x- X! r0 Y, b6 S; ?4 L; R# Y98%{
-webkit-transform: translate(0, 0px);
transform: translate(0, 0px);
}
# C- Q2 L+ h* P* A7 G99%{
" q2 [6 ~, ~; j) d9 O7 T+ F-webkit-transform: translate(0, -5px);
/ t. ]7 R3 T; A% f- L# b. R  Gtransform: translate(0, -5px);
6 G5 b7 V0 V7 `; F1 V$ J}
* `" o8 C4 p; X+ ?% g' r7 y100%{
7 j0 D$ J6 R8 v  R% T-webkit-transform: translate(0, 0px);
- Z" r; W+ }) w4 @: x0 v/ E8 @: btransform: translate(0, 0px);
: K! w; |3 q* p7 l; }5 N& Q" r& M}
}</p> <p>@keyframes eyebrows {
0%{
0 z. [. z1 F6 X; y3 \, r3 \}
- a7 }  I& m) T+ N7 Y98%{
& N& K' V9 X4 V3 o' P! ^-webkit-transform: translate(0, 0px);
8 t2 P( n( j+ x" @9 {$ w0 b3 c; xtransform: translate(0, 0px);
}
99%{
$ m1 A5 t5 V" t-webkit-transform: translate(0, -5px);
* G# v+ z$ a0 O2 j% X- Wtransform: translate(0, -5px);
4 T2 J+ A2 |$ `" K# }* X) ^}
100%{
-webkit-transform: translate(0, 0px);
transform: translate(0, 0px);
}
3 ^( J7 {/ S* Y$ v7 M' @+ k1 c}
3 a% ^% B9 ?7 v3 T5 G  L1 ~' J
' x# F  m9 {& p4 @) \( ]更多网页制作信息请查看： 网页制作

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

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

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

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

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

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

哈哈 ok ~~~

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

…没我说话的余地…飘走

不错的东西 持续关注