قم بتحليل عملية التنفيذ. حرك الماوس إلى العقدة لاكتشاف ما إذا كانت العقدة موجودة لتمكين تنفيذ تلميح الأداة (اسم الفئة، والسمات، وما إلى ذلك). اكتشف الموضوع والموقع (اسم الفئة، والسمات، وما إلى ذلك). فقاعات للتعلم من الآخرين.
دعونا أولاً نلقي نظرة على نمط تلميح الأدوات لعنصر واجهة المستخدم
من الواضح أنه تتم إضافة موضع الفقاعة من خلال برنامج جافا سكريبت
دون مزيد من اللغط، دعونا نضع بعض التوقعات. ليست هناك حاجة إلى نصوص JavaScript. لا يتطلب تنفيذ Pure CSS إضافة عناصر جديدة** (باستخدام عناصر زائفة بعد وقبل)** ليست هناك حاجة لمطابقة اسم الفئة، وذلك باستخدام محددات السمات مباشرةً** ([attr ])** يدعم النمط الافتراضي** (عندما لا تحدد العلامة الموضوع والموضع)** أمر ضروري** (حدده مباشرة في العلامة، ثم اتركه لـ css للمطابقة)** استخدم sass لتنفيذ موضوع وموضع الفقاعة، تطوير المعالج الأولي (يمكن للطلاب الذين لا يفهمون تحويلها إلى CSS ) أتش تي أم أل تعريف مواصفات التوجيه
إعلان حتمي<button tooltip='أنا بطة المحتوى' Effect='light' place='top-left'>أعلى اليسار</button>
اكتب بضعة أزرار أولاً
العنصر المرجعي للنمط ui
<div class=container> <div class=top> <button tooltip=top place=top-left Effect=light>أعلى اليسار</button> <button tooltip=top left left top left place=top>top</button> < زر تلميح الأدوات=أعلى اليمين الموضع=أعلى اليمين>أعلى اليمين</button> </div> <div class=left> <button Tooltip=upper left أعلى اليسار أعلى اليسار أعلى اليسار أعلى اليسار أعلى اليسار أعلى اليسار أعلى اليسار موضع=left-top>أعلى اليسار</button> <button tooltip=leftplace=left Effect=light>يسار</button> < زر تلميح الأدوات = اليسار واليمين الموضع = اليسار - أسفل > أسفل اليسار </ زر > </div> <div class=right> <button Tooltip=أعلى اليمين أعلى اليمين أعلى اليمين أعلى اليمين أعلى اليمين أعلى اليمين أعلى اليمين أعلى اليمين Place=right-top>أعلى اليمين</button> <button tooltip=right place=right Effect=light>يمين</button> < زر tooltip=يمين موضع سفلي=right-bottom> أسفل اليمين</button> </div> <div class=bottom> <button tooltip=bottom left Bottom left left place=bottom-left>أسفل اليسار</button> <button tooltip=bottom الموضع=bottom Effect=light>أسفل</button> <button tooltip=bottom right place=bottom-right>أسفل اليمين</button> </div></div>تنفيذ منطق الكود الأساسي لـ CSS
يراقب التمرير حركة الماوس للداخل والخارج، ويطابق **[tooltip]** التسميات التي تحتوي على هذه السمة، وبعدها فقاعة، وقبلها مثلث
/* مطابقة العناصر مع سمة تلميح الأداة */[tooltip] { الموضع: نسبي /* النمط الافتراضي للمثلثات*/ &::after { العرض: لا يوجد محتوى: attr(tooltip); / & ::قبل { العرض: لا يوجد محتوى: '' } /* حرك الماوس إلى العنصر لعرض الفقاعات والمثلثات */ &:hover { &::after {display: block } &::before { عرض: كتلة } }}الآن سيكون التأثير فعالاً بعد تحريك الماوس فيه
من أجل رؤية التأثير بسهولة، يمكن للاختبار حظر الفقاعات والمثلثات الافتراضية.
/* النمط الافتراضي للفقاعات*/&::after { العرض: كتلة المحتوى: attr(tooltip);}/* النمط الافتراضي للمثلثات*/&::before { العرض: المحتوى: '';}التأثير الحالي هو على النحو التالي
تم ضبط الشاشة الأساسية بالطبع على الوضع المطلق
/* النمط الافتراضي للفقاعة */&::after { العرض: كتلة؛ العرض: 200 بكسل؛ نصف قطر الحدود: 4 بكسل؛ ظل الصندوق: 0 10 بكسل 20 بكسل -5 بكسل rgba(0, 0, 0, 0.4); z-index: 100; @extend .tooltip-theme-dark /* وراثة السمة الافتراضية (نص أبيض على خلفية سوداء) */ }/* نمط المثلث الافتراضي */&::before {display: كتلة؛ الموضع: مطلق؛ الحدود: مؤشر z شفاف: 100؛ @extend .triangle-theme-dark; */التأثير الحالي هو على النحو التالي
تحديد موضوعين لكل منهما
$white: #fff;$black: #313131;/* سمة الفقاعة*/.tooltip-theme-dark { color: $white-color: $black;}.tooltip-theme-light { color: $black; لون الخلفية: $white; الحدود: 1 بكسل صلب $black;}/* سمة المثلث*/.triangle-theme-dark { border-top-color: $black;}.triangle-theme-light { border-top-color: $black /* نفس اللون الداكن الآن* /} تخصيص مواضع الفقاعات والمثلثات (مثال واحد فقط لاتجاه واحد) /* موضع الفقاعة*//*----الأعلى----*/.tooltip-placement-top { القاع: calc(100% + 10px); اليسار: 50%; تحويل: ترجمة(-50%, 0 );.tooltip-placement-top-right { Bottom: calc(100% + 10px left: 100%; تحويل: ترجمة(-100%, 0).tooltip-placement-top-left { Bottom: calc(100% + 10px); left: 0; تحويل: ترجمة(0, 0)}/* موضع المثلث*//*----top-- --*/.triangle-placement-top { Bottom: calc(100% + 5px left: 50%; تحويل: ترجمة(-50%, 0);}.triangle-placement-top-left { أسفل: calc(100% + 5px); يسار: 10px;}.triangle-placement-top-right { أسفل: calc(100% + 5px يمين: 10px;} التقاط الموقع، الموضوعوهذا أيضًا هو الرمز الأساسي. استخدم محدد السمات لمطابقة القيمة الموجودة على الملصق، ثم قم بتعيين أنماط مختلفة.
مطابقة الفقاعات، وموضوعات المثلث
&[effect=light] { &::after { @extend .tooltip-theme-light } &::before { @extend .triangle-theme-light }}تطابق مواضع الفقاعة والمثلث، 12 موضعًا
@each $placement in top,top-right,top-left,right,right-top,right-bottom,bottom,bottom-right,bottom-left,left,left-top,left-bottom { &[placement=# {$placement}] { &::after { @extend .tooltip-placement-#{$placement} } &::before { @extend .triangle-placement-#{$placement} }};إذا كانت التسمية لا تحتوي على سمة موضع / كانت فارغة، فسيتم توريث الموضع العلوي بشكل افتراضي.
&:not([placement]),&[placement=] { &::after { @extend .tooltip-placement-top } &::before { @extend .triangle-placement-top }}التأثير الحالي هو على النحو التالي
لنجعل النص أطول ونضيف العرض: لا شيء إلى الأنماط الافتراضية للفقاعات والمثلثات.
مقسمة إلى أربعة اتجاهات، أعلى، أسفل، يسار، ويمين، أربعة رسوم متحركة
@keyframes Anime-top { from { opacity: .5; Bottom: 150% }}@keyframes Anime-bottom { from { opacity: .5; .5; يمين: 150%;قم بمطابقة موضع الفقاعة لتحديد الرسوم المتحركة التي سيتم تنفيذها. استخدم **[attr^=]** للتحديد. على سبيل المثال، يمكن أيضًا مطابقة الجزء العلوي الأيسر والأعلى الأيمن.
/* تعيين الرسوم المتحركة*/@each $placement في الأعلى واليمين والأسفل واليسار { &[placement^=#{$placement}] { &::after, &::before { Animation: Anime-#{$placement} 300 مللي ثانية للأمام بسهولة } }}التأثير النهائي هو على النحو التالي
مرفق عنوان Codepen codepen.io/anon/pen/yR...
تلخيصما ورد أعلاه هو تطبيق CSS خالص (بدون برنامج نصي) وهو تأثير سريع لنص توجيه Html قدمه المحرر، وآمل أن يكون مفيدًا لك. إذا كانت لديك أي أسئلة، فيرجى ترك رسالة لي وسيقوم المحرر بالرد عليك وقت. أود أيضًا أن أشكر الجميع على دعمكم لموقع VeVb للفنون القتالية!
إذا كنت تعتقد أن هذه المقالة مفيدة لك، فنحن نرحب بإعادة طبعها، يرجى الإشارة إلى المصدر، شكرًا لك!