Baru -baru ini saya melihat efek klik tombol yang bagus. Saat mengklik, itu menghasilkan 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: boord-box; garis besar: tidak ada;} body {font-family: 'open sans'; Ukuran font: 100%; Font-Weight: 300; Line-Height: 1.5em; Text-Align: Center;}. Btn {Border: None; Tampilan: blok inline; Warna: Putih; meluap: tersembunyi; margin: 1rem; Padding: 0; Lebar: 150px; Tinggi: 40px; Teks-Align: tengah; Line-Height: 40px; Border-Radius: 5px;}. btn.color-1 {latar belakang-warna: #426fc5;}. btn-border.color-1 {latar belakang-warna: transparan; Perbatasan: 2px Solid #426FC5; Warna: #426fc5;}. Bahan-desain {Posisi: Relatif;}. Bahan-desain kanvas {opacity: 0.25; Posisi: Absolute; TOP: 0; Kiri: 0;}. Container {Align-Content: Center; Align-items: Flex-Start; Tampilan: Flex; Direksi fleksibel: baris; Flex-wrap: bungkus; Justify-Content: Center; margin: 0 otomatis; Max-Width: 46rem;}Kode JS:
var canvas = {}, centerx = 0, centery = 0, color = '', containers = document.geteLementsbyclassname ('material-design') context = {}, elemen = {}, radius = 0, // menghasilkan animasi requestanimationFrame berdasarkan callback requestAnimFrame = function () {return. window.mozrequestanimationFrame || } (), // menghasilkan canves init = function () {containers = array.prototype.slice.call (wadah); untuk (var i = 0; i <containers.length; i += 1) {canvas = document.createElement ('canvas'); canvas.addeventListener ('klik', tekan, false); wadah [i] .AppendChild (Canvas); canvas.style.width = '100%'; canvas.style.height = '100%'; canvas.width = canvas.offsetWidth; canvas.height = canvas.offsetheight; }}, // Klik dan dapatkan data yang diperlukan, seperti koordinat klik, ukuran elemen, color press = fungsi (peristiwa) {color = event.toeLement.parentelement.dataset.color; elemen = event.toElement; context = element.getContext ('2d'); radius = 0; centerx = event.offsetx; centery = event.offsety; context.clearrect (0, 0, element.width, element.height); menggambar(); }, // Gambar lingkaran dan jalankan animasi draw = function () {context.beginpath (); Context.arc (Centre, Centery, Radius, 0, 2 * Math.pi, false); context.fillstyle = warna; context.fill (); Radius += 2; // Gambarlah lingkaran 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; Tampilan: blok inline; meluap: tersembunyi; Teks-Align: tengah; -webkit-tap-highlight-color: transparan; z-index: 1;}. Gelombang .Waves-animasi {position: absolute; Border-Radius: 50%; Lebar: 25px; Tinggi: 25px; Opacity: 0; Latar Belakang: RGBA (255.255.255.0.3); Transisi: semua kemudahan 0,7; Transisi-Property: Transform, Opacity, -webkit-Transform; -webkit-transform: skala (0); Transform: Skala (0); pointer-events: none} .ts-btn {width: 200px; Tinggi: 56px; Line-Height: 56px; Latar Belakang: #F57035; Warna: #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; window.pagexoffset - ele.clientleft}} var show = function (event) {var pdiv = event.target, cdiv = document.createElement ('div'); rectobj.left, _scale = 'skala (' + pdiv.clientwidth / 100 * 10 + ')'; Posisi ["-WebKit-Transform"] = _scale, position ["-moz-transform"] = _scale, position ["-ms-transform"] = _scale, position ["-o-transform"] = _scale, position.transform = _scale, position.opacity = "1", position ["--Webkit.transform = _scale, position.opacity =" 1 ", position ["---Webkit.transform = _scale, position.opacity = "1", position ["---Webkit.transform = _scale, Position.opacity =" 1 ", Position ["-WEBKIT. Posisi ["-Moz-transisi-durasi"] = durasi + "ms", posisi ["-O-transisi-durasi"] = durasi + "ms", posisi ["-o-transisi-durasi"] = durasi + "ms", posisi ["-durasi"] = durasi + "ms", posisi ["-Webkit-transisi-timing-fungsi". 0,940) ", posisi ["-Moz-transisi-waktu-fungsi "] =" Cubic-Bezier (0,250, 0,460, 0,450, 0,940) ", posisi ["-O-transisi-Timing-fungsi "] =" Cubic-Bezier (0,250, 0,460, 0,450, 0,940) ") (0,250", 0,460, 0,460, 0,450, 0,940) ")" "Cubic-Bezier (0,250, 0,460, 0,450, 0,940)", CDIV.SetAttribute ("Style", Forstyle (Posisi)); + "MS", "Transisi-Durasi": Durasi + "MS", "-WebKit-Transform": _scale, "-Moz-Transform": _scale, "-MS-Transform": _scale, "-O-Transform": _scale, _height CDIV.SetAttribute ("Style", ForStyle (finishstyle));Semua ini adalah prinsip, dan prinsipnya sederhana. Dapatkan Lokasi Klik> Tambah Gaya Ngomong-ngomong, Selamat Festival Pertengahan Musim Gaya ~
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.