CSSだけでモーフィングを実装できる!文字列を違う文字列に滑らかに変化させるCSSのテクニック

文字列を違う文字列に滑らかに変化させるモーフィングをCSSで実装するテクニックを紹介します。

モーフィングは人が別の人に変化するのを映画やテレビで見かけますが、文字ならCSSだけでそれっぽく簡単に実装できます。

CSSだけでモーフィング

仕組みは、CSSのblurcontrastで文字をぼかして変化の間をつなげています。
実際の動作は、下記でお楽しみください。
「Run Pen」をクリックすると動作します。「0.5x」にするとちょうどいいかも。

See the Pen
CSS morphing
by Amit Sheen (@amit_sheen)
on CodePen.

実装コードは、下記の通りです。
デモでは7つのワードをモーフィングしています。ワードの数は増減もOKで、その際はCSSを少し変更します。

7つのワード版のCSSです。
ワードの数やスピードを調整できますが、次のSCSSで変更する方が簡単です。

上記のSCSSです。
スピードは$speed: 16s;を、ワード数は$wordCount: 7;の数値を変更します。

sponsors

top of page

©2021 coliss