cloud

つい先日アニメーションする雲を見たのですが、それはそれはなんともリアルな雲だったのですが、今日はそれとはまた違って可愛らしい雲を紹介したいと思います。

なんともポカポカ陽気な雰囲気がとても可愛らしいです。

では、早速ご紹介

Moving Clouds Animation

デモ/コード :Moving Clouds Animation

動きのほうは、上記のデモを見ていただくとして。 なんともゆったりと流れていく雲がホンワカしてきて和みます。

どのように出来てるのかなぁとじっくりとコードを見てみると @keyframesを使用してアニメーションを実現しています。

CSS

もっとホンワカな雰囲気を出してみたかったので、色を変えただけですがサンプル作ってみました。

対応ブラウザ Google Chrome / Safari 5+/ Firefox 5+/ Opera 11+/ InternetExplorer 10

@keyframes

サポートしているブラウザは以下です。

  • Firefox 5 +
  • IE 10 +
  • Chrome 6 +
  • Safari 5 +

基本的な構文

すべてのベンダー接頭辞を使用する必要があります。

CSS

もっと詳しく知りたい方はこちらをご覧ください。

ADVERTISEMENT

Author:

follow FacebookPage

当ブログがお気に召しましたら是非いいね!をお願いします!

Follow Me

閲覧頂きありがとうございました:)

Message

トップへ戻る