CSSのShape-Outside属性を使用して、テキストを徐々に短縮するディスプレイ効果を実現する方法は？

CSS Shape-Outsideプロパティは、テキストフェージング効果を実現します

この記事では、一意のWebページのテキスト表示手法を紹介します。テキストの長さを徐々に短くし、創造的なWebページやアートディスプレイに非常に適した動的な視覚効果を作成します。

これは、CSSのshape-outsideプロパティを通じて実現できます。 shape-outside使用すると、テキストが囲む非長方形の形状を定義し、テキストフェージングの視覚効果をもたらすことができます。

次の例はshape-outsideを使用してこれを達成する方法を示しています。

 。容器 {
  幅：300px;
  高さ：300px;
  位置：相対;
}

。形 {
  幅：100％;
  高さ：100％;
  バックグラウンドカラー：＃f0f0f0;
  クリップパス：ポリゴン（0 0、100％0、100％100％、0 100％）; /*調整可能な形状*/
  シェイプアウトサイド：ポリゴン（0 0、100％0、100％100％、0 100％）; /*クリップパスと一致する*/
  フロート：左;
}

。文章 {
  マージン左：30px;
  フォントサイズ：18px;
}

<div class="container">
  <div class="shape"></div>
  <div class="text">
    これは、徐々に長さが短くなるサンプルテキストです。これは、徐々に長さが短くなるサンプルテキストです。
  </div>
</div>

コードでは、 clip-pathとshape-outside属性がポリゴンの形状を共同で定義します。ポリゴンの頂点座標を変更することにより、テキストラッピングの形状を調整して、テキストフェージングの効果を制御できます。 shape-outsideの値は、効果の精度を確保するためにclip-pathと一致する必要があることに注意する必要があります。

この効果をより深く調査するために、 polygonの座標値を変更してさまざまな形状を作成して、さまざまなテキストフェージング効果を実現してみてください。たとえば、より豊かな視覚効果のために、サークルや曲線などのより複雑な形状を使用してみることができます。重要なのは、 polygon値を調整して形状を制御することであり、テキストの表示方法を制御することです。

以上がCSSのShape-Outside属性を使用して、テキストを徐々に短縮するディスプレイ効果を実現する方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。