前端開發(fā)-CSS 偽元素實(shí)現(xiàn)按鈕波紋效果

SS偽元素主要是指HTML中沒有定義、存在的元素，偽元素本身不是真正的頁面元素，但是偽元素在使用過程中，其用法與效果與其他真正頁面元素是一樣的。偽元素只能在定義基礎(chǔ)上動(dòng)態(tài)顯示其運(yùn)行效果，在HTML源文件中并沒有該元素的真正代碼。CSS3中所定義的所有偽元素與偽類描述如下圖所示：

CSS偽元素與偽類

按鈕波紋ripple效果展示

ripple波紋

按鈕的波紋效果主要是指按鈕在點(diǎn)擊時(shí)展示出的動(dòng)態(tài)效果。在實(shí)現(xiàn)效果過程中可行的方法方式較多，例如可以使用JavaScript、CSS動(dòng)畫、JQuery等。網(wǎng)上目前按鈕波紋實(shí)現(xiàn)效果較多，部分樣式效果展示如下：

波紋效果展示

CSS 偽類波紋效果實(shí)現(xiàn)

CSS偽類波紋效果主要借助于before、after偽類與hover懸停選擇器等實(shí)現(xiàn)類似波紋效果，本文主要借助after及hover等實(shí)現(xiàn)按鈕的波紋效果，本例設(shè)計(jì)兩種類似波紋效果，最終實(shí)現(xiàn)效果展示如下圖所示：

設(shè)計(jì)樣式1

設(shè)計(jì)樣式2

本文設(shè)計(jì)實(shí)現(xiàn)的兩類波紋效果樣式描述如上圖gif所示，其實(shí)現(xiàn)過程描述如下：

1、按鈕基本樣式設(shè)計(jì)

本例按鈕基本樣式主要包括寬度、高度、背景顏色等。使用元素選擇器與類選擇器定義了按鈕元素的基本樣式，其樣式實(shí)現(xiàn)代碼描述如下：

button,.button2,.button{width: 200px; height: 50px; background-color: green;border: 0; cursor: pointer;color: #FFF; font-size: 16px; position: relative;}

.button類主要用以實(shí)現(xiàn)設(shè)計(jì)樣式1，.button2類主要用于實(shí)現(xiàn)設(shè)計(jì)效果2，兩類按鈕定義描述如下：

<button type="button" class="button">Ripple1</button>
<button type="button" class="button2">Ripple2</button>

2、after偽元素使用

after偽元素主要用于實(shí)現(xiàn)在指定元素的后面添加新的內(nèi)容。本例提供的兩種設(shè)計(jì)方式都是在button元素的后面添加新的類似div的新元素，其中樣式1，新添加的元素與button本身重合，尺寸也一致。設(shè)計(jì)樣式2中after元素位于button的底部位置，寬度與button相同，高度為指定尺寸5px。兩個(gè)設(shè)計(jì)中after元素樣式為實(shí)現(xiàn)動(dòng)態(tài)展開效果都涉及寬度width為0。after元素的樣式定義如下：

.button::after{content: " "; width: 0; height: 50px; position: absolute; left:50%;top: 0%;background-color: red;opacity: 0; transition: all .4s; }
.button2::after{content: " "; width: 0; height: 5px; position: absolute; left:50%;top: 100%;background-color: red;transition: all .4s; }

after元素CSS樣式定義中使用了transition屬性實(shí)現(xiàn)動(dòng)畫效果，即在0.4s內(nèi)實(shí)現(xiàn)寬度從0改變?yōu)?00%。

3、hover選擇器的使用

hover選擇器為懸停選擇器，主要對(duì)鼠標(biāo)在HTML元素懸停時(shí)樣式進(jìn)行設(shè)置。本例兩個(gè)涉及效果都是借助hover懸停選擇器對(duì)after樣式進(jìn)行設(shè)置，在初始化設(shè)置寬度為0的基礎(chǔ)上寬度改變?yōu)?00%，最終實(shí)現(xiàn)兩端伸展的效果。hover選擇器定義after元素樣式描述如下所示：

