整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          前端開發-CSS 偽元素實現按鈕波紋效果

          SS偽元素主要是指HTML中沒有定義、存在的元素,偽元素本身不是真正的頁面元素,但是偽元素在使用過程中,其用法與效果與其他真正頁面元素是一樣的。偽元素只能在定義基礎上動態顯示其運行效果,在HTML源文件中并沒有該元素的真正代碼。CSS3中所定義的所有偽元素與偽類描述如下圖所示:

          CSS偽元素與偽類


          按鈕波紋ripple效果展示

          ripple波紋

          按鈕的波紋效果主要是指按鈕在點擊時展示出的動態效果。在實現效果過程中可行的方法方式較多,例如可以使用JavaScript、CSS動畫、JQuery等。網上目前按鈕波紋實現效果較多,部分樣式效果展示如下:

          波紋效果展示


          CSS 偽類波紋效果實現

          CSS偽類波紋效果主要借助于before、after偽類與hover懸停選擇器等實現類似波紋效果,本文主要借助after及hover等實現按鈕的波紋效果,本例設計兩種類似波紋效果,最終實現效果展示如下圖所示:

          設計樣式1

          設計樣式2

          本文設計實現的兩類波紋效果樣式描述如上圖gif所示,其實現過程描述如下:

          1、按鈕基本樣式設計

          本例按鈕基本樣式主要包括寬度、高度、背景顏色等。使用元素選擇器與類選擇器定義了按鈕元素的基本樣式,其樣式實現代碼描述如下:

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

          .button類主要用以實現設計樣式1,.button2類主要用于實現設計效果2,兩類按鈕定義描述如下:

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

          2、after偽元素使用

          after偽元素主要用于實現在指定元素的后面添加新的內容。本例提供的兩種設計方式都是在button元素的后面添加新的類似div的新元素,其中樣式1,新添加的元素與button本身重合,尺寸也一致。設計樣式2中after元素位于button的底部位置,寬度與button相同,高度為指定尺寸5px。兩個設計中after元素樣式為實現動態展開效果都涉及寬度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屬性實現動畫效果,即在0.4s內實現寬度從0改變為100%。

          3、hover選擇器的使用

          hover選擇器為懸停選擇器,主要對鼠標在HTML元素懸停時樣式進行設置。本例兩個涉及效果都是借助hover懸停選擇器對after樣式進行設置,在初始化設置寬度為0的基礎上寬度改變為100%,最終實現兩端伸展的效果。hover選擇器定義after元素樣式描述如下所示:

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

          以上給出了CSS偽元素實現波紋效果,主要借助了after、before偽元素與hover懸停選擇器等。設計實現效果完整源文件截圖如下:

          案例完整代碼


          以上給出了JavaScript中的事件基本概念及案例分析,如有問題可在評論區討論。本頭條號長期關注編程資訊分享;編程課程、素材、代碼分享及編程培訓。如果您對以上方面有興趣或代碼錯誤、建議與意見,可以聯系作者,共同探討。期待大家關注!相關文章鏈接如下:

          前端開發-JavaScript中的事件(Event)及事件處理總結

          前端開發-CSS3動畫實現焦點(圖文輪播)圖效果

          前端開發-JavaScript DOM動態生成文本框

          前端設計-教你如何快速繪制HTML5動畫

          前端設計-響應式頁面開發基礎

          前端設計-Ajax技術及實例展示

          本輸入特效

          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

          天跟大家分享與CSS3按鈕相關的特效展示案例,這些例子特效主要由CSS3編寫出來,除了新鮮有創意之外,編寫代碼質量也很高,對于前端人員或設計師都有參考的價值,當然有的不是全CSS3編寫的,部分是需要與JS代碼結合使用才能發揮效果。

          下面大家一起看看這些CSS按鈕DEMO,確實很酷哦!

          1.css按鈕點擊效果

          2.css按鈕提交動畫

          3.css按鈕懸停動畫

          4.css訂購按鈕

          5.css動畫按鈕

          6.css黑白懸停按鈕

          7.css藍色動畫按鈕

          8.css立方體按鈕

          9.css鼠標懸填充效果

          10.css鼠標懸停邊框按鈕

          11.按鈕懸停效果

          12.純css按鈕動畫

          13.純css動畫按鈕

          14.純css多彩按鈕

          15.垃圾桶按鈕動畫

          16.文件壓縮按鈕動畫

          整理了16款css按鈕,經過全部測試,沒發現有影響使用的bug,其中也可能存在部分bug,但是應該問題不大。

          代碼已上傳到網盤,獲取源碼請關注公眾號【青年碼農】回復【css按鈕】即可。


          主站蜘蛛池模板: 亚洲第一区二区快射影院| 成人精品一区二区三区电影| 精品无码一区在线观看| 一区二区视频在线| 韩国理伦片一区二区三区在线播放| 色噜噜狠狠一区二区三区| 日本v片免费一区二区三区 | 国产成人一区二区三区视频免费| 精品三级AV无码一区| 正在播放国产一区| 日本免费一区二区三区最新 | 亚洲一区AV无码少妇电影| 亚洲高清偷拍一区二区三区| 91福利国产在线观看一区二区 | 日本激情一区二区三区| 国产一区二区三区福利| 激情一区二区三区| 欧洲精品一区二区三区| 久久se精品动漫一区二区三区| 伊人色综合一区二区三区影院视频 | 日本在线视频一区| 末成年女A∨片一区二区| 国产伦精品一区二区三区在线观看| 国产伦理一区二区| 国产乱子伦一区二区三区| 无码人妻精品一区二区三区东京热| 精品国产精品久久一区免费式| 亚洲一区二区三区无码中文字幕| 亚州AV综合色区无码一区| 亚洲综合无码精品一区二区三区| 午夜DV内射一区区| 亚洲一区二区三区精品视频 | 亚洲一区二区三区四区在线观看 | 国模吧无码一区二区三区| 精品国产一区二区三区香蕉| 国产精华液一区二区区别大吗 | 国产一区二区在线视频| 国产主播福利精品一区二区| 一区二区三区精品| 奇米精品一区二区三区在| 国产一区二区三区在线免费|