TOPブログ【css】テキストにマスクをかけて途中から色を変える + 1文字ずつ動かすアニメーション [clip-path][mix-blend-mode] 【css】テキストにマスクをかけて途中から色を変える + 1文字ずつ動かすアニメーション [clip-path][mix-blend-mode] 更新日:2019/10/04 タイトルが上手くまとめられなかったのですが…そのままの内容です! 写真の上に被っているテキストだけ色が変わっているデザインのコーディングを 依頼されたことがあって(最終的には別のデザインになりましたが)、 もしアニメーション付けるならどうコーディングするかな?と考えた結果のサンプルです。 mix-blend-mode を併用することで、アニメーションによるテキストの色の変化がより印象的に。 作業内容 ベースの構成[css/clip-path] 写真に被っているテ
![【css】テキストにマスクをかけて途中から色を変える + 1文字ずつ動かすアニメーション [clip-path][mix-blend-mode] | 東京のホームページ制作 / WEB制作会社 BRISK](https://cdn-ak-scissors.b.st-hatena.com/image/square/ec530d351b196c375193453700168d93a9ad8a84/height=288;version=1;width=512/https%3A%2F%2Fb-risk.jp%2Fwp%2Fwp-content%2Fuploads%2F2019%2F10%2Feyecatch02.gif)