عناصر زائفة متحركة

عناصر زائفة ، مثل الحصول على عناصر DOM إضافية مجانًا. فهي تسمح لنا بإضافة محتوى إضافي وديكورات والمزيد إلى صفحاتنا دون إضافة المزيد من HTML ، ويمكن أن تكون متحركة. في هذه المشاركة ، سنستخدم عنصرًا زائفًا لإضافة القليل من الذوق البصري إلى زر.

عناصر-الزائفة

ضمن CSS ، يمكننا تحديد عنصر زائف باستخدام :: before أو :: after. يتم بعد ذلك إدخال العنصر الشائع داخل العنصر الخاص بك ، بين العنصر وأي محتوى. بما أنها تعمل كعنصر خاص بها ، يمكن تصميمها ووضعها وأكثر من ذلك. بما أنها تعمل كعنصر خاص بها ، يمكن تصميمها ووضعها وأكثر من ذلك.

.pebble::before {
  ...
}
.pebble::after {
  ...
}

في هذه المرحلة ، يحتوي عنصر .pebble على عنصرين ظاهريين ملحقين ،ويمكننا تصميمهما حسب الحاجة.

ملاحظة على "::" مقابل ":"

من المقبول عمومًا أن نستخدم القولون المزدوج :: للدلالة على العناصر الزائفة (على عكس الطبقات الزائفة مثل: hover،: first-child). إذا كنت تقوم بإضافة دعم IE8 ، فمن الأفضل استخدام واحدة : بدلاً من ذلك. جميع المتصفحات الأخرى والإصدارات الأحدث من IE تدعم المزدوجة.

لا تنس "المحتوى"

عند إضافة عناصر زائفة ، هناك شيء واحد يجب أخذه في الاعتبار وهو الحاجة إلى تحديدخاصية المحتوى قبل أن تصبح مرئية على الصفحة. عندما يتم إنشاء العنصر الزائف في حالة أقل محتوى ، يمكننا خداعه في الظهور باستخدام محتوى فارغ مثل:

.pebble::before {
  content: ""
  ... more styling goes here...
}

يجب أن يتأكد هذا من أن العنصر مرئي على الشاشة.

على سبيل المثال: زر لامع

في هذا المثال ، سنستخدم عنصرًا زائفًا لإنشاء تأثير لامع على الماوس فوق زر. في ما يلي مثال على ذلك في الإجراء (مرر أو انقر لمعرفة التأثير).

للبدء ، بعض HTML:

<button>Oooh SHINY</button>

نظرًا لأننا نستخدم عناصر زائفة ، فلن نحتاج إلى أي HTML أكثر من ذلك للبدء. قد ترغب في إضافة فصل دراسي إلى الزر إذا كنت تريد وضع أكثر من نوع واحد على الصفحة ، ولكن في الوقت الحالي سنستخدم العنصر العام للبساطة.

مضيفا تأثير لمعان

تأثير اللمعان اللامع هو التدرج الخطي الذي يمر عبر الزر. لإنشاء هذا ، سنستخدم العنصر after الزائف ، ونضعه في موضع بداية خارج الزر:

button::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  bottom: -50%;
  left: -50%;
  background: linear-gradient(to bottom, rgba(229, 172, 142, 0), rgba(255,255,255,0.5) 50%, rgba(229, 172, 142, 0));
  transform: rotateZ(60deg) translate(-5em, 7.5em);
}

يتكون تأثير اللمعان من التدرج من لون الزر إلى اللون الأبيض والعودة مرة أخرى. عند هذه النقطة يجلس الآن خارج الزر.

سنحتاج إلى إخفاء الطبقة اللامعة بحيث لا تظهر إلا على الماوس. للقيام بذلك سنقوم بتعيين الخاصية overflow للزر إلى hidden . نظرًا لأن العنصر الزائف يقع داخل الزر ، فهذا يعني أن وضعه خارج الزر لن يكون مرئيًا.

button {
  background: #e5ac8e;
  color: #fff;
  font-size: 14px;
  border-radius: 0.5em;
  padding: 0 1em;
  position: relative;
  overflow: hidden;
  line-height: 32px;
}

لقد وضعت بعض التصميم الأخرى أيضًا لإعطاء الزر مظهره الخاص. شيء واحد أن نشير إليه ، هو استخدام الموقف: النسبي . لقد أضفت هذه الخاصية بحيث يوجد عنصر شبه زائف تمامًا داخل الزر. بدون تحديد الموضع ، سيتم وضع العنصر المحدد تمامًا داخل عنصر أصل.

مضيفا الرسوم المتحركة

وبما أننا سنستخدم رسومًا متحركة في هذا المثال ، فهناك خطوتان متضمنتان. الأول هو إخبار المتصفح باستخدام صورة متحركة على التمرير. ثم سنوضح بالضبط ما يستخدمه الرسم المتحرك باستخدام الإطارات الرئيسية .

اضافة حالة التمرير يمكن أن تقوم به بجمع after على hover لذلك

button:hover::after, button:focus::after {
  animation: sheen 1s forwards;
}

هنا نحن نقول للمتصفح انه في حالة التمرير ، العنصر التالي هو رسوم متحركة . تدوم الرسوم المتحركة ، التي تدعى لمعان ، ثانية واحدة وتتوقف في النهاية دون تكرار.

الأمر مهم هنا. باستخدام :after: لن يعمل hover حيث سيخبر المتصفح بالرد على حالة التمرير الخاصة بالعنصر الزائف نفسه.

لقد أضفت أيضًا حالة التركيز. هذا يعني أن المشاهدين الجدولين من خلال الصفحة سيشاهدون التأثير الواضح كذلك ، دون الحاجة إلى التمرير. (شكرا لك ، Šime Vidas ، لأجل الطرف)

دعونا تحديد إطارات مفتاحية لهذه الرسوم المتحركة:

@keyframes sheen {
  100% {
    transform: rotateZ(60deg) translate(1em, -9em);
  }
}

نحتاج فقط إلى إطار مفتاحي واحد في هذه الحالة. نظرًا لأن موضع البدء (0٪) يتم تضمينه في موضع بدء العنصر الزائف ، فإننا نقوم فقط بوصف موضع النهاية. في هذه الحالة ، يكون موضع النهاية في الجانب العلوي الأيسر من الزر. سيقوم المتصفح بعد ذلك بتحريك تأثير اللمعان عبرنا.

اعتبارات المتصفح

و ملكية الرسوم المتحركة تدعم بشكل جيد ، وكذلك العناصر الزائفة . من الجيد دائمًا التأكد من تضمين -webkit و -moz prefixes للإطارات الرئيسية وأي تحويلات.