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

文字列を違う文字列に滑らかに変化させるモーフィングをCSSで実装するテクニックを紹介します。 モーフィングは人が別の人に変化するのを映画やテレビで見かけますが、文字ならCSSだけでそれっぽく簡単に実装できます。 仕組みは、CSSのblurとcontrastで文字をぼかして変化の間をつなげています。 実際の動作は、下記でお楽しみください。 「Run Pen」をクリックすると動作します。「0.5x」にするとちょうどいいかも。 See the Pen CSS morphing by Amit Sheen (@amit_sheen) on CodePen. 実装コードは、下記の通りです。 デモでは7つのワードをモーフィングしています。ワードの数は増減もOKで、その際はCSSを少し変更します。 <div class="morphing"> <div class="word">Pure&nbsp;CS

[coliss]

CSSで文字列を違う文字列に滑らかに変化させるモーフィングを実装。

[spark7]

ブラーとコントラストでそれっぽくなるのね。 アウトライン取ったり難しく考える必要なしと。

[ishiduca]

出典どこだっけ？

[anpaku]

便利になりましたね。

[adsty]

CSSで文字をぼかして変化の間をつなげる仕組み。

[Helfard]

面白い！

[hirorock]

へー面白い blurをAnimationさせて実装

[Keisuke69]

すご。CSSだけでこんなの出来るの😳

[yoh596]

なるほど、アイディアだね。

[Shinwiki]

せんでええ

[for-my-internet-demo]

独自シェーダーいりそうでいらないんだ。なんかすごい

[monyurin]

「css3]