كود CSS3 وCanves لتحقيق تأثير موجة البصمة عند النقر على الزر

لقد رأيت مؤخرًا تأثير ضغط زر جيد، حيث يحدث تأثير موجة الماء عند الضغط، ممتع جدًا، لذا قمت بتحقيقه ببساطة (لم أكن أفكر في التكيف مع المتصفحات القديمة)　

لنبدأ بالنظر إلى التأثير، كما في الصورة التالية (برنامج التسجيل gif كان سيئًا قليلاً، يبدو بطيئًا...)

　

يمكن تحقيق هذا التأثير من خلال دمج canves داخل العنصر أو من خلال css3.　

تحقيق Canves　

أخذت بعض الكود من إنترنت لتحقيق تأثير canves، وأزلت بعض التعريفات المكررة وأضفت تعليقات js، وفق الكود التالي　

كود html:<a class="btn color-1 material-design" data-color="#2f5398">أضغطني!</a>

كود css:　

* {
 box-sizing: border-box;
 outline: none;
}
body {
 font-family: 'Open Sans';
 font-size: 100%;
 font-weight: 300;
 line-height: 1.5em;
 تحرير النص:وسط;
}
.btn {
 border: none;
 display: inline-block;
 color: white;
 overflow: hidden;
 margin: 1rem;
 padding: 0;
 width: 150px;
 height: 40px;
 تحرير النص:وسط;
 line-height: 40px;
 الجذر التربيعي: 5px;
}
.btn.color-1 {
 background-color: #426fc5;
}
.btn-border.color-1 {
 background-color: transparent;
 border: 2px solid #426fc5;
 color: #426fc5;
}
.material-design {
 position: relative;
}
.material-design canvas {
 opacity: 0.25;
 position: absolute;
 top: 0;
 left: 0;
}
.container {
 align-content: center;
 align-items: flex-start;
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 justify-content: center;
 margin: 0 auto;
 max-width: 46rem;
}

js code :

var canvas = {},
  centerX = 0,
  centerY = 0,
  color = '',
  containers = document.getElementsByClassName('material-design')
  context = {},
  element = {},
  radius = 0,
  // وفقًا لـ callback توليد requestAnimationFrame الرسومي
  requestAnimFrame = function () {
   return (
    window.requestAnimationFrame    || 
    window.mozRequestAnimationFrame  || 
    window.oRequestAnimationFrame   || 
    window.msRequestAnimationFrame   || 
    function (callback) {
     window.setTimeout(callback, 1000 / 60);
    }
   );
  } (),
  // 为每个指定元素生成canves
  init = function () {
   containers = Array.prototype.slice.call(containers);
   for (var i = 0; i < containers.length; i += 1) {
    canvas = document.createElement('canvas');
    canvas.addEventListener('click', press, false);
    containers[i].appendChild(canvas);
    canvas.style.width ='100%';
    canvas.style.height='100%';
    canvas.width = canvas.offsetWidth;
    canvas.height = canvas.offsetHeight;
   }
  },
  // 点击并且获取需要的数据，如点击坐标、元素大小、颜色
  press = function (event) {
   color = event.toElement.parentElement.dataset.color;
   element = event.toElement;
   context = element.getContext('2d');
   radius = 0;
   centerX = event.offsetX;
   centerY = event.offsetY;
   context.clearRect(0, 0, element.width, element.height);
   draw();
  },
  // 绘制圆形，并且执行动画
  draw = function () {
   context.beginPath();
   سياقدائرة(مركزالصورة، مركزالصورة، الشعاع، 0، 2 * Math.PI، غير صحيح);
   ملءلونسياق = لون;
   ملءسياق();
   الشعاع += 2;
   // من خلال�断ة الشعاع أقل من عرض العنصر، يتم رسم دائرة باستمرار بزيادة الشعاع بـ 2
   إذا (الشعاع < عرضالعنصر) {
    طلبإطاراتالتحريك(رسم);
   }
  };
البدء();

تحقيق CSS3　

الآن هو كود يدوي فقط...أعتقد أن CSS3 أكثر سهولة، ربما لأنني قد اعتدت على كتابة CSS...　

كودhtml　

<a class="waves ts-btn">أضغطني!</a>

cssكود　

