はじめに
うにうにしたまん丸ってどうやって作ってますか？
こういうやつです！
そもそも、そんな機会ないんじゃないかという話は置いてといて、
SVGを使ったり、canvasを使ったり色々あると思いますが、今回はCSSのみで それっぽいものを作りたいと思います。
完成品
See the Pen border by kizuku sengoku (@sengoku) on CodePen.
マークアップ
HTML
index.html
<body class="bg">
<div class="border"></div>
</body>
これだけ
CSS
style.css
/* センターに寄せているだけなので、参照しなくてOK */
.bg {
height: 100vh;
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
}
.border {
width: 400px;
height: 400px;
border-radius: 50%;
border-top: 10px solid #fff;
background-color: #fff;
animation-name: spin;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
/* 回転するkeyframe */
@keyframes spin {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
構成
See the Pen border-02 by kizuku sengoku (@sengoku) on CodePen.
border-topでうにうにの外側を作ります。
次に、keyframeで回るアニメーションを作ります。
この時、animation-timing-functionをlinearにするとなめらかになります。
※別にborder-topでなくてもOK!
この上でbackground-colorをborderの色に合わせれば、
それっぽい 実装ができます。
単純に400px(設定したいheight)に10pxはみ出しているだけですね。
box-sizing: border-box;とかしちゃうと、うにうにしなくなります。
まとめ
animation-durationの値を変えたり、box-shadowなどで装飾しても面白い実装ができそうですね。
ただ、実務に向いているかというと、わかりませんが。。。