基於JS+Canves實現點選水波紋功能
近來看到個不錯的按鈕點選效果，當點選時產生一次水波漣漪效果，挺好玩的，於是簡單的實現了下(沒考慮低版本瀏覽器相容問題)
先看看效果吧，如下圖（錄製gif軟體有點渣，看起來卡卡的...）
這種效果可以由元素內巢狀canves實現，也可以由css3實現。
Canves實現
網上摘了一份canves實現的程式碼，略微去掉了些重複定義的樣式並且給出js註釋，程式碼如下
html程式碼
?| 1 | <a class="btn color-1 material-design" data-color="#2f5398">Press me!</a> |
css程式碼
?| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051 | * {box-sizing: border-box;outline: none;}body {font-family: 'Open Sans';font-size: 100%;font-weight: 300;line-height: 1.5em;text-align: center;}.btn {border: none;display: inline-block;color: white;overflow: hidden;margin: 1rem;padding: 0;width: 150px;height: 40px;text-align: center;line-height: 40px;border-radius: 5px;}.btn.color-1 {background-color: #426fc5;}.btn-border.color-1 {background-color: transparent;border: 2px solid #426fc5;color: #426fc5;}.material-design {position: relative;}.material-design canvas {opacity: 0.25;position: absolute;top: 0;left: 0;}.container {align-content: center;align-items: flex-start;display: flex;flex-direction: row;flex-wrap: wrap;justify-content: center;margin: 0 auto;max-width: 46rem;} |
js程式碼
相關推薦
基於JS+Canves實現點選水波紋功能
近來看到個不錯的按鈕點選效果，當點選時產生一次水波漣漪效果，挺好玩的，於是簡單的實現了下(沒考慮低版本瀏覽器相容問題)先看看效果吧，如下圖（錄製gif軟體有點渣，看起來卡卡的...）這種效果可以由元素內巢狀canves實現，也可以由css3實現。Canves實現網上摘了一份c
Android 中Layout實現點選水波紋特效
Android5.0以後TextView，Button、TabLayout等控制元件預設都有點選水波紋效果，那佈局類LinearLayout、RelativeLayout、TableLayout、FrameLayout、AbsoluteLayou如何實現 A：
js+css實現點選按鈕水波紋
.ripple-effect { position: relative; overflow: hidden; } .btn { width: 150px; height: 40px;
Android 實現所有View的點選水波紋效果
點選水波紋效果，是安卓5.0以上的一個新特技。 一開始，我只會在普通的Button上新增這個效果。 利用新建主題的方法： <style name="MyButton" parent="Theme.AppCompat.Light"> <item n
Android RecyclerView 實現item點選水波紋動畫效果
Recyclerview的item如果如果加上水波紋動畫的點選效果會使列表的ui體驗效果提升很多，今天來給大家介紹一下如何給Recyclerivew的item view新增這樣的動畫效果。 在res目錄的drawable目錄和drawable-v21下分別建立
Android自定義控制元件：Android L控制元件點選水波紋的實現（原始碼 + Demo）
Demo： 一、控制元件的流程： 大致上如下，實際是有些偏差的大家可以自己畫畫 RevealLayout()--->init()--->onMeasure()--->onLayout()--->onDraw()--->dispat
Item點選水波紋效果
先上效果圖 ripple的使用（需要V21以上） <ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="@color/dark_blue"> <
CardView定義陰影、點選水波紋、圓角
一般使用在recyclerView中，給每個Item項新增需要的效果，例如陰影，圓角，還有點選的水波紋等。 寫法就是新增V7包中的CardView作為根佈局即可： 效果如下： 全部程式碼如下，主要就是設定CardView的屬性： <?xml version=
按鈕點選水波紋效果
水波紋的出現給我們的錯覺是直接將波紋繪製在button上面的，但是這樣能做到嗎？首先button自己有background和src，如果把半透明的水波紋當作background或者src繪製到button上面，肯定是會損失button原有的樣式的。可能有朋友猜想
Android 點選水波紋擴散效果( Ripple Effect )
<span style="font-family: Arial, Helvetica, sans-serif;"><pre style="font-family: 宋體; font-size: 9pt; background-color: rgb(255,
js如何實現點選一個按鈕顯示一個div，然後該div上有一個按鈕，點選此按鈕後隱藏，隱藏的同時顯示另外一個div，而在次彈出的div也有一個按鈕，點選後隱藏.
<button id="btn1" onclick="btn1()">報名</button> <div id="div1" style="background:#999999; display:none;"> <button id=
一些簡單的js技術 實現點選 的js隱藏顯示
首先 這是一個js的方法 然後 獲取模組的屬性 根據模組的屬性 設定隱藏和顯示 function showoopenordown(){ var oDiv=document.getElementById('drop');var oH2=oDiv.getEleme
經典的js問題 實現點選li能夠彈出當前li索引與innerHTML的函式
經典的js問題 實現點選li能夠彈出當前li索引與innerHTML的函式 點選其中一項需要alert出如下結果： 按照我們平常的想法，程式碼應該是這樣寫的： var myul = document.getElementsByTagName("ul")[0];
android 5.0以上版本控制元件點選 水波紋效果
android api21及以上引入了控制元件點選的水波紋效果 1.可以直接給控制元件設定 android:background="?android:attr/selectableItemBackground"（有邊界效果） 或者 android:backgro
HTML+js+css實現點選圖片彈出上傳檔案視窗的兩種思路
第一種：CSS實現 <style> <!-- .fileInputContainer{ height:256px; background:url(upfile.png); position:rel
CardView 設定點選水波紋效果
問題來源 最近用了下RecyclerView,很好用，每個item我設定的是CardView包含一個TextView, <android.support.v7.widget.CardView xmlns:card_view="http://
自己動手搞一個拖動滑塊，點選水波紋效果
window.onload = function() { var lineDiv = document.getElementById('lineDiv'); //長線條 var minDiv = document.getElementById('minDiv'); //小方塊
實現點選複製貼上功能
實現功能:實現點選轉換為固定格式的json格式;並且實現點選複製功能 使用前端程式碼實現: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &
移動端實現點選按鈕複製功能
HTML程式碼 <div class="url"> <p id="codeNum"></p> <button class="code-btn" id="codeBtn" data-clipboard-action="
C#+AE 實現點選查詢屬性功能
實現效果如下： using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using S