Help us understand the problem. What is going on with this article?

CSSだけでハロウィン気分の404ページ作った

前回アンパンマンをCSSでお絵描きしました。
CSSだけでお絵描き(CodePen)

今までCSSアニメーションをあまり使ったことがなく、使ってみたかったので
勉強がてら、CodePenで1つ作ってみました。
今回も記録用です。

ハロウィン気分の404

CSSで404ページを作りました。画像は使用してないです。
ページがないのはいたずらされたってことにすればいいじゃない...というコンセプトで
※スマホで見るとひどいのでオススメしないです( ;∀;)...

See the Pen CSS 404page Halloween by Deren (@deren2525) on CodePen.


CSSアニメーションを使用したところ

今回4つのモジュールにアニメーションを加えました。
全部シンプルです。

以下、アニメーション部分のみ抜粋したものを書きます。

コウモリ

コウモリの動きです。上下移動をループしています。

style.scss
.bat {
  animation: bat 5s linear infinite alternate;
}

// コウモリの動き
@keyframes bat {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-30px);
  }
}

以下、コウモリの羽の動きです。少し回転をつけました。
右の羽と左の羽で分けています。

style.scss
.bat {
  &__right-wing { // 右の羽
  animation: bat 5s linear infinite alternate;
  }
  &__right-wing { // 左の羽
  animation: bat 5s linear infinite alternate;
  }  
}

// 右の羽
@keyframes bat-right-wing {
  0% {
    transform: rotateZ(0);
  }

  100% {
    transform: rotateZ(-20deg);
  }
}

// 左の羽
@keyframes bat-left-wing {
  0% {
    transform: rotateZ(0);
  }

  100% {
    transform: rotateZ(20deg);
  }
}

おばけ

右左を行ったり来たりしています。ある程度進んだら折り返します。
びみょーーに上にも上がっています。わずかですが

style.scss
//おばけの動き
.ghost {
  animation: ghost 20s linear infinite;
}

@keyframes ghost {
  0% {
    transform: translateX(0) rotateY(0);
  }
  45% {
    transform: translateX(190px) translateY(20px) rotateY(0);
  }
  50% {
    transform: translateX(200px) translateY(10px) rotateY(180deg);
  }
  95% { 
    transform: translateX(10px) translateY(10px) rotateY(180deg);
  }
  100% {
    transform: translateX(0) rotateY(0);
  }
}

館の窓

館の窓の色が微妙に変わるようにしています。

style.scss
$BG_WINDOW: #F6E833;
$BG_WINDOW_MODIFY: #F0DB90;

// 窓の色
.house {
  &__window {
    animation: window 3s linear infinite;
  }
}

@keyframes window {
  0% {
    background-color: $BG_WINDOW;
  }

  100% {
    background-color: $BG_WINDOW_MODIFY;
  }
}

ゆらゆら揺らしました。3つの墓がバラバラに揺れるようにそれぞれに時間を変えています。

style.scss
.grave {
  animation: grave 3s linear 3s infinite; // 大きい墓
  &--mini {
    animation: grave 2s linear 3s infinite; // 小さい墓
    &:nth-of-type(2) {
      animation: grave 3.5s linear 3s infinite; // 小さい墓2つ目
    }
  }
}

@keyframes grave {
  0% {
    transform: rotateZ(0);
  }

  25% {
    transform: rotateZ(10deg);
  }

  50% {
    transform: rotateZ(0);
  }

  100% {
    transform: rotateZ(0);
  }
}

所感

シンプルなアニメーションですが、シンプルでもなんか動いていると嬉しくなっちゃいますね。次は複雑なものにもチャレンジしたいです。

1日で作ったわりにはなかなかの出来で満足したのですが、ハロウィンはもうすぐ終わりますね。短い命。少し悲しい。
次はクリスマスでしょうか

追記(2018/11/01)

ハロウィンおわっちゃった!!!!

deren2525
みならいフロントエンジニアのデレンが勝負をしかけてきた! CodePenによく出没している。 記事の内容は所属組織とは関係ありません🐶
https://derennoportfolio.firebaseapp.com/
fixer-inc
Microsoft Azureの24/365フルマネージドサービス「cloud.config」を中核とするクラウドソリューションを提供。最先端のテクノロジーで、お客様の新たな挑戦を成就します。
https://www.fixer.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした