スクリーンセーバーみたいな回転する文字を作ってみた

windowsとかでよくみるスクリーンセーバーをHTMLとCSSで作ってみました。

常にブラウザの中央に回転する「Windows 10」を配置。

ソース

<p>Windows 10</p>

body {
  background: #000;
  position: relative;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
}

p {
  color: #fff;
  font-size: 50px;
  display: inline-block;
  animation: spin 5s infinite linear;
  position :absolute;
  top: 50%;
  left: 50%;
}

@keyframes spin {
  from {
    transform: translate(-50%,-50%) rotateY(0deg);

  }

  to {
    transform: translate(-50%,-50%) rotateY(360deg);

  }
}

解説

htmlのテキストは好きな文字や画像などを入れてください。

CSSですが、本物のスクリーンセーバー同様、背景は黒、文字は白に設定。文字サイズなども適当な大きさに指定。
その後、position指定を使い、上下中央に文字を配置。この時、body要素をウィンドウサイズいっぱいと同等になるようwidthやheightを指定。

通常上下中央であればp要素にtransform: translate(-50%,-50%);を指定することでピッタリど真ん中なのですが、回転するアニメーションでtransformを使うので一時保留。

最後にアニメーションの処理をするため@keyframesを上の通り記述。このとき上下中央にさせるために必要なtranslate(-50%,-50%)も一緒に書く。

まとめ

予想していたよりも簡単に作成することができました。
普段アニメーションはあまり使わないので、もっといろいろ作成してみたいですね。

おそまつ！