.button:hover::after{left:0%; width: 100%; opacity: 0.6;}
.button2:hover::after{left:0%; width: 100%;}

以上給出了CSS偽元素實(shí)現(xiàn)波紋效果，主要借助了after、before偽元素與hover懸停選擇器等。設(shè)計(jì)實(shí)現(xiàn)效果完整源文件截圖如下：

案例完整代碼

以上給出了JavaScript中的事件基本概念及案例分析，如有問題可在評(píng)論區(qū)討論。本頭條號(hào)長(zhǎng)期關(guān)注編程資訊分享；編程課程、素材、代碼分享及編程培訓(xùn)。如果您對(duì)以上方面有興趣或代碼錯(cuò)誤、建議與意見，可以聯(lián)系作者，共同探討。期待大家關(guān)注！相關(guān)文章鏈接如下：

前端開發(fā)-JavaScript中的事件（Event）及事件處理總結(jié)

前端開發(fā)-CSS3動(dòng)畫實(shí)現(xiàn)焦點(diǎn)(圖文輪播)圖效果

前端開發(fā)-JavaScript DOM動(dòng)態(tài)生成文本框

前端設(shè)計(jì)-教你如何快速繪制HTML5動(dòng)畫

前端設(shè)計(jì)-響應(yīng)式頁面開發(fā)基礎(chǔ)

前端設(shè)計(jì)-Ajax技術(shù)及實(shí)例展示

本輸入特效

1.power-mode-input

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

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

2.TextInputEffects

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

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

3.typewriterjs

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

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

4.t.js

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

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

5.shuffle-text

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

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

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

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è)微小的庫(kù)用于在一段指定的文本元素上創(chuàng)建打字效果。

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

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

10.jquery.typer

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

11. Phaser-typewriter

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

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

按鈕操作特效

1.ElasticProgress

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

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

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

2. vue-particle-effect-buttons

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

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

3.nativescript-shine-button

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

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

4.react-parallax-button

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

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

5.RippleButton

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

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

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

人才們的 【三連】 就是小智不斷分享的最大動(dòng)力，如果本篇博客有任何錯(cuò)誤和建議，歡迎人才們留言，最后，謝謝大家的觀看。

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

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

天跟大家分享與CSS3按鈕相關(guān)的特效展示案例，這些例子特效主要由CSS3編寫出來，除了新鮮有創(chuàng)意之外，編寫代碼質(zhì)量也很高，對(duì)于前端人員或設(shè)計(jì)師都有參考的價(jià)值，當(dāng)然有的不是全CSS3編寫的，部分是需要與JS代碼結(jié)合使用才能發(fā)揮效果。

下面大家一起看看這些CSS按鈕DEMO，確實(shí)很酷哦！

1.css按鈕點(diǎn)擊效果

2.css按鈕提交動(dòng)畫

3.css按鈕懸停動(dòng)畫

4.css訂購(gòu)按鈕

5.css動(dòng)畫按鈕

6.css黑白懸停按鈕

7.css藍(lán)色動(dòng)畫按鈕

8.css立方體按鈕

9.css鼠標(biāo)懸填充效果

10.css鼠標(biāo)懸停邊框按鈕

11.按鈕懸停效果

12.純css按鈕動(dòng)畫

13.純css動(dòng)畫按鈕

14.純css多彩按鈕

15.垃圾桶按鈕動(dòng)畫

16.文件壓縮按鈕動(dòng)畫

整理了16款css按鈕，經(jīng)過全部測(cè)試，沒發(fā)現(xiàn)有影響使用的bug，其中也可能存在部分bug，但是應(yīng)該問題不大。

代碼已上傳到網(wǎng)盤，獲取源碼請(qǐng)關(guān)注公眾號(hào)【青年碼農(nóng)】回復(fù)【css按鈕】即可。

在線咨詢

上一篇：手把手詳細(xì)教你優(yōu)化CSS提高網(wǎng)站加載速度的21種方法匯總「實(shí)踐」
下一篇：HTML5+CSS3，輕松做出小米官網(wǎng)產(chǎn)品立體陰影交互效果

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商