cssでパックマン

cssスプライトの要領で実装します。ベンダープレフィックスは省略しています。

pop-uptext
  1. body{
  2. background-color:#333;
  3. color:#fff;
  4. }
  5. /*以下はパックのパクパクの動作*/
  6. .parapara {
  7. width:300px;
  8. height:301px;
  9. margin-bottom:3em;
  10. overflow:hidden;
  11. background:url(pack.png);
  12. animation:para 0.2s steps(2,end) infinite;
  13. margin:0 auto;
  14. }
  15. @keyframes para {
  16. 100% {background-position:-600px;}
  17. }
  18. /*以下は背景のドット*/
  19. .bg{
  20. background: url("bg.png") repeat-x scroll 0 0 #FFFFFF;
  21.             width:100%;
  22.             height:301px;
  23.             animation:scr1 infinite 30s linear;
  24.             
  25. }
  26. @keyframes scr1 {
  27.             0% {background-position:0 0;}
  28.             100% {background-position:1000px 0;}
  29. }
  30. /*以下は横移動の指定*/
  31. .pack {
  32. width:300px;/*幅の指定は大事です*/
  33. animation:pack infinite linear 10s;/*10sは10秒で下記のキーフレームアニメーションを行うという意味*/
  34. }
  35. @keyframes pack {
  36. 0% {transform:translate(130em,0);}/*キーフレーム0%の時パックは右画面の外・画面幅によって数値も違う！*/
  37. 100% {transform:translate(-30em,0);}/*キーフレーム100%の時パックは左画面の外・画面幅によって数値も違う！*/
  38. }

manakaa.com