溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

html網(wǎng)頁開發(fā)中11個(gè)文本輸入和6個(gè)按鈕操作特效的案例分析

發(fā)布時(shí)間:2020-10-24 14:54:22 來源:億速云 閱讀:301 作者:小新 欄目:web開發(fā)

小編給大家分享一下html網(wǎng)頁開發(fā)中11個(gè)文本輸入和6個(gè)按鈕操作特效的案例分析,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!

文本輸入特效

1.power-mode-input

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

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

html網(wǎng)頁開發(fā)中11個(gè)文本輸入和6個(gè)按鈕操作特效的案例分析

2.TextInputEffects

簡(jiǎn)單的樣式和效果,可增強(qiáng)文本輸入交互。

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

html網(wǎng)頁開發(fā)中11個(gè)文本輸入和6個(gè)按鈕操作特效的案例分析html網(wǎng)頁開發(fā)中11個(gè)文本輸入和6個(gè)按鈕操作特效的案例分析

3.typewriterjs

一個(gè)簡(jiǎn)單而強(qiáng)大的原生javascript插件,具有很酷的打字機(jī)效果。

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

html網(wǎng)頁開發(fā)中11個(gè)文本輸入和6個(gè)按鈕操作特效的案例分析html網(wǎng)頁開發(fā)中11個(gè)文本輸入和6個(gè)按鈕操作特效的案例分析

4.t.js

輕量級(jí) $.Hypertext.Typewriter

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

html網(wǎng)頁開發(fā)中11個(gè)文本輸入和6個(gè)按鈕操作特效的案例分析html網(wǎng)頁開發(fā)中11個(gè)文本輸入和6個(gè)按鈕操作特效的案例分析

5.shuffle-text

ShuffleText 是一款純js文字洗牌式切換特效插件。該插件在鼠標(biāo)滑過指定的文本時(shí),文字會(huì)不停的逐個(gè)進(jìn)行翻轉(zhuǎn),類似洗牌效果,非常炫酷。

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

html網(wǎng)頁開發(fā)中11個(gè)文本輸入和6個(gè)按鈕操作特效的案例分析html網(wǎng)頁開發(fā)中11個(gè)文本輸入和6個(gè)按鈕操作特效的案例分析

6.react-typewriter

適用于 react 的打字機(jī)的效果

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

7.t-writer.js

T-Writer.js 用于實(shí)現(xiàn)原生打字機(jī)效果,沒有任何依賴。

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

html網(wǎng)頁開發(fā)中11個(gè)文本輸入和6個(gè)按鈕操作特效的案例分析html網(wǎng)頁開發(fā)中11個(gè)文本輸入和6個(gè)按鈕操作特效的案例分析

8.malarkey

模擬在DOM元素上的打字機(jī)效果。

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

  • 友好,靈活的API,提供精細(xì)的控制
  • 選項(xiàng)到重復(fù)該效果的限制。
  • 用于對(duì)自定義元素屬性應(yīng)用效果的選項(xiàng)。
  • 允許暫停和恢復(fù)順序 on-the-fly
  • 廣泛的測(cè)試,帶有 100%覆蓋范圍。
  • 無相關(guān)性,超輕量,僅 1.5 縮小,或者 0.8 KB縮小和壓縮

9.tinytyper

TinyTyper 一個(gè)微小的庫用于在一段指定的文本元素上創(chuàng)建打字效果。

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

html網(wǎng)頁開發(fā)中11個(gè)文本輸入和6個(gè)按鈕操作特效的案例分析

10.jquery.typer

typer.js插件是一個(gè)非常有意思的jQuery插件,實(shí)現(xiàn)一個(gè)一個(gè)字輸出,類似打字的效果。typer.js是一個(gè)比較小的插件,依賴于jQuery。typer.js使用起來也比較方便,允許設(shè)置打字時(shí)間間隔,循環(huán)輸出,清除打字效果時(shí)間等。

html網(wǎng)頁開發(fā)中11個(gè)文本輸入和6個(gè)按鈕操作特效的案例分析html網(wǎng)頁開發(fā)中11個(gè)文本輸入和6個(gè)按鈕操作特效的案例分析

11. Phaser-typewriter

Phaser.io Javascript庫的打字機(jī)效果包裝器。

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

html網(wǎng)頁開發(fā)中11個(gè)文本輸入和6個(gè)按鈕操作特效的案例分析html網(wǎng)頁開發(fā)中11個(gè)文本輸入和6個(gè)按鈕操作特效的案例分析

按鈕操作特效

1.ElasticProgress

ElasticProgress 可以創(chuàng)建一個(gè)有彈力效果的進(jìn)度條。

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

html網(wǎng)頁開發(fā)中11個(gè)文本輸入和6個(gè)按鈕操作特效的案例分析

2. vue-particle-effect-buttons

爆發(fā)粒子特效按鈕組件。

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

html網(wǎng)頁開發(fā)中11個(gè)文本輸入和6個(gè)按鈕操作特效的案例分析html網(wǎng)頁開發(fā)中11個(gè)文本輸入和6個(gè)按鈕操作特效的案例分析

3.nativescript-shine-button

NativeScript插件,可為按鈕添加發(fā)光效果。

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

html網(wǎng)頁開發(fā)中11個(gè)文本輸入和6個(gè)按鈕操作特效的案例分析html網(wǎng)頁開發(fā)中11個(gè)文本輸入和6個(gè)按鈕操作特效的案例分析

4.react-parallax-button

讓按鈕有一個(gè)水平視差效果。

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

html網(wǎng)頁開發(fā)中11個(gè)文本輸入和6個(gè)按鈕操作特效的案例分析html網(wǎng)頁開發(fā)中11個(gè)文本輸入和6個(gè)按鈕操作特效的案例分析

5.RippleButton

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

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

html網(wǎng)頁開發(fā)中11個(gè)文本輸入和6個(gè)按鈕操作特效的案例分析html網(wǎng)頁開發(fā)中11個(gè)文本輸入和6個(gè)按鈕操作特效的案例分析

6.css-ripple-effect

css-ripple-effect 是一款使用純CSS3制作的炫酷扁平風(fēng)格按鈕點(diǎn)擊波特效。該效果是仿照Android系統(tǒng)的Material design風(fēng)格點(diǎn)擊波來制作的。

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

html網(wǎng)頁開發(fā)中11個(gè)文本輸入和6個(gè)按鈕操作特效的案例分析html網(wǎng)頁開發(fā)中11個(gè)文本輸入和6個(gè)按鈕操作特效的案例分析

以上是html網(wǎng)頁開發(fā)中11個(gè)文本輸入和6個(gè)按鈕操作特效的案例分析的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!

向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI