Baru -baru ini saya melihat efek klik tombol yang bagus. Saat mengklik, itu menghasilkan gelombang air dan efek riak. Itu cukup menyenangkan, jadi saya hanya mengimplementasikannya (tidak mempertimbangkan masalah kompatibilitas browser versi yang lebih rendah)
Mari kita lihat efeknya terlebih dahulu, seperti yang ditunjukkan pada gambar di bawah ini (perekaman perangkat lunak GIF agak buruk, sepertinya crazi ...)
Efek ini dapat diimplementasikan oleh Canves Nested Inside Elements, atau oleh CSS3.
Implementasi Canves
Salinan kode yang diimplementasikan oleh Canves dipilih secara online, sedikit dihapus beberapa gaya definisi duplikat dan memberikan komentar JS. Kodenya adalah sebagai berikut
Kode HTML
<a data-color = "#2f5398"> tekan saya! </a>
Kode 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-blok; warna: white; overflow; 40px; Text-Align: Center; Line-Height: 40px; Border-Radius: 5px;}. Btn.Color-1 {latar belakang-warna: #426fc5;}. Btn-Border.color-1 {latar belakang-warna: transparent; perbatasan: 2px padat #426fc5; color: #42; 42; BATERC; 2PX; {42; 42; {42; {42; {42; {42; {42; 42; {42; 42; {42; 42; {42; 426; relatif;}. Canvas-Design Material {opacity: 0.25; Posisi: Absolute; Top: 0; Kiri: 0;}. Container {Align-Content: Center; Align-items: Flex-Start; Display: Flex; Flex-Direction: Row; Flex-Wrap: Bustify-Content: Center; Margin: 0 Auto;Kode JS
var canvas = {}, centerx = 0, centery = 0, color = '', containers = document.geteLementsbyclassname ('material-design') context = {}, elemen = {}, radius = 0, // menghasilkan requestanimationframe berdasarkan panggilan balik permintaan. ||. 1) {canvas = document.createElement ('canvas'); canvas.addeventListener ('klik', tekan, false); wadah [i]. Lappendchild (canvas); canvas.style.width = '100%'; canvas.style.height = '100%'; = canvas.OffsetHeight;}}, // Klik dan dapatkan data yang diperlukan, seperti koordinat klik, ukuran elemen, color press = function (event) {color = event.toElement.parentelement.dataset.color; element = event.toElement; cente = evene.getContext ('2d'); Radius = 0 event.offsety; context.clearrect (0, 0, element.width, element.height); draw ();}, // menggambar lingkaran dan menjalankan animasi draw = function () {context.beginpath (); context.arc (centerx, centery, radius, 0, 2 * math.pi, false); context.arc (centre, centery, radius, 0, 2 * math.pi, false); context.arc (centerx, centery, radius, 0, 2 * math.pi, false); context.arc (centerx, centery, radius, 0, 2 * math.pi, false); context.arct (centerx, centery, radius, 0, 2 * math.pi, false); context.arcry dengan jari -jari += 2 dengan menilai bahwa jari -jari lebih kecil dari lebar elemen, terus -menerus menggambar lingkaran dengan jari -jari += 2 if (radius <element.width) {requestanimframe (gambar);}}; init ();Implementasi CSS3
Berikutnya adalah kode yang murni buatan tangan ... Saya pikir lebih nyaman untuk mengimplementasikan CSS3, mungkin saya terbiasa menulis CSS ...
Kode HTML
<a> Tekan aku! </a>
Kode CSS
.Waves {position: relatif; kursor: pointer; display: inline-block; overflow: hidden; text-align: Center; -webkit-tap-highlight-color: transparan; z-index: 1;}. Waves.Waves-animasi {Posisi: absolut; perbatasan-radius: 50%; lebar: 25px; tinggi: 25px; opacity: 0; latar belakang: RGBA (255.2555.255.0.3); latar belakang: RGBA (2555.2555.255.0.3); -webkit-transform; -webkit-transform: skala (0); transform: skala (0); pointer-events: none} .ts-btn {width: 200px; tinggi: 56px; line-height: 56px; latar belakang: #f57035; color: #fff; border-radius: 5px;Kode JS
document.addeventListener ('domContentLoaded', function () {var durasi = 750; // style string patchwork var forstyle = function (position) {var cssstr = ''; for (var Key di posisi) {if (position.hasownProperty (key)) csStr+= Key ': {if position.hasownProperty (key)); Posisi klik mouse var forrect = function (target) {var position = {top: 0, kiri: 0}, ele = document.documentElement; 'undefined'! = typeof target.getBoundingClientRect && (position = target.getBoundingClientRect ()); return {top: position.topy.pageyoffset. 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. rectobj.left, _scale = 'scale (' + pDiv.clientWidth / 100 * 10 + ')'; var position = {top: _height + 'px', kiri: _left + 'px'}; cdiv.classname = cdiv.classname + "waves-animation", cd Cdiv.classname = cdiv.classname + "waves-animation", cd Cd Cdiv.classname = cdiv.classname + "waves-animation", cd Cd Cd Cdiv.div.div.cdiv.cdiv.d Cd Cd Cd Cdiv. " forstyle (position)), position ["-webkit-transform"] = _scale, position ["-moz-transform"] = _scale, position ["-moz-transform"] = _scale, position ["-ms-Transform"] = _scale, position ["-o-transform"] = _scale, posities. "1",position["-webkit-transition-duration"] = duration + "ms",position["-moz-transition-duration"] = duration + "ms",position["-o-transition-duration"] = duration + "ms",position["-webkit-transition-timing-function"] = duration + "ms",position["-webkit-transition-timing-function"] = "Cubic-Bezier (0,250, 0,460, 0,450, 0,940)", posisi ["-MOZ-transisi-Timing-fungsi"] = "Cubic-Bezier (0,250, 0,460, 0,450, 0,940)", posisinya ["0,250, 0,250, 0,250, 0.250, 0.250, 0.250, 0.250, 0.250, 0.250, 0.250, 0,940) ", posisi [" transisi-timing-fungsi "] =" Cubic-Bezier (0,250, 0,460, 0,450, 0,940) ", CDIV.SetAttribute (" Gaya ", ForStyle (Posisi); doasi-dourasi", "m-"-dourasi "," ms "-ms"-douration ","-douration ","-douration ","-douration ","-douration ","-douration ", douration", "-douration", "-douration", "-douration", "-douration", douration: Durasi + "MS", "-O-transisi-Durasi": Durasi + "MS", "-Webkit-Transform": Durasi + "MS", "-Webkit-Transform": _scale, "-Moz-Transform": _scale, "-ms-Transform": _scale, "-o-transform": _scale, ""-ms-Transform ": _scale,"-o-transform ": _scale," "-ms-Transform" _scale, "-skala,"-o-transform ": _scale,"-skala, "-Top: _height +" px ", kiri: _Left +" px ",}; setTimeout (function () {cdiv.setAttribute (" style ", forstyle (finishstyle)); setTimeOut (function () {pdiv.removechild (cdiv);}, durasi);}, 100)} document.QuerySelector ('. Gelombang'). AddEventListener ('klik', fungsi (e) {show (e);},!OK, hanya itu, omong-omong, festival pertengahan musim gugur yang bahagia ~