windowsとかでよくみるスクリーンセーバーをHTMLとCSSで作ってみました。
常にブラウザの中央に回転する「Windows 10」を配置。
![sample.gif](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F661092%2F0ab450bb-17c6-099e-0c6e-26a4b353b7ae.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=a412ff7db658afbbc56c69ab7c278ae5)
ソース
index.html
<p>Windows 10</p>
style.css
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%)
も一緒に書く。
まとめ
予想していたよりも簡単に作成することができました。
普段アニメーションはあまり使わないので、もっといろいろ作成してみたいですね。