เมื่อเร็ว ๆ นี้ฉันเห็นเอฟเฟกต์การคลิกปุ่มที่ดี เมื่อคลิกมันจะสร้างคลื่นน้ำและเอฟเฟกต์ระลอกคลื่น มันค่อนข้างสนุกดังนั้นฉันเพียงแค่นำไปใช้ (ไม่ได้พิจารณาปัญหาความเข้ากันได้ของเบราว์เซอร์รุ่นต่ำ)
มาดูเอฟเฟกต์ก่อนดังแสดงในรูปด้านล่าง (การบันทึกซอฟต์แวร์ GIF นั้นแย่เล็กน้อยดูเหมือนว่ามันจะเป็น Crazi ... )
เอฟเฟกต์นี้สามารถนำไปใช้งานได้โดย Cans ที่ซ้อนกันภายในองค์ประกอบหรือโดย CSS3
การใช้งาน CARVES
สำเนาของรหัสที่ใช้โดย Canves จะถูกเลือกออนไลน์ลบรูปแบบคำจำกัดความที่ซ้ำกันเล็กน้อยและให้ความคิดเห็น JS รหัสมีดังนี้
รหัส HTML: <a data-color = "#2F5398"> กดฉัน! </a>
รหัส CSS:
* {การปรับขนาดกล่อง: Border-Box; โครงร่าง: ไม่มี;} body {font-family: 'Open Sans'; ขนาดตัวอักษร: 100%; Font-Weight: 300; ความสูงของสาย: 1.5EM; TEXT-ALGING: CENTER;}. BTN {BORDER: NONE; แสดง: Inline-Block; สี: สีขาว; ล้น: ซ่อน; มาร์จิ้น: 1REM; Padding: 0; ความกว้าง: 150px; ความสูง: 40px; TEXT-ALIGN: CENTER; สายไฟ: 40px; Border-Radius: 5px;}. Btn.Color-1 {พื้นหลัง-สี: #426FC5;}. BTN-Border.Color-1 {พื้นหลังสี: โปร่งใส; ชายแดน: 2px Solid #426FC5; สี: #426FC5;}. วัสดุออกแบบ {ตำแหน่ง: สัมพัทธ์;}. วัสดุการออกแบบวัสดุ {ความทึบ: 0.25; ตำแหน่ง: สัมบูรณ์; ด้านบน: 0; ซ้าย: 0;}. คอนเทนเนอร์ {Align-Content: Center; ALIGN-ATEMS: Flex-Start; จอแสดงผล: Flex; Flex-Direction: แถว; Flex-wrap: wrap; Justify-Content: Center; มาร์จิ้น: 0 อัตโนมัติ; ความกว้างสูงสุด: 46Rem;}รหัส JS:
var canvas = {}, centerx = 0, centery = 0, color = '', containers = document.getElementsByClassName ('วัสดุ DESIGN') บริบท = {}, element = {}, radius = 0, // สร้างแอนิเมชั่นแอนิเมชั่น window.orequestationframe || window.msrequestimationframe || ฟังก์ชั่น (การโทรกลับ) {window.settimeout } (), // สร้าง canves init = function () {containers = array.prototype.slice.call (คอนเทนเนอร์); สำหรับ (var i = 0; i <containers.length; i += 1) {canvas = document.createElement ('canvas'); canvas.addeventListener ('คลิก' กด, เท็จ); ภาชนะบรรจุ [i] .appendchild (ผ้าใบ); canvas.style.width = '100%'; canvas.style.height = '100%'; canvas.width = canvas.offsetWidth; Canvas.Height = Canvas.OffSetheight; }}, // คลิกและรับข้อมูลที่จำเป็นเช่นการคลิกพิกัดขนาดองค์ประกอบ, สีกด = ฟังก์ชั่น (เหตุการณ์) {color = event.toElement.parentElement.dataset.color; element = event.toElement; บริบท = element.getContext ('2d'); รัศมี = 0; centerx = event.offsetx; Centery = event.offsety; context.clearRect (0, 0, element.width, element.height); วาด(); }, // วาดวงกลมและเรียกใช้งานการวาดภาพเคลื่อนไหว = function () {context.beginpath (); context.arc (centerx, centery, รัศมี, 0, 2 * math.pi, false); บริบท fillstyle = สี; Context.fill (); รัศมี += 2; // วาดวงกลมด้วยรัศมี += 2 โดยตัดสินว่ารัศมีนั้นเล็กกว่าความกว้างขององค์ประกอบวาดวงกลมอย่างต่อเนื่องด้วยรัศมี += 2 ถ้า (รัศมี <element.width) {requestanimframe (วาด); }}; init ();การใช้งาน CSS3
ถัดไปคือรหัสที่ทำด้วยมืออย่างหมดจด ... ฉันคิดว่ามันสะดวกกว่าที่จะใช้ CSS3 บางทีฉันอาจคุ้นเคยกับการเขียน CSS ...
รหัส HTML
<a> กดฉัน! </a>
รหัส CSS
.waves {ตำแหน่ง: ญาติ; เคอร์เซอร์: ตัวชี้; แสดง: Inline-Block; ล้น: ซ่อน; TEXT-ALIGN: CENTER; -webkit-tap-highlight-color: โปร่งใส; z-index: 1;}. คลื่น. waves-animation {ตำแหน่ง: สัมบูรณ์; แนวชายแดน: 50%; ความกว้าง: 25px; ความสูง: 25px; ความทึบ: 0; ความเป็นมา: RGBA (255,255,255,0.3); การเปลี่ยนแปลง: ความสะดวก 0.7S ทั้งหมด; Transition-Property: Transform, Opacity, -webkit-transform; -webkit-transform: สเกล (0); แปลง: สเกล (0); Eventer-events: ไม่มี} .ts-btn {width: 200px; ความสูง: 56px; ความสูงของสาย: 56px; ความเป็นมา: #F57035; สี: #FFF; Radius ชายแดน: 5px;}รหัส JS
document.addeventListener ('domcontentloaded', function () {var duration = 750; // Style String การปะทุ var forstyle = function (ตำแหน่ง) {var cssstr = ''; สำหรับ (var key in position) {if (position.hasownproperty (key) cssstr ตำแหน่งของเมาส์คลิก forrect = ฟังก์ชั่น (เป้าหมาย) {ตำแหน่ง var = {top: 0, ซ้าย: 0}, ele = document.documentelement; window.pagexoffset - ele.clientleft}} var show = function (เหตุการณ์) {var pdiv = event.target, cdiv = document.createelement ('div'); rectobj.left, _scale = 'scale (' + pdiv.clientwidth / 100 * 10 + ')'; ตำแหน่ง ["-webkit-transform"] = _scale, ตำแหน่ง ["-moz-transform"] = _scale, ตำแหน่ง ["-MS-transform"] = _scale, ตำแหน่ง ["-o-transform"] = _scale, ตำแหน่ง. transform = _scale, ตำแหน่ง. ตำแหน่ง ["-MOZ-TRANSITION-DURATION"] = DURATION + "MS", ตำแหน่ง ["-O-TRANSITION-DURATION"] = ระยะเวลา + "MS", ตำแหน่ง ["-O-TRANSITION-DURATION"] = DURATION + "MS" 0.450, 0.940) ", ตำแหน่ง ["-MOZ-TRANSITION-TIMING-FUNCTION-FUNCTION "] =" ลูกบาศก์เบส (0.250, 0.460, 0.450, 0.940) ", ตำแหน่ง ["-การทำงานของ "การทำงาน" "ลูกบาศก์เบส (0.250, 0.460, 0.450, 0.940)", cdiv.setAttribute ("สไตล์", forstyle (ตำแหน่ง)); "-O-Transition-Duration": Duration + "MS", "Transition-Duration": DURATION + "MS", "-webkit-transform": _scale, "-moz-transform": _scale, "-ms-transform": _scale, "-o-transform" }; settimeout (function () {cdiv.setAttribute ("style", forstyle (finishstyle)); settimeout (ฟังก์ชั่น () {pdiv.removechild (cdiv);}, ระยะเวลา);}, 100) } ,! 1);ทั้งหมดนี้เป็นหลักการและหลักการนั้นง่าย รับตำแหน่งคลิก> เพิ่มสไตล์โดยวิธีเทศกาล Happy Mid-autumn ~
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น