CSSの@keyframesとanimationでポケモン捕獲っぽい画面を作ったよ

6639 ワード
CSS HTML animation keyframes pokemon HTML テキストリンク

HTMLとCSSの@keyframesとanimationを使ってポケモン捕獲画面のようなボールが左右に動くローディング画面を作ってみました。

CSSのkeyframesとanimationについて

@keyframesはアニメーションの開始から終了までの動きをカスタマイズできるCSSの文法です。
animationプロパティはHTML要素にどのアニメーションを適応するか、アニメーションの時間、繰り返し回数はどを指定することができます。

ソースコード

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- ブラウザのCSSをリセット -->
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/reset/reset-min.css">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class="loader">
      <img src="モンスターボール画像のパス" alt="">
    </div>
  </body>
</html>
styles.css
@keyframes pokemonGet {
    0% {
      transform: rotate(0deg);
      left: 0;
    }
    20% {
      transform: rotate(-30deg);
      left: -10px;
    }
    40% {
      transform: rotate(0deg);
      left: 0;
    }
    60% {
      transform: rotate(30deg);
      left: 10px;
    }
    80% {
      transform: rotate(0deg);
      left: 0;
    }
}

.loader {
  text-align: center;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index:10001;
  opacity: 0.95;
  background-color: #555;
}

.loader img {
  opacity: 1;
  width: 100px;
  display: inline-block;
  position:relative;top:
  calc(50% - 50px);
  animation-name: pokemonGet;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}