لقد رأيت مؤخرًا تأثيرًا جيدًا للزر. عند النقر ، أنتجت موجة الماء وتأثير تموجات. لقد كانت ممتعة للغاية ، لذلك قمت بتنفيذها ببساطة (لا أفكر في قضية التوافق لمتصفحات الإصدار المنخفضة)
دعنا نلقي نظرة على التأثير أولاً ، كما هو موضح في الشكل أدناه (تسجيل برنامج GIF سيء بعض الشيء ، يبدو أنه crazi ...)
يمكن تنفيذ هذا التأثير بواسطة CANTES CANVES داخل العناصر ، أو بواسطة CSS3.
يمكن أن ينفذ
يتم اختيار نسخة من الكود الذي تم تنفيذه بواسطة Canves عبر الإنترنت ، وإزالتها قليلاً بعض أنماط التعريف المكررة وأعطت تعليقات JS. الرمز كما يلي
رمز HTML
<a data-color = "#2f5398"> اضغط على لي! </a>
رمز CSS
* {box-size: border-box ؛ الخطوط العريضة: none ؛} body {font-family: 'open sans' ؛ font-size: 100 ٪ ؛ font-weight: 300 ؛ line-line: 1.5em ؛ 40px ؛ text-align: center ؛ خط الخط: 40px ؛ الحدود-radius: 5px ؛}. النسبية ؛}. canvas تصميم المواد {opacity: 0.25 ؛ الموضع: المطلق ؛ الأعلى: 0 ؛ اليسار: 0 ؛}. حاوية {محاذاة محتوى: المركز ؛ محاذاة-عنصر:رمز JS
var canvas = {} ، centerx = 0 ، centery = 0 ، color = '' ، الحاويات = document.getElementsByClassName ('material-design') context = {} ، element = {} ، radius = 0 ، ||. 1) {canvas = document.createElement ('canvas') ؛ canvas.addeventListener ('click' ، اضغط ، خطأ) ؛ الحاويات [i] .appendchild (canvas) ؛ canvas.style.width = '100 ٪' canvas.offsetheight ؛}} ، // انقر فوق والحصول على البيانات المطلوبة ، مثل الإحداثيات النقر ، حجم العنصر ، Color Press = function (event) {color = event.toElement.parentElement.dataset.color ؛ element. event.offsety ؛ context.clearrect (0 ، 0 ، element.width ، element.height) ؛ draw () ؛} ، // ارسم الدائرة وتنفيذ الرسوم المتحركة draw = function () {context.beginpath ارسم الدائرة بنصف قطر += 2 عن طريق الحكم على أن نصف القطر أصغر من عرض العنصر ، ارسم الدائرة باستمرار بنصف قطر += 2 إذا (RADIUS <element.width) {requestanimframe (draw) ؛}} ؛ init () ؛تنفيذ CSS3
التالي هو الرمز الذي يصنع يدويًا ... أعتقد أنه من المريح تنفيذ CSS3 ، ربما اعتدت على كتابة CSS ...
رمز HTML
<a> اضغط علي! </a>
رمز CSS
.waves {الموضع: النسبية ؛ المؤشر: مؤشر ؛ عرض: inline block ؛ overflow: hidden ؛ text-align: المركز ؛ -webkit-tap-highlight-color: شفاف ؛ z-index: 1 ؛} -webkit-transform ؛ -webkit-transform: Scale (0) ؛ التحويل: المقياس (0) ؛ مؤشر أحداث: لا شيء} .ts-btn {width: 200px ؛ الارتفاع: 56px ؛ خط الذروة: 56px ؛ الخلفية: #f57035 ؛ اللون:رمز JS
document.addeventListener ('domContentLoaded' ، function () {var arturation = 750 ؛ // نمط سلسلة patchwork var forstyle = function (position) {var cssstr = '' ؛ for var (var key in position) {؛ انقر فوق موضع var var forrect = function (target) {var position = {top: 0 ، left: 0} ، ele = document.documentElement ؛ 'undefined'! = typeof target.getBoundingClientRect && ele.clientleft}} var show = function (event) {var pdiv = event.target ، cdiv = document.createElement ('div') ؛ pdiv.appendchild (cdiv) ؛ var rectobj = forrect (pdiv) ، _ height = event.pagey - rectobj.top ، _left. pdiv.clientwidth / 100 * 10 + ')' ؛ var position = {top: _height + 'px' ، left: _left + 'Px'} ؛ _scale ، الموضع ["-moz-transform"] = _scale ، الموضع ["-moz-transform"] = _scale ، الموضع [-ms-transform "] = _scale ، الموضع ["-o-transform] = _scale ، position.transform = _scale ، position.opacity = "1" ، position [-webkit "] "MS" ، الموضع ["-مدة نقل moz"] = المدة + "MS" ، الموضع ["-o-transition-duration"] = المدة + "ms" ، الموضع [-webkit-transition-timing-function "] = murtur 0.940) "، الموضع ["-MOZ-TRANTITION-TIMPING-Function "] =" Cubic-Bezier (0.250 ، 0.460 ، 0.450 ، 0.940) "، الموضع ["-O-TRANTITION-TIMPING-FUNCION "Bezier مكعب (0.250 ، 0.460 ، 0.450 ، 0.940)" ، cdiv.setattribute ("style" ، forstyle (position)) ؛ var finishyle = {opatity: 0 ، "-webkit-transition-duration: artur "MS" ، "-WebKit-transform": المدة + "MS" ، "-WebKit-transform": _scale ، "-moz-transform: _scale ،"-ms-transform: _scale ، "-Scale ،"-TOP: _height + "px" ، left: _left + "px" ،} ؛ forstyle (finishstyle)) ؛ setTimeOut (function () {pdiv.removechild (cdiv) ؛} ، المدة) ؛} ، 100)} document.queryselector ('.حسنًا ، هذا كل شيء ، بالمناسبة ، مهرجان سعيد في منتصف الخريف ~