CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのtext-shadowプロパティをアニメーション化する方法

CSSでtext-shadowプロパティをアニメーション化するには、@keyframesルールとanimationプロパティを組み合わせます。以下のサンプルコードをブラウザで実行すると、テキストシャドウが時間の経過とともに滑らかに変化していく様子を確認できます。

サンプルコード

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            height: 200px;
            background-color: orange;
            border: 2px solid blue;
            animation: myanim 3s infinite;
         }
         @keyframes myanim {
            30% {
               text-shadow: 10px 20px 30px blue;
            }
         }
      </style>
   </head>
   <body>
      <h1>CSS text-shadow property</h1>
      <div>
         This is demo text.
         This is demo text.
         This is demo text.
         This is demo text.
         This is demo text.
         This is demo text.
         This is demo text.
         This is demo text.
         This is demo text.
         This is demo text.
         This is demo text.
      </div>
   </body>
</html>

コードのポイント

  • animation: myanim 3s infinite; … 3秒かけてアニメーションを実行し、無限に繰り返すよう指定しています。
  • @keyframes myanim … アニメーション全体の30%の時点でスタイルを切り替えることで、影が徐々に移動・拡大していく効果を作り出しています。
  • text-shadow: 10px 20px 30px blue; … 水平方向に10px、垂直方向に20pxずらした位置に、ぼかし半径30pxの青い影を描画します。

このようにtext-shadowは@keyframes内で値を変化させるだけで簡単にアニメーションさせることができ、ボタンや見出しなどの装飾表現に幅広く活用できます。

  1. CSSのtext-justifyプロパティとは？使い方と各値の解説

    text-justifyプロパティとは CSSのtext-justifyプロパティは、text-alignプロパティにjustify(両端揃え)が指定されている場合に、テキストをどのような方法で均等割り付けするかを制御するためのプロパティです。単語間のスペースで調整するか、文字間のスペースで調整するかなどを細かく指定できます。 構文 text-justify: auto | inter-word | inter-character | none | initial | inherit; プロパティの値一覧 auto — ブラウザが最適な揃え方を自動的に判断します(既定値)。 inter-

  2. CSSのrightプロパティとは？構文と使い方を実例付きで解説

    CSSのrightプロパティは、positionが指定された要素の水平方向の位置を設定するために使用します。基準となる包含ブロックの右端から、要素の右端までの距離を指定できます。 なお、rightプロパティはpositionプロパティがstatic以外（relative・absolute・fixed・sticky）のときにのみ有効になる点に注意してください。 構文 right: auto|length|initial|inherit; 指定できる値 auto … 初期値。位置の計算をブラウザに任せます。 length … pxやemなどの単位で距離を指定します。負の値も指定可能です。 ini