[[340181]]

文本輸入特效

1.power-mode-input

PowerModeInput 可以讓你的文本輸入框更引人注目。

地址:https://github.com/lindelof/power-mode-input

2.TextInputEffects

簡單的樣式和效果，可增強文本輸入交互。

地址:https://github.com/codrops/TextInputEffects

3.typewriterjs

一個簡單而強大的原生javascript插件，具有很酷的打字機效果。

地址:https://github.com/tameemsafi/typewriterjs

4.t.js

輕量級 $.Hypertext.Typewriter

地址: https://github.com/mntn-dev/t.js

5.shuffle-text

ShuffleText 是一款純js文字洗牌式切換特效插件。該插件在鼠標滑過指定的文本時，文字會不停的逐個進行翻轉，類似洗牌效果，非常炫酷。

地址: https://github.com/ics-ikeda/shuffle-text

6.react-typewriter

適用于 react 的打字機的效果

地址：https://github.com/ianbjorndilling/react-typewriter

7.t-writer.js

T-Writer.js 用于實現原生打字機效果，沒有任何依賴。

地址: https://github.com/ChrisCavs/t-writer.js

8.malarkey

模擬在DOM元素上的打字機效果。

地址：https://github.com/yuanqing/malarkey

• 友好，靈活的API，提供精細的控制
• 選項到重復該效果的限制。
• 用于對自定義元素屬性應用效果的選項。
• 允許暫停和恢復順序 on-the-fly
• 廣泛的測試，帶有 100%覆蓋范圍。
• 無相關性，超輕量，僅 1.5 縮小，或者 0.8 KB縮小和壓縮

9.tinytyper

TinyTyper 一個微小的庫用于在一段指定的文本元素上創建打字效果。

地址：https://github.com/lourenc/tinytyper

https://klxxcdn.oss-cn-hangzhou.aliyuncs.com/histudy/hrm/media/66/8MTkbe9Crg.gif

10.jquery.typer

typer.js插件是一個非常有意思的jQuery插件，實現一個一個字輸出，類似打字的效果。typer.js是一個比較小的插件，依賴于jQuery。typer.js使用起來也比較方便，允許設置打字時間間隔，循環輸出，清除打字效果時間等。

11. Phaser-typewriter

Phaser.io Javascript庫的打字機效果包裝器。

地址: https://github.com/netgfx/Phaser-typewriter

按鈕操作特效

1.ElasticProgress

ElasticProgress 可以創建一個有彈力效果的進度條。

地址: https://github.com/codrops/ElasticProgress

https://klxxcdn.oss-cn-hangzhou.aliyuncs.com/histudy/hrm/media/66/1sfasfsafasf564safsaf6saf1as.gif

2. vue-particle-effect-buttons

爆發粒子特效按鈕組件。

地址: https://github.com/dreambo8563/vue-particle-effect-buttons

3.nativescript-shine-button

NativeScript插件，可為按鈕添加發光效果。

地址:https://github.com/hamdiwanis/nativescript-shine-button

4.react-parallax-button

讓按鈕有一個水平視差效果。

地址: https://github.com/venits/react-parallax-button

5.RippleButton

具有Material Theme波紋效果的按鈕。

地址: https://github.com/mig82/RippleButton

6.css-ripple-effect

css-ripple-effect 是一款使用純CSS3制作的炫酷扁平風格按鈕點擊波特效。該效果是仿照Android系統的Material design風格點擊波來制作的。

地址:https://github.com/mladenplavsic/css-ripple-effect

作者：lindelof 譯者：前端小智 來源:github

原文：https://github.com/lindelof/awesome-web-effect

本文轉載自微信公眾號「大遷世界 」，可以通過以下二維碼關注。轉載本文請聯系大遷世界公眾號。