流行りの流体シェイプを作ろう

11111

こんにちは、ウェブラボ技術メモです。

今回は今年流行している、「流体シェイプ」についてご紹介します。

 

■流体シェイプの使われているWebサイト

2019年に流行するWebデザインの手法に流体シェイプがあるのはご存知ですか?

以下のWebサイトでは流体シェイプが使われているWebサイトをまとめているのでぜひ参考にして見てください。

参考Webサイト:流体シェイプを使ったWebデザインの魅力と参考になるWebサイト

 

■流体シェイプの作り方

Webサイトでは、SVGを使って動かす方法が使われていますが、難しいのでまずは

CSSとJSで作る方法をご紹介します。

参考Webサイト:【CSS】【JavaScript】流体アニメーションを作りたい

 

[HTML]

1、CSSでベースの色を決め、シェイプを作ります。

2、CSSでグラデーションをつけます。
(今回は球体なので中心が薄い色、外側に向かってだんだん濃くなるように設定します。)

3、CSSで回転させます。

4、JSでMath.round()関数を使って、角丸のサイズをランダムに変更します。

 

試しにデモを作ってみました!

デモページはこちら

新しいデザインを取り入れる際には是非試して見てくださいね!

  • このページを共有する