เมื่อเร็ว ๆ นี้ฉันเห็นเอฟเฟกต์การคลิกปุ่มที่ดี เมื่อคลิกมันจะสร้างคลื่นน้ำและเอฟเฟกต์ระลอกคลื่น มันค่อนข้างสนุกดังนั้นฉันเพียงแค่นำไปใช้ (ไม่ได้พิจารณาปัญหาความเข้ากันได้ของเบราว์เซอร์รุ่นล่าง)
มาดูเอฟเฟกต์ก่อนดังแสดงในรูปด้านล่าง (การบันทึกซอฟต์แวร์ GIF นั้นแย่เล็กน้อยดูเหมือนว่ามันจะเป็น Crazi ... )
เอฟเฟกต์นี้สามารถนำไปใช้งานได้โดย Cans ที่ซ้อนกันภายในองค์ประกอบหรือโดย CSS3
การใช้งาน CARVES
สำเนาของรหัสที่ใช้โดย Canves จะถูกเลือกออนไลน์ลบรูปแบบคำจำกัดความที่ซ้ำกันเล็กน้อยและให้ความคิดเห็น JS รหัสมีดังนี้
รหัส HTML
<a data-color = "#2F5398"> กดฉัน! </a>
รหัส CSS
* {Box-Sizing: Border-Box; โครงร่าง: None;} Body {Font-Family: 'Open Sans'; Font-Size: 100%; Font-Weight: 300; Line-Height: 1.5EM; Text-Align: Center;}. Btn {Border: ไม่มี: 40px; text-allign: center; line-height: 40px; border-radius: 5px;}. btn.color-1 {พื้นหลัง-สี: #426fc5;}. btn-border.color-1 {พื้นหลัง-สี: transparent; border: 2px solid #426fc5 สัมพัทธ์;}. ผ้าใบออกแบบวัสดุ {ความทึบ: 0.25; ตำแหน่ง: สัมบูรณ์; ด้านบน: 0; ซ้าย: 0;}. คอนเทนเนอร์ {Align-content: center; align-items: flex-start; display: flex-direction: row; flex-wrap: wrap;รหัส JS
var canvas = {}, centerx = 0, centery = 0, color = '', containers = document.getElementsByClassName ('วัสดุ DESIGN') บริบท = {}, element = {}, radius = 0, // สร้าง requestimationFrame window.orequestationframe || window.msrequestimationframe || ฟังก์ชั่น (การเรียกกลับ) {window.settimeout (การเรียกกลับ, 1000/60);});}); {canvas = document.createElement ('canvas'); canvas.addeventListener ('คลิก', กด, เท็จ); คอนเทนเนอร์ [i] .AppendChild (Canvas); Canvas.style.width = '100%'; canvas.style.height = '100%' Canvas.offSetheight;}}, // คลิกและรับข้อมูลที่ต้องการเช่นพิกัดคลิก, ขนาดองค์ประกอบ, การกดสี = ฟังก์ชั่น (เหตุการณ์) {color = event.toElement.parentElement.dataset.color; element = event.toElement; context = Element.get.getContext ('2D') Event.offsety; context.clearRect (0, 0, Element.width, Element.height); draw ();}, // วาดวงกลมและดำเนินการวาดภาพเคลื่อนไหว = ฟังก์ชั่น () {context.beginpath () context.arc (centerx, Centery, Radius, 0, 2 * math.pi RADIUS += 2 โดยการตัดสินว่ารัศมีนั้นเล็กกว่าความกว้างขององค์ประกอบวาดวงกลมอย่างต่อเนื่องด้วยรัศมี += 2 ถ้า (RADIUS <Element.Width) {RequestAnimFrame (วาด);}}; init ();การใช้งาน CSS3
ถัดไปคือรหัสที่ทำด้วยมืออย่างหมดจด ... ฉันคิดว่ามันสะดวกกว่าที่จะใช้ CSS3 บางทีฉันอาจคุ้นเคยกับการเขียน CSS ...
รหัส HTML
<a> กดฉัน! </a>
รหัส CSS
.waves {ตำแหน่ง: ญาติ; เคอร์เซอร์: ตัวชี้; แสดง: inline-block; ล้น: ซ่อน; Center; -webkit-tap-highlight-color: โปร่งใส; z-index: 1;}. waves.waves-animation {ตำแหน่ง: Absolute; Border-Radius: 50%; ความกว้าง: 25px; ความสูง: 25px; -webkit-transform; -webkit-transform: Scale (0); Transform: Scale (0); Pointer-Events: None} .TS-BTN {Width: 200px; ความสูง: 56px; สายไฟ: 56px; พื้นหลัง: #F57035; สี: #FFFรหัส JS
document.addeventListener ('domcontentloaded', function () {var duration = 750; // Style String การปะทุ var forstyle = function (ตำแหน่ง) {var cssstr = ''; สำหรับ (var key in position) {if (position.hasownproperty (key) cssstr เมาส์คลิกตำแหน่ง var forrect = function (เป้าหมาย) {var position = {top: 0, ซ้าย: 0}, ele = document.documentElement; window.pagexoffset - ele.clientleft}} var show = function (เหตุการณ์) {var pdiv = event.target, cdiv = document.createElement ('div'); pdiv.appendchild (cdiv); var rectobj = forrect (pdiv), _ ความสูง = event.pagey rectobj.left, _scale = 'scale (' + pdiv.clientWidth / 100 * 10 + ')'; var position = {top: _height + 'px', ซ้าย: _left + 'px'}; cdiv.classname = cdiv.classname forstyle (ตำแหน่ง)), ตำแหน่ง ["-webkit-transform"] = _scale, ตำแหน่ง ["-moz-transform"] = _scale, ตำแหน่ง ["-moz-transform"] = _scale, ตำแหน่ง ["-ms-transform"] = _scale, ตำแหน่ง [ "1", ตำแหน่ง ["-webkit-transition-duration"] = duration + "MS", ตำแหน่ง ["-MOZ-TRANSITION-DURATION"] = ระยะเวลา + "MS", ตำแหน่ง ["-O-Transition-Duration" = ระยะเวลา + "MS" "ลูกบาศก์เบส (0.250, 0.460, 0.450, 0.940)", ตำแหน่ง ["-ฟังก์ชั่น Moz-transition-timing-function"] = "ลูกบาศก์เบส (0.250, 0.460, 0.450, 0.940)", ตำแหน่ง [" 0.940) ", ตำแหน่ง [" ช่วงเวลาการเปลี่ยนเวลา "การเปลี่ยนแปลง"] = "ลูกบาศก์เบส (0.250, 0.460, 0.450, 0.940)", cdiv.setAttribute ("สไตล์", forstyle (ตำแหน่ง)); เวลา "-MOZ-TRANSITION-DURATION": DURATH + "MS", "-O-Transition-Duration": Duration + "MS", "-WebKit-Transform": Duration + "MS", "-WebKit-Transform": _scale, "-Moz-transform" _scale, "-o-transform": _scale, "-o-transform": _scale, "-สเกล,"-o-transform ": _scale,"-สเกล, "-ด้านบน: _height +" px ", ซ้าย: _left +" px ",}; forstyle (finishstyle)); settimeout (function () {pdiv.removeChild (cdiv);}, ระยะเวลา);}, 100)} document.querySelector ('. waves'). addEventListener ('คลิก', ฟังก์ชั่น (e) {แสดง (e);ตกลงนั่นคือทั้งหมดที่มีความสุขกลางเทศกาลกลางฤดูใบไม้ร่วง ~