7
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

CSS animation で遊び倒す - うねうねアニメーション -

Last updated at Posted at 2019-03-12

CSS animation day49 となりました。
本日は、border radius を使ったアニメーションを作ります。

#1. 完成版

ダウンロード (59).gif

See the Pen Interesting Sunset by hiroya iizuka (@hiroyaiizuka) on CodePen.

#2. なぜか?

デザインが素敵なウェブサイトを探していたところ、流体デザインのサイトに出会いました。
個人的に、2019年に大流行すると思っております。

その中に、このうねうねした動きを見つけました。
瞬く間に魅了され、一体これはどうやってできているか?と思ったのが、このCSS animationをやろうと思ったきっかけです。

#3. 参考文献
9 Elements: CSS Border-Radius Can Do That?
border-radius
うねうねジェネレーター
#4. 分解してみる

❶.
マークアップしましょう。

index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <div class="container">
      <div class="circle"></div>
    </div>
  </body>
</html>

styles.scss
body {
  margin: 0;
  padding: 0;
  background: #000;
}

.container {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.circle {
  width: 300px;
  height: 300px;
  background: linear-gradient(90deg, #00c6ff, #0072ff);
  border-radius: 50%;
}

スクリーンショット 2019-03-12 9.13.44.png

普通の円ができました。


❷.
border-radius をいじっていきましょう。

参考文献の、うねうねジェネレーター を使います。

スクリーンショット 2019-03-12 9.18.47.png

自分で好きな形に点を動かしってカスタマイズし、border-radius を設定しましょう。

styles.scss
.circle {
  width: 300px;
  height: 300px;
  background: linear-gradient(90deg, #00c6ff, #0072ff);
  border-radius: 48% 69% 56% 53% / 47% 73% 43% 49%;
}

スクリーンショット 2019-03-12 9.24.17.png

いい感じの形になりました。

❸.
アニメーションをつけましょう。

styles.scss

.circle {
          ・・・
  animation: move 8s linear infinite;
}

@keyframes move {
  50% {
    border-radius: 80% 20% 59% 41% / 72% 21% 79% 28%;
  }

  75% {
    border-radius: 100% 69% 100% 83% / 68% 99% 53% 93%;
  }
}

ダウンロード (59).gif

参考文献のWeb サイトのような動きになりました!
興味深いですね。。

❹.
最後に、中央に景色を表示しましょう。

index.html
 <body>
    <div class="container">
      <div class="circle">
        <div class="image"></div>
      </div>
    </div>
  </body>
styles.scss
.image {
  width: 300px;
  height: 300px;
  background: url("../img/sunset.png");
  background-size: cover;
  background-position: 35% center;
}

See the Pen Interesting Sunset by hiroya iizuka (@hiroyaiizuka) on CodePen.

border radius をいじるだけで、簡単に素敵な effectを作れますね。
CSS は本当に奥が深いです。
それでは、また明日〜

7
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?