webコンテンツを徹底強化!WordPressサイト制作とプラグイン&テーマ情報・メンテ/エラー対応から、PHP/CSS/javascript、動画・音・イラスト等制作まで扱うコラム
マルチメディアコンテンツ制作読んどけ☆コラム

【CSS3でおしゃれなサイトに】画像(星空)をくるくる回す(キーフレーム・transform:rotateなど)

      2021/02/16

今回は、CSSを使って、動きのあるサイトを作ってみたいと思います。 絵はイラストacさんからお借りしました。CSS3では、カンタンなアニメーションを実装できるので、サイトに動きを出すことができます。ここでは『CSSでくるくる回す』というのをやってみたいと思います。

CSSでくるくる回すとき、参考になったサイト

とりあえず、(動画ではガンガンやってるくせに笑)CSSで要素をくるくるまわしたことは無かったので、検索しまくって、以下のサイトを見つけました。

これらのサイトを参考に、コードを書いてみました。

CSSで星空の画像をくるくるまわしてみる

実装例

とりあえず、CSS部分は直しちゃったので、このサイトにつけたときのスクリーンショットをとっておきました(MP4です)。星空の画像をここのdiv内において、くるくる回す感じです。これはすべて画像ファイルとCSSでできています。

くるくる回すときの、CSSのコード

■CSS .rotate{ width: 480px; height: 480px; margin:0 auto; filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; background-image:url("/music-creation/wp-content/uploads/20171107zimage4144.png"); background-size: cover; animation-name: twinkle; animation-duration:60s; animation-timing-function: linear; animation-iteration-count: infinite; } @keyframes twinkle { 0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);} }

■HTML <div class="rotate"> </div>

ちょっとクラス名とプロパティ名がカブってややこしいんですけど(rotateとか)、こんな感じでやってみました。width&heightでサイズ・margin:0 autoで真ん中配置・filter:alphaで透過して薄く・background-imageが背景星空画像・background-size: coverでその要素全体に画像を広げました。

回転する部分に関するCSSについて

  • animation-name(そのアニメーションの名前・星だからtwinkleに笑)
  • animation-duration(長さ・60sだと60秒で回転)
  • animation-timing-function: linear(一定・ベジエ曲線みたいに変化もできるそうです)
  • animation-iteration-count: infinite(数値で再生回数指定、infiniteだとずっと回る)
  • keyframes twinkle(キーフレームで、さっき指定したアニメ名前を指定)
  • transform: rotate(0%回転スタート)
  • transform: rotate(100%で、360度回転)

いっこいっこプロパティを分けると、こんな説明になるかなと。

注意点

divというふうにあってここに背景が指定してありますが、背景だからといってこのdiv内に文字を入れてしまうと、文字も一緒にくるくる回ってしまいます。なのでめちゃくちゃ読みにくくなります。

回転するのは背景だけにし、文字は動かしたくない場合は、文字はこのdivの外に置き、z-indexで回転する背景は下・文字は上のような指定が必要になります。背景がくるくる回っていて、かつ上の文字は動かないサイトでは、z-indexが指定されています。


【カテゴリ】 - CSS
【タグ】 -

  関連記事

CSSのみで超軽量な、クリック開閉式ボックスのつくりかた【FAQやよくある質問に・jQuery/javascript不使用】

今回は、管理人がリメイクしていたサイトで、『CSSだけでクリック ...

【CSS】横並びメニューで、最初だけボーダー無しとかにしたい場合は?→擬似クラスfirst-childを、効かない例も紹介

今回は、『メニューなどで、最初の要素だけボーダー無しにしたい』み ...

cssフレームワーク利用サイトで、意図しないpaddingなどを消すには?→同クラス上書き(例:bootstrap)

今回は、CSSフレームワークなどを使ってサイトを構築していると、 ...

【CSSエディット】『&nbsp;』みたいな空白スペース・改行タグでレイアウト調整が良くない理由

今回は、管理人がこのサイト(よんどけコラム)のCSSを調整してい ...

【CSS・hover/transition/rotateでアニメーション】jquery無し・アイコン画像や要素をくるっと回転させる機能を実装

今回は、当サイトでもよく取り上げているCSSを使ったアニメーショ ...

【CSSオンリー・超軽量】JavaScriptすら使わない!CSSだけで動くスライダー作ってみた(PC向け横長レイアウト)

今回は、一般的には『クソ重い』とされる、スライダー・スライドショ ...

【jQuery不使用・軽量でお洒落】CSSのみで、タップでふわっと広がって透けるスマートフォンメニューを実装

今回は、CSSのみで動作する、軽量でお洒落なスマートフォンメニュ ...