ما ستظهر لك هذه المقالة هو كيفية استخدام HTML5/CSS3 لإنشاء صفحة HTML مع ملاحظات لزجة في 5 خطوات فقط. العروض كما يلي:
(ملاحظة: النص الموجود في الصورة ملفقة ومضحك. إذا كان هناك أي تشابه ، فهو مصادفة بحتة ، شكرًا لك!)
ملاحظة: يمكن رؤية هذا التأثير في Safari و Chrome و Firefox و Opera. نظرًا لأن دعم HTML5 غير مكتمل في IE ، لا يمكن رؤية التأثير.
الخطوة 1: إنشاء HTML الأساسي والمربعات
أضف أولاً بنية HTML الأساسية وإنشاء المربع الأساسي ، والرمز هو كما يلي:
<ul>
<li> <a href = "#">
<h2> dudu: </h2>
<p> لماذا لم تكن هناك أي منشورات جميلة مؤخرًا؟ بالتأكيد سأقدم توصية عنوان ، أوصي! التوصية! </p>
</a> </li>
<li> <a href = "#">
<h2> العم توم: </h2>
<p> ذهب أحد أعضاء الفريق إلى Microsoft للقيام SDE3 ، وكان عليه توظيف عضو جديد مرة أخرى </p>
</a> </li>
<li> <a href = "#">
<h2> الأخ التقني: </h2>
<p> O2DS هو نفس الكتاب الذي ترجمته. يجب أن أترجمها أسرع منه. العمل الإضافي في الليل ، بسرعة! سريع! سريع! </p>
</a> </li>
<li> <a href = "#">
<h2> Artech: </h2>
<p> هناك عدد قليل جدًا من المنشورات في WCF. يبدو أنني يجب أن أنشر المزيد من المنشورات ليتعلم الجميع </p>
</a> </li>
<li> <a href = "#">
<h2> jirigala: </h2>
<p> لجعل إدارة الإذن وإدارة سير العمل إلى أقصى قدر
</a> </li>
<li> <a href = "#">
<h2> سيد فنون القتال: </h2>
<p> لن أذهب إلى المقابلة لمدة تقل عن 25000 يوان ، إنها الجدة </p>
</a> </li>
</ul>
تضيف كل ملاحظة اتصال HREF ، وذلك أساسًا لدعم الوصول إلى لوحة المفاتيح ، ورمز CSS كما يلي:
*{
الهامش: 0 ؛
الحشو: 0 ؛
}
جسم{
Font-Family: Arial ، Sans-Serif ؛
حجم الخط: 100 ٪ ؛
الهامش: 3EM ؛
الخلفية:#666 ؛
اللون: #ffff ؛
}
H2 ، P {
حجم الخط: 100 ٪ ؛
خط الوزن: طبيعي ؛
}
ul ، li {
على غرار القائمة: لا شيء ؛
}
ul {
الفائض: مخفي.
الحشو: 3EM ؛
}
ul li a {
تدمير النص: لا شيء ؛
اللون:#000 ؛
الخلفية: #FFC ؛
العرض: كتلة ؛
الارتفاع: 10EM ؛
العرض: 10EM ؛
الحشو: 1EM ؛
}
ul li {
الهامش: 1EM ؛
تعويم: اليسار.
}
الآثار هي كما يلي:
الخطوة 2: الظلال والشخصيات المكتوبة بخط اليد
هذه الخطوة هي إدراك تأثير ظل المربعات وتغيير الخط إلى حكيم (اللغة الإنجليزية فقط). نظرًا لأن Google توفر الدعم ل API FONT ، يمكننا استخدامه مباشرة. أولاً ، أضف مكالمة إلى Google API:
<link href = "http://fonts.googleapis.com/css؟family=Reenie+Beanie:regular" rel = "STYLESHEET" type = "text/css">
ثم اضبط الإشارة إلى هذا الخط:
ul li H2
{
حجم الخط: 140 ٪ ؛
خط الرصيف: جريئة ؛
حشوة القاع: 10 بكسل ؛
}
ul li p
{
Font-Family: "Reenie Beanie" ، Arial ، Sans-Serif ، Microsoft Yahei ؛
حجم الخط: 110 ٪ ؛
}
فيما يتعلق بالظلال ، نظرًا لأن كل متصفح لا يدعمها تمامًا ، يجب معالجتها بشكل منفصل ، والرمز كما يلي:
ul li a
{
تدمير النص: لا شيء ؛
اللون: #000 ؛
الخلفية: #FFC ؛
العرض: كتلة ؛
الارتفاع: 10EM ؛
العرض: 10EM ؛
الحشو: 1EM ؛ / * Firefox */
-Moz-box-shadow: 5px 5px 7px RGBA (33،33،33،1) ؛ / * Safari+Chrome */
-webkit-box-shadow: 5px 5px 7px RGBA (33،33،33 ، .7) ؛ / * أوبرا */
box-shadow: 5px 5px 7px RGBA (33،33،33 ، .7) ؛
}
الآثار هي كما يلي:
الخطوة 3: إمالة المربع
من أجل إمالة المربع ، نحتاج إلى إضافة الكود التالي في li-> a:
ul li a {
-webkit-transform: تدوير (-6deg) ؛
-O التحول: تدوير (-6deg) ؛
-moz-transform: تدوير (-6deg) ؛
}
ولكن من أجل جعل الإمالة المربعة بشكل عشوائي ، بدلاً من كل الإمالة ، نحتاج إلى استخدام محدد CSS3 الجديد ، بحيث يميل المربع 4 DEGs كل 2 ، 3 DEGs كل 3 ، و 5 DEGs كل 6:
ul li: nth-child (حتى) أ {
-O التحول: تدوير (4DEG) ؛
-webkit-transform: تدوير (4DEG) ؛
-Moz-transform: تدوير (4DEG) ؛
الموقف: قريب
أعلى: 5 بكسل ؛
}
ul li: nth-child (3n) a {
-O التحول: تدوير (-3deg) ؛
-webkit-transform: تدوير (-3deg) ؛
-moz-transform: تدوير (-3deg) ؛
الموقف: قريب
أعلى: -5px ؛
}
ul li: nth-child (5n) a {
-O التحول: تدوير (5DEG) ؛
-بكيت تحويل: تدوير (5DEG) ؛
-moz-transform: تدوير (5DEG) ؛
الموقف: قريب
أعلى: -10px ؛
}
الآثار هي كما يلي:
الخطوة 4: تحجيم المربع عند التحوم والتركيز
لتحقيق تأثير التحجيم عندما تحوم والتركيز ، نحتاج إلى إضافة الكود التالي:
ul li a: hover ، ul li a: focus {
-moz-box-shadow: 10px 10px 7px rgba (0،0،0 ، .7) ؛
-webkit-box-shadow: 10px 10px 7px RGBA (0،0،0 ، .7) ؛
box-shadow: 10px 10px 7px rgba (0،0،0 ، .7) ؛
-webkit-transform: Scale (1.25) ؛
-moz-transform: Scale (1.25) ؛
-O التحول: مقياس (1.25) ؛
الموقف: قريب
Z-index: 5 ؛
}
ضبط z-index إلى 5 هو السماح للمربع بتغطية المربعات الأخرى عند التوسع. في الوقت نفسه ، نظرًا لأنه يتم تعيين التركيز أيضًا ، فإنه يدعم أيضًا الوصول إلى مفتاح التبديل ، والتأثير على النحو التالي:
الخطوة 5: الانتقال السلس وأضف الألوان
المؤثرات الخاصة في الخطوة الرابعة تبدو قاسية بعض الشيء. يمكننا إضافة الانتقال لتحقيق تأثير الرسوم المتحركة السلس. بالإضافة إلى ذلك ، الألوان واحدة نسبيا. يمكننا وضع ألوان مختلفة. أولاً ، أضف الانتقال في ul-> li-> a:
-Moz-transition: -moz-transform .15S Linear ؛
-الرانس: -O-transform .15S خطية ؛
-Webkit-transition: -webkit-transform .15S Linear ؛
ثم حدد ألوان مختلفة في و 3n:
ul li: nth-child (حتى) أ {
-O التحول: تدوير (4DEG) ؛
-webkit-transform: تدوير (4DEG) ؛
-Moz-transform: تدوير (4DEG) ؛
الموقف: قريب
أعلى: 5 بكسل ؛
الخلفية: #cfc ؛
}
ul li: nth-child (3n) a {
-O التحول: تدوير (-3deg) ؛
-webkit-transform: تدوير (-3deg) ؛
-moz-transform: تدوير (-3deg) ؛
الموقف: قريب
أعلى: -5px ؛
الخلفية: #CCF ؛
}
وبهذه الطريقة ، يتم إنجاز تأثيرنا النهائي:
لخص
في هذه المرحلة ، استخدمنا الميزات الأساسية لـ HTML5 و CSS3 لإنشاء تأثير جيد للنشر. HTML5/CSS3 هو في الواقع قوي جدا. إذا قمت بإضافة بعض الميزات المتقدمة ، مثل الجمع بينها وبين JavaScript ، فيمكنك تحقيق تأثير أكثر روعة. يمكن رؤيته من مقالات سلسلة مختبر HTML5 التي قدمها لك ديان بريك.
أيضا: النص في الصورة ملفقة بحتة. إذا كان هناك أي تشابه ، فهي مصادفة بحتة. شكرًا لك!