CSSのみでテキストを「飾る・動かす」おしゃれなエフェクト10

• 作成：2016/11/28
• 更新：2016/11/28
• Web制作 >

ここ最近画像や動画を使ったエフェクトも増えてきましたが、シンプルにテキストだけ動かしたりデコレーションすると結構洗練された見え方になります。もちろん画像や動画の上に動きのある文字を配置しても面白いです。ということで今回はCSSのみで実現するテキストを動かしたり飾り付けたりするコードをまとめました。

エンジニア速報は Twitter の@commteで配信しています。

透過処理で文字のくり抜き

background-clipプロパティは背景の範囲（ボックスモデル・ボーダーボックス・パディングボックス）に表示するか指定します。このプロパティは文字で背景を切り抜くことが可能ですが、-webkit-background-clip: text;と-webkit-text-fill-color: transparent;
指定することによって文字が透明になり、文字下の画像が見え、背景をくり抜いたような形を表現できます。

.foo {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

-webkit-background-clip:text CSS effect

スクイグル

スクイグル（squiggle - ドナルド・ウィニコットが提唱した芸術療法の一つ。なぐり描き法 | 医療法人板倉医院）を表現。なぐり描いたような、クネクネ曲がったアニメーション。filterプロパティでSVGのfilterで定義した設定を使いフィルタをかけています。

.foo {
   filter: url(#squiggly-1);
}

Squiggly

アップダウン

keyframesに transform: translateY();を設定し上下にテキストを動かしています。translateY()関数でY方向の移動を指定するだけ。

@keyframes change {
  0%, 12%, 100% {transform:translateY(0);}
  17%,29% {transform:translateY(-25%);}
  34%,46% {transform:translateY(-50%);}
  51%,63% {transform:translateY(-75%);}
  68%,80% {transform:translateY(-50%);}
  85%,97% {transform:translateY(-25%);}
}

Text animation

スモーキー

テキストを煙のようなエフェクトを使いフェードさせる珍しい動き。各文字をspanで囲う必要がありますが、文字に移動・変形・回転・傾き・縮尺を指定して違和感なく文字を消してます。

transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skewX(70deg) scale(1.5);

Smoky Text

バウンド・クラッシュ

文字どうしをクラッシュ・バウンドさせるエフェクトです。transform: scaleYで縦方向へ縮尺、transform-originで原点を指定し、滑らかにバウンドしているように見えます。

Bounce css Animation - v2

フェード

transform: scaleで拡大・縮小、後はtext-shadowとopacityで滑らかにフェードさせています。

CSS3 Text Animation Effect

カウントダウンタイマー

一見するとどうやってんだろうと思うのですが、数値に一つ一つspanを振り、各桁にアニメーションの長さを指定するanimation-durationを設定し数値の動きに変化をつけています。

CSS-Only Countdown Clock

マスク

こちらはmask-imageを使ってマスクをかけています。ちなみにmask-sizeは表示サイズ、mask-clipは表示エリア。

-webkit-mask-image: url(img/mask.png);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;

Text with Texture

ブレンド

mix-blend-modeプロパティを使い、グラデーションとテキストをブレンドしています。

CSS Gradient Text in Firefox

mix-blend-modeの値の違いはこちらで確認できます。

シャドウ

text-shadowを使ったパターン4種。text-rendering: optimizeLegibility;で文字のレンダリングを行ってます。

CSS3 text-shadow effects