CSS3のanimation(アニメーション)で春うららかな桜を降らせてみた

CSS3のanimation(アニメーション)で春うららかな桜を降らせてみた

はやち

はやち

どうもですよ、はやちですよ✌(´ʘ‿ʘ`)✌

めっきり春ですね、ほかほかして春はなんとなくねむいです( ˘ω˘)クソネミ
花を見に散歩したいところですが買い込んだゲームをクリアしなきゃいけないので、もうしばらくインドア生活になりそうです( ˘ω˘)

そんなのはどうでもいいですね。
今回は春らしくCSS3のanimationで桜を降らしてみようと思います( ˘ω˘)☝


【こちらもおすすめ】
「CSS3とjQueryでオリジナル画像のスプライトアニメーションを実装する方法」

実装方法

それでは実装方法をご紹介いたします( ˘ω˘)☝

画像の用意

まずは降らせる用の桜の画像を用意します。
今回はこんな感じなの用意しました( ˘ω˘)☞sakura

html

マークアップはこのようになります。
降らせたい桜には、あらかじめdivを複数用意します( ˘ω˘)☝

<section id="sakura">
    <div class="inner">
        <div class="flake1"></div>
        <div class="flake2"></div>
        <div class="flake3"></div>
        <div class="flake4"></div>
        <div class="flake5"></div>
        <div class="flake6"></div>
        <div class="flake7"></div>
        <div class="flake8"></div>
        <h2>Sakura</h2>
    </div>
</section>

css

設定しているスタイルをご紹介します( ˘ω˘)☝

アニメーションの初期設定

動かす前のアニメーションを設定します( ˘ω˘)☝

section .inner div {
    opacity: 0;
    -webkit-transform-origin: 0px 0px;
    -ms-transform-origin: 0px 0px;
    transform-origin: 0px 0px;
    -webkit-animation-name: Drop;
    animation-name: Drop;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

桜の設定

桜を設定します。
一部のdivはbackground-sizeで小さくしてあげるとより遠近感がでます( ˘ω˘)☝

#sakura .inner div {
    position: absolute;
    display: block;
    width: 10px;
    height: 15px;
    background: url("../../images/sakura.png") no-repeat;
}

#sakura .inner div.flake2,
#sakura .inner div.flake4,
#sakura .inner div.flake6,
#sakura .inner div.flake8 {
    background-size: 5px 6px !important;
}

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

はやち
はやち フロントエンドエンジニア / 林 佳代子

フロントエンドエンジニアのはやちです( ˘ω˘)☝ 以前までは顔隠しておりましたが思い切ることにしました…。 相変わらず顔文字乱舞ですがブログもコーディングも楽しくやっていこうと思います✌(´ʘ‿ʘ`)✌ 今までに作ったDemoたちはGithubにて公開しております!よろしければ是非( ˘ω˘)☞三☞シュッシュッ

このメンバーの記事をもっと読む
デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL