ちきちこちゃんねる

ITや経済、ゲームなどの情報をまとめた、息抜きできるメディアです。

*

酒に合う!Amazonで人気のおすすめおつまみ2選!

酒に合う!Amazonで人気のおすすめおつまみ2選!

  2015/06/06    家電・ガジェット

酒に合う、Amazonで人気のおすすめおつまみを2選してみました! けんこうかむかむは知っている方もいるでしょうか? 辛みがアクセントになっている、イカ一匹まる …

スポンサーリンク

Writer


この記事をシェア

本日の人気記事

【CSS3】文字や画像などの要素を回転アニメーションにする

,

   

css3-animation

今までは、アプリやウェブサイトなどのローディング画面に、アニメーションgif画像を使っていました。

しかし、CSS3のアニメーションを使えば動きもスムーズに、手軽に実装することができます。

それ以外にも、CSSなので文字や画像、アイコンフォントなど様々な要素をクルクル回転させることができます。

スポンサーリンク

 

文字を回転アニメーション

例えば”回転”という文字の要素に、

というプロパティを付加します。

上記のコードをスタイルシートに記述するだけで回転します。

回転

CSS3から新しく追加された、「animation」と「transform」を利用しています。

アニメーションの処理は、「keyframes」という機能を利用しています。

注意 widthとheightを指定してあげないと回転が大きくなったりします。回転を速くしたい場合は、spinの1.5sの部分の数字を小さくすれば小さくするほど回転が早くなります。

 

画像を回転アニメーション

今度は画像を回転アニメーションするとどうなるかをやります。

えびすをくるくる

【CSS3】文字や画像などの要素を回転アニメーションにする

じゃあえびすを、

プロパティを付加して回転させてみましょう。基本コードは先ほどと同じです。

css3animation (2)

雑な切り抜きでポケモンのイシツブテみたいになっちゃった。

しかも画像でかすぎてすげー邪魔くさい。

注意 画像を回転させる場合は、widthもheightも画像によってすでに大きさが決まっているので記述する必要なしです。

高速えびす

では、先ほど紹介した方法でえびすを高速に回してみましょう。

css3animation (3)

いやー、良い笑顔ですねー。

ちなみに、

このようにすればマウスをホバーしたときのみ、回転させることができます。

このサイトのトップページの記事一覧の画像と、サイドバーの人気記事の画像がそうですね。

CSS3での回転アニメーションなので、アイコンフォントも回せます。サイト上部のPR記事の★がそうですね。

 

まとめ

CSS3最高ですね。

未だにgif画像を使ってアニメーションをさせているアプリやウェブサイトが多いので、ぜひCSS3で実装することをオススメします。

何より楽ですし、つまらないサイトに動きをつけたり、ふざけたサイトを作るのに適しています。

この記事を書いた人

M.Nishi管理人
ファッションが好きで、ライフスタイルなどの情報に強いです。
夏はテニス、冬はスノーボードをするアクティブ系インドア人間。

スポンサーリンク