wordpressスマホ対応サイト・wpプラグイン・検索体験最適化・SNS・ 動画・bgmやテーマ曲を駆使して、リアルビジネスへの集客を達成するためのコラム!

   

WordPress屋のマルチメディアコンテンツ制作読んどけ☆コラム

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

      2019/05/27

こんにちは、管理人@SS_mshpです。

今回は、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が指定されています。

*アトリエSS・web制作サービスページに移動します。webリニューアル・ロゴ・記事・wordpress化などでお力添えできます。

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

  関連記事

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

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

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

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

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

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

【マテリアルデザインCSSフレームワーク】Materializeで、カッコいいビジネスサイト(静的HTML)を作る

今回は、フレームワークを使ったサイト制作を行ってみます。 利用するのは『 …

自社サイト(wpホームページ制作請負)のプチリニューアルしました(ヒーローヘッダー風&重なるメニュー)

今回は、ちょっと時間があったので、管理人のお仕事用サイト(wpホームペー …

(ヘッダーとか見出しの要素を)片方だけ丸い・台形・矢印などおしゃれデザインにできるCSSやってみた

今回はWebサイトでよくある『ガチガチ長方形とか正方形みたいな要素』では …

【html5 videoとcss】ヘッダーやメインビジュアル背景に動画を使ってインパクトを与える方法

今回は、サイト閲覧者にインパクトを与えやすい・最近のトレンドになっている …

bootstrapのcolクラスをとphp関数を使って、3列レイアウトとブログ2カラムを切り替える

今回は、1ドメイン・1サイトで『トップページやコーポレート部分は1カラム …

【ワードプレステーマカスタマイズ】勝手にヘッダーの追加CSSで入ってくるマージンを消したいんですけど

今回は、ワードプレスのテーマカスタマイズしてオリジナルデザインにするとき …

【海外CSSテク・before擬似要素】リストタグのマーカーだけ色・模様を変えて、カラフル・おしゃれにする方法

今回は、CSSをうまく使って、リストタグの見栄えを変えてみます。 よくあ …

スクロール後に変な位置に移動するタイトルをcssのpositionで直す(wp rootstrapテーマ)

今回は、管理人がワードプレスサイト作ってる時に、要素が変な位置に移動して …

有名サービス・企業ectで使われる印象的な色を、CSSで使えるカラーコードで覚えよう(色商標についても)

今回は、身近なサービスとかに使われている色って、カラーコードだとどうなっ …