在開始之前,不得不說CSS3 的功能是真的強大,有的時候使用起來比JS好用~.話不多說,直接上程式碼

HTML:

<span style="float: right; class="shake-slow" >看我搖得的多開心</span>

CSS

@keyframes shake-slow {
  0% {
  -webkit-transform: translate(0px, 0px) rotate(0deg)
 }
  2% {
  -webkit-transform: translate(-1px, 8px) rotate(1.5deg)
 }
  4% {
  -webkit-transform
 
: translate(7px, 0px) rotate(-0.5deg)
 }
  6% {
  -webkit-transform: translate(8px, 8px) rotate(-3.5deg)
 }
  8% {
  -webkit-transform: translate(-4px, -3px) rotate(-1.5deg)
 }
  10% {
  -webkit-transform: translate(5px, 0px) rotate(-2.5deg)
 }
  12% {
  -webkit-transform: translate(-10px, -3px) rotate(-3.5deg)
 

 }
  14% {
  -webkit-transform: translate(5px, 7px) rotate(2.5deg)
 }
  16% {
  -webkit-transform: translate(8px, -8px) rotate(-1.5deg)
 }
  18% {
  -webkit-transform: translate(9px, -6px) rotate(-3.5deg)
 }
  20% {
  -webkit-transform: translate(3px, 1px) rotate(-0.5deg)
 }
  22% {
  -webkit-transform
 
: translate(6px, 8px) rotate(-2.5deg)
 }
  24% {
  -webkit-transform: translate(-8px, -1px) rotate(2.5deg)
 }
  26% {
  -webkit-transform: translate(7px, -10px) rotate(0.5deg)
 }
  28% {
  -webkit-transform: translate(7px, -4px) rotate(-3.5deg)
 }
  30% {
  -webkit-transform: translate(-2px, -6px) rotate(-1.5deg)
 }
  32% {
  -webkit-transform: translate(-1px, 0px) rotate(2.5deg)
 }
  34% {
  -webkit-transform: translate(6px, 2px) rotate(-0.5deg)
 }
  36% {
  -webkit-transform: translate(2px, 7px) rotate(1.5deg)
 }
  38% {
  -webkit-transform: translate(2px, -9px) rotate(1.5deg)
 }
  40% {
  -webkit-transform: translate(-5px, -1px) rotate(-0.5deg)
 }
  42% {
  -webkit-transform: translate(-8px, 2px) rotate(-0.5deg)
 }
  44% {
  -webkit-transform: translate(-4px, 3px) rotate(0.5deg)
 }
  46% {
  -webkit-transform: translate(-10px, -2px) rotate(-0.5deg)
 }
  48% {
  -webkit-transform: translate(1px, 9px) rotate(1.5deg)
 }
  50% {
  -webkit-transform: translate(6px, 7px) rotate(1.5deg)
 }
  52% {
  -webkit-transform: translate(-8px, 4px) rotate(0.5deg)
 }
  54% {
  -webkit-transform: translate(6px, -8px) rotate(-2.5deg)
 }
  56% {
  -webkit-transform: translate(2px, -9px) rotate(-2.5deg)
 }
  58% {
  -webkit-transform: translate(-2px, -9px) rotate(0.5deg)
 }
  60% {
  -webkit-transform: translate(2px, 7px) rotate(-0.5deg)
 }
  62% {
  -webkit-transform: translate(0px, 0px) rotate(-1.5deg)
 }
  64% {
  -webkit-transform: translate(-8px, -4px) rotate(-3.5deg)
 }
  66% {
  -webkit-transform: translate(6px, -6px) rotate(0.5deg)
 }
  68% {
  -webkit-transform: translate(0px, -7px) rotate(-2.5deg)
 }
  70% {
  -webkit-transform: translate(-8px, 1px) rotate(1.5deg)
 }
  72% {
  -webkit-transform: translate(-7px, 9px) rotate(2.5deg)
 }
  74% {
  -webkit-transform: translate(2px, -6px) rotate(-0.5deg)
 }
  76% {
  -webkit-transform: translate(5px, 1px) rotate(-0.5deg)
 }
  78% {
  -webkit-transform: translate(-1px, 5px) rotate(2.5deg)
 }
  80% {
  -webkit-transform: translate(3px, 7px) rotate(2.5deg)
 }
  82% {
  -webkit-transform: translate(-6px, -7px) rotate(-0.5deg)
 }
  84% {
  -webkit-transform: translate(-8px, 8px) rotate(-2.5deg)
 }
  86% {
  -webkit-transform: translate(5px, 3px) rotate(-2.5deg)
 }
  88% {
  -webkit-transform: translate(-4px, 3px) rotate(-1.5deg)
 }
  90% {
  -webkit-transform: translate(-5px, -4px) rotate(-3.5deg)
 }
  92% {
  -webkit-transform: translate(-5px, 4px) rotate(2.5deg)
 }
  94% {
  -webkit-transform: translate(-4px, -4px) rotate(-3.5deg)
 }
  96% {
  -webkit-transform: translate(-3px, 2px) rotate(-3.5deg)
 }
  98% {
  -webkit-transform: translate(2px, 1px) rotate(-0.5deg)
 }
 }

有興趣的小夥伴可以自己試試哦