close
CSS波浪文本生成器
原始資料：Wavy Text Generator
您是否知道可以使用CSS創建波浪文本？
在本教程中，我將向您展示如何使用CSS只需幾行代碼即可創建令人敬畏的波浪形扭曲文本。
HTML代碼
首先，我們需要將text元素轉換為波浪形文本效果。讓我們將其放在這樣的h1標籤中：
<h1 class="wavy-text">Wavy Text</h1>
我們將使用wavy-textCSS類名稱通過SVG過濾器創建效果。
SVG波浪文本使用feTurbulence和feDisplacementMap
我們將使用SVG湍流過濾器。基本上，它是一個過濾器，可在任何元素上產生湍流效果，這對於創建水和雲效果非常有用。
在我們的例子中，我們將使用SVG湍流過濾器和置換過濾器來使文本元素變形。這是SVG過濾器的定義：
<svg width="100%" height="100%" style="display:none;">
<defs>
<filter id="wavy" filterUnits="userSpaceOnUse" x="0" y="0">
<feTurbulence id="wave-animation" numOctaves="1" seed="1" baseFrequency="0 0.0645034">
</feTurbulence>
<feDisplacementMap scale="10" in="SourceGraphic"></feDisplacementMap>
</filter>
<animate xlink:href="#wave-animation"
attributeName="baseFrequency"
dur="3s"
keyTimes="0;0.5;1"
values="0.0 0.04;0.0 0.07;0.0 0.04"
repeatCount="indefinite"></animate>
</defs>
</svg>
那麼，我們在這裡有什麼？
我們結合feTurbulence併feDisplacementMap生成波浪文本效果。然後，我們在3秒鐘的無限循環中對效果進行動畫處理，在其中改變baseFrequency湍流濾鏡的大小。
我們使用CSS filter屬性將其應用於HTML元素，如下所示：
.wavy-text{
filter:url('#wavy');
}
這是我們得到的效果：
您可以使用此波浪形文本生成器做什麼？
使用此簡單的CSS波浪過濾器，您可以輕鬆地實現在線生成器，例如在coding-dude.com上使用此波浪文本生成器
用戶甚至可以輸入表情符號和文本符號（ ✬❀☎❆🤠👽🖖）來輸入自己的文本，然後將波浪形文本複制/粘貼到自己的頁面中。
你甚至可以嘗試使用那些已經有點波浪網絡字體，像這樣涼爽的免費波浪字體從PhotoshopSupply
全站熱搜
留言列表
