CSS animation day49 となりました。
本日は、border radius を使ったアニメーションを作ります。
#1. 完成版
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. 分解してみる
❶.
マークアップしましょう。
<!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>
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%;
}
普通の円ができました。
❷.
border-radius をいじっていきましょう。
参考文献の、うねうねジェネレーター を使います。
自分で好きな形に点を動かしってカスタマイズし、border-radius を設定しましょう。
.circle {
width: 300px;
height: 300px;
background: linear-gradient(90deg, #00c6ff, #0072ff);
border-radius: 48% 69% 56% 53% / 47% 73% 43% 49%;
}
いい感じの形になりました。
❸.
アニメーションをつけましょう。
.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%;
}
}
参考文献のWeb サイトのような動きになりました！
興味深いですね。。
❹.
最後に、中央に景色を表示しましょう。
<body>
<div class="container">
<div class="circle">
<div class="image"></div>
</div>
</div>
</body>
.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 は本当に奥が深いです。
それでは、また明日〜