最近、私は良いボタンクリック効果を見ました。クリックすると、水波と波紋効果が生成されました。とても楽しかったので、単に実装しました（低バージョンブラウザの互換性の問題を考慮していません）
下の図に示すように、最初にその効果を見てみましょう（GIFソフトウェアの録音は少し悪いです、それはCraziのように見えます...）
この効果は、要素内のネストされた缶、またはCSS3によって実装できます。
Canvesの実装
Canvesによって実装されたコードのコピーは、オンラインで選択され、いくつかの重複する定義スタイルをわずかに削除し、JSコメントを与えました。コードは次のとおりです
HTMLコード：<a data-color = "＃2f5398">私を押してください！</a>
CSSコード：
* {box-sizing：border-box;アウトライン：なし;} body {font-family： 'open sans';フォントサイズ：100％; font-weight：300; Line-Height：1.5em;テキストアリグイン：center;}。btn {border：none;ディスプレイ：インラインブロック。色：白;オーバーフロー：隠し;マージン：1rem;パディング：0;幅：150px;高さ：40px;テキストアライグ：センター; Line-Height：40px; Border-radius：5px;}。btn.color-1 {background-color：＃426fc5;}。btn-border.color-1 {background-color：透明;国境：2pxソリッド＃426FC5;色：＃426FC5;}。マテリアルデザイン{位置：相対;}。マテリアルデザインキャンバス{不透明：0.25;位置：絶対;上：0;左：0;}。コンテナ{align-content：center; Align-Items：Flex-Start;ディスプレイ：Flex; Flex-Direction：row;フレックスラップ：ラップ; justify-content：center;マージン：0 Auto;最大幅：46rem;}JSコード：
var canvas = {}、centerx = 0、centery = 0、color = ''、containers = document.getelementsbyclassname（ 'material-design'）context = {}、element = {}、radius = 0、// callback requestAnimframe = fultion | returnimationframe | windremationframe | windremationframe | windremationframe | ||。 }（）、// Canves init = function（）{containers = array.prototype.slice.call（containers）; for（var i = 0; i <containers.length; i += 1）{canvas = document.createelment（ 'canvas'）; canvas.addeventlistener（ 'click'、press、false）;コンテナ[i] .AppendChild（Canvas）; canvas.style.width = '100％'; canvas.style.height = '100％'; canvas.width = canvas.offsetwidth; canvas.height = canvas.offsetheight; }}、//クリックして、クリック座標、要素サイズ、カラープレス= 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 = function（）{context.beginPath（）を実行します。 Context.Arc（CenterX、Centery、Radius、0、2 * Math.Pi、False）; context.fillstyle = color; context.fill（）; radius += 2; //半径は要素の幅よりも小さいと判断することにより、半径 += 2で円を描き、radius += 2 if（radius <element.width）{requestanimframe（draw）で常に円を描画します。 }}; init（）;CSS3実装
次は、純粋に手作りのコードです... CSS3を実装する方が便利だと思います。CSSを書くのに慣れています...
HTMLコード
<a>私を押して！</a>
CSSコード
.waves {position：relative;カーソル：ポインター;ディスプレイ：インラインブロック。オーバーフロー：隠し;テキストアライグ：センター; -webkit-tap-highlight-color：透明; z-index：1;}。waves .waves-animation {position：absolute;ボーダーラジウス：50％;幅：25px;高さ：25px;不透明：0;背景：RGBA（255,255,255,0.3）;遷移：0.7sすべての断片。 Transition-Property：Transform、Opacity、-Webkit-Transform; -webkit-transform：scale（0）;変換：スケール（0）; pointer-events：none} .ts-btn {width：200px;高さ：56px;ラインハイト：56px;背景：＃F57035;色：#fff;ボーダーラジウス：5px;}JSコード
document.addeventlistener（ 'domcontentloaded'、function（）{var duration = 750; // style string patchwork var forstyle = function（position）{var cssstr = ''; for（position.hasownproperty（key））csstr+= key+' ^ forts+マウスクリックvar forrect（ターゲット）{var position = {top：0、left}、ele = document.documentelement; window.pagexoffset -ele.clientleft}} var show = function {var pdiv = event、cdiv.createelment（ 'div'）; rectobj.left、_scale = 'scale（' + pdiv.clientwidth / 100 * 10 + '）'; position ["-webkit-transform"] = _scale、position [" - moz-transform"] = _scale、position [" - ms-transform"] = _scale、position ["-o-transform"] = _scale、position.transform = _scale、position.opacacity = " position [Moz-transition-duration "] = duration +" ms "、position ["-o-transition-duration "] = duration +" ms "、position ["-o-transition-duration "] = duration +" ms "、[" transition-duration "] = duration +" ms "、position [" - webkit-transition-timing-functiontiont（0.250） 0.460、0.450、0.940） "、position ["-"-moz-transition-timing-function"] = "cubic-bezier（0.250、0.460、0.450、0.940）"、position位置["遷移 - ティミングファンクション"] = "キュービックベジエ（0.250、0.460、0.450、0.940）、cdiv.setattribute（" style "、forstyle（position）） "ms"、 "-o-transition-duration"：duration + "ms"、 "transition-duration"：duration + "ms"、 "-webkit-transform"：_scale、 "-moz-transform"：_scale、 "-ms-transform"：_scale、 "-o-transform"：_scale、_height + 「Px」、} setimeout（function（）{cdiv.setattribute（ "style"、forstyle（finishstyle））; setimeout（）{pdiv.removechild（cdiv）;}、duration）;}、100）} document. queryselector（ '。 }、！1）; 1）;これらはすべて原則であり、原則は単純です。クリックの場所を取得します>ちなみにスタイルを追加してください、幸せな中流祭り〜
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。