近來看到個不錯的按鈕點擊效果，當點擊時產生一次水波漣漪效果，挺好玩的，於是簡單的實現了下(沒考慮低版本瀏覽器兼容問題)
先看看效果吧，如下圖（錄製gif軟件有點渣，看起來卡卡的...）
這種效果可以由元素內嵌套canves實現，也可以由css3實現。
Canves實現
網上摘了一份canves實現的代碼，略微去掉了些重複定義的樣式並且給出js註釋，代碼如下
html代碼：<a data-color="#2f5398">Press me!</a>
css代碼：
* { 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代碼：
var canvas = {}, centerX = 0, centerY = 0, color = '', containers = document.getElementsByClassName('material-design') context = {}, element = {}, radius = 0, // 根據callback生成requestAnimationFrame動畫requestAnimFrame = function () { return ( window.requestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60); } ); } (), // 為每個指定元素生成canves init = function () { containers = Array.prototype.slice.call(containers); for (var i = 0; i < containers.length; i += 1) { canvas = document.createElement('canvas'); canvas.addEventListener('click', press, false); containers[i].appendChild(canvas); canvas.style.width ='100%'; canvas.style.height='100%'; canvas.width = canvas.offsetWidth; canvas.height = canvas.offsetHeight; } }, // 點擊並且獲取需要的數據，如點擊坐標、元素大小、顏色press = function (event) { color = event.toElement.parentElement.dataset.color; element = event.toElement; context = element.getContext('2d'); radius = 0; centerX = event.offsetX; centerY = event.offsetY; context.clearRect(0, 0, element.width, element.height); draw(); }, // 繪製圓形，並且執行動畫draw = function () { context.beginPath(); context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); context.fillStyle = color; context.fill(); radius += 2; // 通過判斷半徑小於元素寬度，不斷繪製radius += 2 的圓形if (radius < element.width) { requestAnimFrame(draw); } };init();CSS3實現
接下來就是純手打的代碼了...覺得還是css3實現的方便些，可能是css寫習慣了...
html代碼
<a>Press me!</a>
css代碼
.waves{ position:relative; cursor:pointer; display:inline-block; overflow:hidden; text-align: center; -webkit-tap-highlight-color:transparent; z-index:1;}.waves .waves-animation{ position:absolute; border-radius:50%; width:25px; height:25px; opacity:0; background:rgba(255,255,255,0.3); transition:all 0.7s ease-out; transition-property:transform, opacity, -webkit-transform; -webkit-transform:scale(0); transform:scale(0); pointer-events:none}.ts-btn{ width: 200px; height: 56px; line-height: 56px; background: #f57035; color: #fff; border-radius: 5px;}js代碼
document.addEventListener('DOMContentLoaded',function(){ var duration = 750; // 樣式string拼湊var forStyle = function(position){ var cssStr = ''; for( var key in position){ if(position.hasOwnProperty(key)) cssStr += key+':'+position[key]+';'; }; return cssStr; } // 獲取鼠標點擊位置var forRect = function(target){ var position = { top:0, left:0 }, ele = document.documentElement; 'undefined' != typeof target.getBoundingClientRect && (position = target.getBoundingClientRect()); return { top: position.top + window.pageYOffset - ele.clientTop, left: position.left + window.pageXOffset - ele.clientLeft } } var show = function(event){ var pDiv = event.target, cDiv = document.createElement('div'); pDiv.appendChild(cDiv); var rectObj = forRect(pDiv), _height = event.pageY - rectObj.top, _left = event.pageX - rectObj.left, _scale = 'scale(' + pDiv.clientWidth / 100 * 10 + ')'; var position = { top: _height+'px', left: _left+'px' }; cDiv.className = cDiv.className + " waves-animation", cDiv.setAttribute("style", forStyle(position)), position["-webkit-transform"] = _scale, position["-moz-transform"] = _scale, position["-ms-transform"] = _scale, position["-o-transform"] = _scale, position.transform = _scale, position.opacity = "1", position["-webkit-transition-duration"] = duration + "ms", position["-moz-transition-duration"] = duration + "ms", position["-o-transition-duration"] = duration + "ms", position["transition-duration"] = duration + "ms", position["-webkit-transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)", position["-moz-transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)", position["-o-transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)", position["transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)", cDiv.setAttribute("style", forStyle(position)); var finishStyle = { opacity: 0, "-webkit-transition-duration": duration + "ms", // 過渡時間"-moz-transition-duration": duration + "ms", "-o-transition-duration": duration + "ms", "transition-duration": duration + "ms", "-webkit-transform" : _scale, "-moz-transform" : _scale, "-ms-transform" : _scale, "-o-transform" : _scale, top: _height + "px", left: _left + "px", }; setTimeout(function(){ cDiv.setAttribute("style", forStyle(finishStyle)); setTimeout(function(){ pDiv.removeChild(cDiv); },duration); },100) } document.querySelector('.waves').addEventListener('click',function(e){ show(e); },!1); },!1);就這些，原理也簡單，獲取點擊位置> 添加樣式順便，中秋快樂~
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。