Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
54
Help us understand the problem. What is going on with this article?
@sengokukun

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

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

54
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  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

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
54
Help us understand the problem. What is going on with this article?