Webデザインレビュー　【【公式】MOROCCAN BEAUTY（モロッカンビューティ）】編

【公式】MOROCCAN BEAUTY（モロッカンビューティ）

画像の上をグラデーションが通るのが綺麗。cssアニメーションでやっていそうだけど、なんかjsも走っているのかな。いろんな方向からランダムで流れてくるのをjsでやってるのかな。

テキストリンクをhoverした時もグラデーションがキラキラっと流れるのも素敵。

productsのレイアウトというか組み方が参考になる見せ方。

footerの余白の使い方というか組み方もバランスがいい。

目立ったあしらいはないがスタイリッシュで綺麗目でいい。

■日本語フォント
font-family:"Noto Sans JP",sans-serif;

■欧文フォント
font-family:Marcellus,serif;

Marcellus - Google Fonts

■参考(考察)

hoverでグラデーションが通っていくのかわいいなと思ったので、仕組みを見たのだけど、hoverするとクラスがついてそのクラスについたcssが反映される感じ。文字をspanで一つずつ包んでいる。

画像は「.webp」を使っているのが主。だけどarrowはsvgではなくpng。ロゴはsvgなのでarrowをpngにする意味があったのだろうな。