لقد رأيت مؤخرًا تأثيرًا جيدًا للزر. عند النقر ، أنتج تأثير تموجات. لقد كانت ممتعة للغاية ، لذلك قمت بتنفيذها ببساطة (لا أفكر في قضية التوافق لمتصفحات الإصدار المنخفضة)
دعنا نلقي نظرة على التأثير أولاً ، كما هو موضح في الشكل أدناه (تسجيل برنامج GIF سيء بعض الشيء ، يبدو أنه crazi ...)
يمكن تنفيذ هذا التأثير بواسطة CANTES CANVES داخل العناصر ، أو بواسطة CSS3.
يمكن أن ينفذ
يتم اختيار نسخة من الكود الذي تم تنفيذه بواسطة Canves عبر الإنترنت ، وإزالتها قليلاً بعض أنماط التعريف المكررة وأعطت تعليقات JS. الرمز كما يلي
HTML Code: <a data-color = "#2f5398"> اضغط على لي! </a>
رمز CSS:
* {box-size: border-box ؛ الخطوط العريضة: لا شيء ؛} الجسم {font-family: 'Open Sans' ؛ حجم الخط: 100 ٪ ؛ خط الرصيف: 300 ؛ ارتفاع الخط: 1.5EM ؛ نص text: center ؛}. btn {الحدود: لا شيء ؛ العرض: كتلة مضمنة. اللون: أبيض. الفائض: مخفي. الهامش: 1rem ؛ الحشو: 0 ؛ العرض: 150 بكسل ؛ الارتفاع: 40 بكسل ؛ محاذاة النص: المركز ؛ رفع الخط: 40 بكسل ؛ Border-Radius: 5px ؛}. Btn.Color-1 {background-color: #426fc5 ؛}. الحدود: 2 بكسل Solid #426FC5 ؛ اللون: #426fc5 ؛}. تصميم المواد {الموضع: النسبية ؛}. canvas تصميم المادة {opatity: 0.25 ؛ الموقف: مطلق ؛ أعلى: 0 ؛ اليسار: 0 ؛}. حاوية {محاذاة المحتوى: المركز ؛ محاذاة عناصر: فليكس ستارت ؛ العرض: فليكس. الاتجاه المرن: صف ؛ Flex-Wrap: Wrap ؛ تبرير المحتوى: المركز ؛ الهامش: 0 Auto ؛ Max-Width: 46Rem ؛}رمز JS:
var canvas = {} ، centerx = 0 ، centery = 0 ، color = '' ، الحاويات = document.getElementsByClassName ('design design') context = {} ، element = {} ، radius = 0 ، Window.MozRequestanimationFrame || } () ، // إنشاء canves init = function () {حاويات = array.prototype.slice.call (الحاويات) ؛ لـ (var i = 0 ؛ i <containers.length ؛ i += 1) {canvas = document.createElement ('canvas') ؛ canvas.addeventListener ('click' ، اضغط ، false) ؛ الحاويات [i] .appendchild (قماش) ؛ canvas.style.width = '100 ٪' ؛ canvas.style.height = '100 ٪' ؛ canvas.width = canvas.offsetWidth ؛ canvas.height = canvas.offsetheight ؛ }} ، // انقر فوق والحصول على البيانات المطلوبة ، مثل الإحداثيات النقر ، حجم العنصر ، Color Press = function (event) {color = event.toElement.ParentElement.dataset.color ؛ element = event.ToElement ؛ context = element.getContext ('2d') ؛ نصف القطر = 0 ؛ centerx = event.offsetx ؛ Centery = event.offsety ؛ context.clearRect (0 ، 0 ، element.width ، element.Height) ؛ يرسم()؛ } ، // ارسم الدائرة وتنفيذ الرسوم المتحركة draw = function () {context.beginPath () ؛ Context.Arc (CenterX ، Centery ، Radius ، 0 ، 2 * Math.pi ، false) ؛ context.fillStyle = color ؛ context.fill () ؛ نصف قطر += 2 ؛ // ارسم الدائرة بنصف قطر += 2 عن طريق الحكم على أن نصف القطر أصغر من عرض العنصر ، ارسم الدائرة باستمرار بنصف قطر += 2 إذا (RADIUS <element.width) {requestanimframe (draw) ؛ }} ؛ init () ؛تنفيذ CSS3
التالي هو الرمز الذي يصنع يدويًا ... أعتقد أنه من المريح تنفيذ CSS3 ، ربما اعتدت على كتابة CSS ...
رمز HTML
<a> اضغط علي! </a>
رمز CSS
. المؤشر: مؤشر. العرض: كتلة مضمنة. الفائض: مخفي. محاذاة النص: المركز ؛ -webkit-tap-highlight-color: شفاف ؛ z-index: 1 ؛}. Waves .waves-animation {position: absolute ؛ الحدود الحدودية: 50 ٪ ؛ العرض: 25 بكسل ؛ الارتفاع: 25 بكسل ؛ العتامة: 0 ؛ الخلفية: RGBA (255،255،255،0.3) ؛ الانتقال: كل 0.7s سهولة ؛ الممتلك الانتقالي: التحويل ، العتامة ، -webkit-transform ؛ -webkit-transform: Scale (0) ؛ التحويل: مقياس (0) ؛ مؤشر أحداث: لا شيء} .ts-btn {width: 200px ؛ الارتفاع: 56 بكسل ؛ ارتفاع الخط: 56px ؛ الخلفية: #F57035 ؛ اللون: #fff ؛ الحدود الحدودية: 5px ؛}رمز JS
document.addeventListener ('domContentLoaded' ، function () {var arturation = 750 ؛ // نمط سلسلة patchwork var forstyle = function (position) {var cssstr = '' ؛ for var (var key in position) {؛ انقر فوق الموقف var = function (target) {var position = {top: 0 ، left: 0} ، eLe = document.documentElement ؛ ele.clientleft}} var show = event) {var pdiv = event.target ، cdiv = document.createElement ('div') ؛ + pdiv.clientwidth / 100 * 10 + ')' ؛ الموضع ["-moz-transform"] = _scale ، الموضع ["-ms-transform"] = _scale ، الموضع [-o-transform "] = _scale ، position.transform = _scale ، position.opacity =" 1 " الموضع ["-o-transition-duration"] = المدة + "MS" ، الموضع ["-o-drantition"] = المدة + "MS" ، الموضع ["دقة الانتقال"] = المدة + "MS" ، الموضع [-WebKit-Transition-timing-function "=" Cubic-Bezier (0.250 ، 0.460 ، 0.450 ، 0.940) الموضع ["-moz-transition-timing-function"] = "cubic-bezier (0.250 ، 0.460 ، 0.450 ، 0.940)" ، الموضع [-O-Transition-timing-function "] =" cubic-bezier (0.250 ، 0.460 ، 0.450 ، 0.940) ، الموضع 0.460 ، 0.450 ، 0.940) "، cdiv.setattribute (" style "، forstyle (position)) ؛ var finishstyle = {opacity: 0 ، duration + "MS" ، "-webkit-transform": _scale ، "-moz-transform": _scale ، "-ms-transform": _scale ، "-o-transform": _scale ، top: _height + "px" ، left: Forstyle (Finishstyle) ؛كل هذه هي المبادئ ، والمبدأ بسيط. احصل على موقع النقر> إضافة نمط بالمناسبة ، مهرجان سعيد في منتصف الخريف ~
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.