.waves{
  الوضع:مطلق;
  مؤشر الفأرة:نقر;
  عرض:داخل-حبس;
  الاطمئنان:مخفي;
  تحرير النص:وسط;
  -webkit-tap-highlight-color:شفاف;
  الترتيب:1;
}
.waves .waves-animation{
  الوضع:مطلق;
  الجذر التربيعي:50%;
  العرض:25px;
  الارتفاع:25px;
  شفافية:0;
  خلفية:rgba(255,255,255,0.3);
  transition:جميع 0.7s سهولة-خروج;
  transition-property:تحويل, شفافية, -webkit-transform;
  -webkit-transform:scale(0);
  تحويل: مقياس(0);
  pointer-events:none
}
.ts-btn{
  العرض: 200px;
  الارتفاع: 56px;
  خط العرض: 56px;
  خلفية: #f57035;
  لون: #fff;
  الجذر التربيعي: 5px;
}

js代码　

 document.addEventListener('DOMContentLoaded',function(){
   var duration = 750;
   // 样式string拼凑
   var forStyle = function(position){
    var cssStr = '';
    for( var key in position){
     if(position.hasOwnProperty(key)) cssStr += key+':'+position[key]+';';
    };
    return cssStr;
   }
   // 获取鼠标点击位置
   var forRect = function(target){
    var position = {
     top:0,
     left:0
    }, ele = document.documentElement;
    'undefined' != typeof target.getBoundingClientRect && (position = target.getBoundingClientRect());
    return {
      top: position.top + window.pageYOffset - ele.clientTop,
      left: position.left + 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.pageY - rectObj.top
     _left = event.pageX - rectObj.left
     _scale = 'scale(' + pDiv.clientWidth / 100 * 10 + ')';
    var position = {
     top: _height+'px',
     left: _left+'px'
    };
    cDiv.className = cDiv.className + " waves-animation",
    cDiv.setAttribute("style", forStyle(position)),
    position["-webkit-transform"] = _scale;
    position["-moz-transform"] = _scale,
    position["-ms-transform"] = _scale,
    position["-o-transform"] = _scale,
    position.transform = _scale,
    position.opacity = "1",
    position["-webkit-transition-duration"] = duration + "ms",
    position["-moz-transition-duration"] = duration + "ms",
    position["-o-transition-duration"] = duration + "ms",
    position["transition-duration"] = duration + "ms",
    position["-webkit-transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)",
    position["-moz-transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)",
    position["-o-transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)",
    position["transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)",
    cDiv.setAttribute("style", forStyle(position));
    var finishStyle = {
     opacity: 0,
     "-webkit-transition-duration": duration + "ms",  // الزمن الانتقال
     "-moz-transition-duration": duration + "ms",
     "-o-transition-duration": duration + "ms",
     "transition-duration": duration + "ms",
     "-webkit-transform" : _scale,
     "-moz-transform" : _scale,
     "-ms-transform" : _scale,
     "-o-transform" : _scale,
     top: _height + "px",
     left: _left + "px",
    };
    setTimeout(function(){
     cDiv.setAttribute("style", forStyle(finishStyle));
     setTimeout(function(){
      pDiv.removeChild(cDiv);
     },duration);
    },100)
   }
   document.querySelector('.waves').addEventListener('click',function(e){
    show(e);
   },!1);
  },!1);

هذا كل شيء، المبدأ بسيط، الحصول على موقع النقر > إضافة النمط، وبالمناسبة، عيد الأضحى مبارك~

هذا هو نهاية محتويات هذا المقال، آمل أن يكون قد ساعدكم في التعلم، وأتمنى أن تدعموا وتشجعوا تعليمات الركض.

البيان: محتويات هذا المقال تم جمعها من الإنترنت، ملكية المحتويات لصاحب الحقوق، تم جمع المحتويات من قبل المستخدمين عبر الإنترنت بطرق متفرقة، هذا الموقع لا يمتلك حقوق الملكية، لم يتم تعديل المحتويات بشكل يدوي، ولا يتحمل هذا الموقع أي مسؤولية قانونية متعلقة بذلك. إذا اكتشفتم محتوى يشتبه في انتهاك حقوق النسخ، مرحبًا بكم في إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال # ب @) لتقديم الشكوى، وقدموا الأدلة ذات الصلة، إذا تم التحقق من صحة الشكوى، سيتم حذف المحتوى المزعوم فورًا.