Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

はじめに

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

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などで装飾しても面白い実装ができそうですね。
ただ、実務に向いているかというと、わかりませんが。。。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away