HTML
CSS
CSS3

【CSS】CSSでうにうにした、まん丸を作ってみる

はじめに

うにうにしたまん丸ってどうやって作ってますか?
こういうやつです!

munimuni.gif

そもそも、そんな機会ないんじゃないかという話は置いてといて、
SVGを使ったり、canvasを使ったり色々あると思いますが、今回はCSSのみで それっぽいものを作りたいと思います。

DEMO

完成品

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-functionlinearにするとなめらかになります。
※別にborder-topでなくてもOK!

この上でbackground-colorborderの色に合わせれば、
それっぽい 実装ができます。
単純に400px(設定したいheight)に10pxはみ出しているだけですね。
box-sizing: border-box;とかしちゃうと、うにうにしなくなります。

まとめ

animation-durationの値を変えたり、box-shadowなどで装飾しても面白い実装ができそうですね。
ただ、実務に向いているかというと、わかりませんが。。。