株式会社アプリコットデザイン株式会社アプリコットデザイン

tel.0120-622-835

営業時間/10:00〜18:00 定休日/土日祝日

tel.0120-622835

営業時間/10:00〜18:00 定休日/土日祝日

  • instagram
  • facebook

BLOGスタッフブログ

トップページ > ブログ > CSSのネタ帳~歪む角丸ひたすら回す~

CSSのネタ帳~歪む角丸ひたすら回す~

UPDATE : 2021.05.24

CATEGORY :
Sato
Sato

Sato

実際のwebサイトに使いどころがあるかどうかは全く分からない…

cssで歪む角丸をひたすら回す!






今回は「光の三原色」赤(Red)緑(Green)青(Blue)を重ねて回してみました。
じわじわ色が変化していきますよ

cssの「mix-blend-mode」プロパティで「screen」の効果を付け、光の三原色の加法混色を表現しています。
(IEは非対応です/2021.05)

ポイントは角丸(border-radius)の値をバラバラにすること。
そしてアニメーションの速度もそれぞれバラバラにしているので、重なり合う形がどんどん変化していくアニメーションになりました。

↓バラすとこうなっています



あまり激しくアニメーションさせるとさすがに目障りですが、
色合いやアニメーションの設定を工夫すればよいワンポイントになる…?かもしれないですね


▼歪む角丸編はこちら
~CSSのネタ帳~歪む角丸編


この記事を書いた人Who wrote this blog

Sato Tomoe

核心をツク鋭い感性を持つ
デザイナー系WEBエンジニア

RELATED POST関連する記事

CONTACTお問い合わせ

tel.0120-622835

営業時間/10:00〜18:00 
定休日/土日祝日

  • 信州ファームデザイン
  • 信州ファームマーケット
  • 株式会社POCKET
  • 株式会社Think for Design