css shape-outside屬性實現文本漸隱效果
本文介紹一種獨特的網頁文本展示技巧：讓文本長度逐漸縮短，營造動態視覺效果，非常適合創意網頁或藝術展示。
這可以通過CSS的shape-outside屬性實現。shape-outside允許你定義一個非矩形形狀，文本將環繞該形狀，從而產生文本漸隱的視覺效果。
以下示例演示如何使用shape-outside實現該效果：
.container { width: 300px; height: 300px; position: relative; } .shape { width: 100%; height: 100%; background-color: #f0f0f0; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); /* 可調整形狀 */ shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%); /* 與clip-path一致 */ float: left; } .text { margin-left: 30px; font-size: 18px; }
<div class="container"> <div class="shape"></div> <div class="text"> 這是一段示例文本，長度會逐漸變短。這是一段示例文本，長度會逐漸變短。 </div> </div>
代碼中，clip-path和shape-outside屬性共同定義了一個多邊形形狀。 通過修改多邊形的頂點坐標，可以調整文本環繞的形狀，從而控制文本漸隱的效果。 需要注意的是，shape-outside的值應與clip-path保持一致，以確保效果的準確性。
立即學習“前端免費學習筆記（深入）”；
為了更深入地探索此效果，您可以嘗試修改polygon的坐標值，創建不同的形狀，從而實現各種文本漸隱效果。 例如，您可以嘗試使用更復雜的形狀，如圓形或曲線，以獲得更豐富的視覺效果。 記住，關鍵在于調整polygon的值來控制形狀，從而控制文本的顯示方式。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
