تعليق: عندما يتعلق الأمر بالمنزلق ، في الماضي ، تم استخدام CSS+JS لتحقيق تأثيرات التبديل ذات الصلة. لقد سمعت أن الجميع يناقشون طريقة التنفيذ لاستخدام HTML5+CSS3 ، لكنني لم أقم بتطبيقها بنفسي. حسنًا ، لدي وقت للعب CSS3 هذه المرة. يمكن للأصدقاء المهتمين معرفة المزيد
حسنًا ، آخر مرة قلت إنني سأضيف بعض المقالات بسرعة ، لكنني كسرت الموعد بهدوء. تم نشره فقط في شهر آخر ، وهو أمر محبط حقًا. لقد وجدت أنني لم أتمكن دائمًا من العثور على الوقت مؤخرًا ، ورتبت بشكل أساسي مشروعًا واحدًا تلو الآخر. إما لم أتمكن من العثور على الموضوع الصحيح عندما كنت أحرارًا ، أو لم أتمكن من العثور على وقت عندما كنت في حيرة من أمري. لذلك قررت تلخيص نقاط المعرفة للمشاكل التي كنت أعاني منها لفترة من الزمن ، ودراستها واحدة تلو الأخرى عندما أكون حرًا ، ثم تنظمها في مقالات ومشاركتها.بدءًا من الموضوع ، عند ذكر Slider ، كنت تستخدم دائمًا CSS+JS لتحقيق تأثيرات التبديل ذات الصلة. لقد سمعت أن الجميع يناقشون طريقة التنفيذ لاستخدام HTML5+CSS3 ، لكنني لم أقم بتطبيقها بنفسي. حسنًا ، لدي وقت للعب CSS3 هذه المرة. في الواقع ، لقد انجذبت أيضًا رسالة على Weibo. رؤية أن النتائج التي حققها الآخرون كانت جيدة جدًا ، كان لدي الرغبة في القيام بذلك.
1. مخطط التكاثر
لا يبدو الأمر مختلفًا كثيرًا عن التأثير الذي تم تحقيقه مع JS في الماضي ، لكن الشعور العام أنيق للغاية. حسنًا ، قوة CSS3 هي أنني كتبت رمزًا صغيرًا جدًا لتحقيق نتائج أكثر تعقيدًا. ومع ذلك ، فإن هذا المثال يحتوي أيضًا على شيء غير مثالي. عند التبديل بين صورتين ، إذا كانت هناك صور في الوسط ، فستظل تراها أثناء تنفيذ الرسوم المتحركة CSS3 ، والتي تكون أقل قوة. لكن فكر في الأمر ، هذا هو التأثير الذي حققته CSS3 النقي. لا يمكن رؤية هيكل HTML المعقد الذي تم تنفيذه باستخدام JS هنا ، وبالتالي يصعب تنفيذ التأثير أعلاه مع CSS3.
2. هيكل HTML
<viv>
<إدخال النوع المحدد = "راديو">
<نوع الإدخال = "الراديو">
<نوع الإدخال = "الراديو">
<نوع الإدخال = "الراديو">
<نوع الإدخال = "الراديو">
<viv>
<viv>
<viv>
<article>
<viv>
<h1> title1 </h1>
<a href = "#"> description1 </a>
</div>
<img src = "img/pic1.png"/>
</article>
<article>
<viv>
<h1> title2 </h1>
<a href = "#"> description2 </a>
</div>
<img src = "img/pic2.png"/>
</article>
<article>
<viv>
<h1> title3 </h1>
<a href = "#"> description3 </a>
</div>
<img src = "img/pic3.png"/>
</article>
<article>
<viv>
<h1> title4 </h1>
<a href = "#"> الوصف 4 </a>
</div>
<img src = "img/pic4.png"/>
</article>
<article>
<viv>
<h1> title5 </h1>
<a href = "#"> description5 </a>
</div>
<img src = "img/pic5.png"/>
</article>
</div>
</div>
</div>
<viv>
<label for = "slider1"> </billy>
<label for = "slider2"> </billy>
<label for = "slider3"> </billy>
<label for = "slider4"> </billy>
<label for = "slider5"> </billy>
</div>
<viv>
<label for = "slider1"> </billy>
<label for = "slider2"> </billy>
<label for = "slider3"> </billy>
<label for = "slider4"> </billy>
<label for = "slider5"> </billy>
</div>
</div>
الرمز أعلاه هو بنية HTML الرئيسية ، التي تحتوي على مجموعة راديو إدخال ، والتي يمكنك رؤيتها هنا كمحور ، ويلعب دورًا مهمًا للغاية في هذا المثال (لهذا السبب لا أريد إخفاءه في المثال ، يجب ألا يكون البطل الحقيقي هو البطل وراء الكواليس).
تحتوي المنزلقات أدناه على صور تحتاج إلى عرض. يبدو هنا تأثير الباب المنزلق ، الذي يعرض صورًا مختلفة عن طريق التحكم في الهامش الداخلي.
عناصر التحكم هي سهم التبديل على الجانبين الأيسر والأيمن من الصورة. لا تقلق ، لماذا تحتاج إلى تصميم 5؟ يبدو فقط أن اثنين كافية. يرجى تذكرنا أنه في هذا المثال ، لن نستخدم JS أبدًا لتحقيق التبديل.
آخر نشط هو زر النقر أسفل الصورة. يمكنك تحديد الصورة التي تريد تصفحها مباشرة بالنقر فوقها. يمكنك أيضًا إثراء الهيكل في الداخل لتصميم تأثير الصورة المصغرة.
3. ورقة نمط CSS
charset utf-8 ؛
/* شائع */
body {background: #DDD ؛ Overflow-X: Hidden ؛}
#bd {width: 960px ؛ margin: 100px auto ؛ max-width: 960px ؛}
/ * الوحدة النمطية: Sliders */
#sliders {
الحدود الحدودية: 5px ؛
box-shadow: 1px 1px 4px #666 ؛
الحشو: 1 ٪ ؛
الخلفية: #ffff ؛
}
#overflow {
العرض: 100 ٪ ؛
الفائض: مخفي.
}
#sliders .inner {
العرض: 500 ٪ ؛
Transiton: All 1S Linear ؛
-بكيت ترانس: كل 1S خطي ؛
}
مقال #Sliders {
تعويم: اليسار.
العرض: 20 ٪ ؛
}
#sliders مقالة .info {
الموقف: مطلق ؛
العتامة: 0 ؛
الحشو: 30 بكسل ؛
اللون: #666 ؛
Font-Family: Arial ؛
الانتقال: عتامة 0.1s سهولة ؛
-webkit-transform: Translatez (0) ؛
-بكيت ترانس: عتامة 0.1S سهولة ؛
}
#Sliders article .info H1 {
حجم الخط: 22px ؛
خط الرصيف: جريئة ؛
الهامش: 0 0 5px ؛
}
#Sliders article .info a {
اللون: #666 ؛
تدمير النص: لا شيء ؛
}
/ * الوحدة النمطية: عناصر التحكم */
#Controls {
الارتفاع: 50 بكسل ؛
العرض: 100 ٪ ؛
الهامش: -25 ٪ ؛
}
#Controls Label {
العرض: لا شيء ؛
العرض: 50 بكسل ؛
الارتفاع: 50 بكسل ؛
العتامة: 0.3 ؛
المؤشر: مؤشر.
}
تسمية #Controls: Hover {
العتامة: 1 ؛
}
/ * الوحدة النمطية: نشط */
#نشيط{
العرض: 100 ٪ ؛
الهامش: 23 ٪ ؛
محاذاة النص: المركز ؛
}
#{تسمية {
العرض: كتلة مضمنة.
العرض: 10px ؛
الارتفاع: 10 بكسل ؛
الحدود الحدودية: 5px ؛
الخلفية: #BBB ؛
بلون الحدود: #777 ؛
}
#Active Label: Hover {
الخلفية: #CCC ؛
}
/ * تم تسجيل تغيير نمط التغيير */
#Slider1: تم فحص ~ #Active Label: Nth-Child (1) ،
#slider2: تم فحص ~ #Active Label: Nth-Child (2) ،
#Slider3: تم التحقق من ~ #Active Label: Nth-Child (3) ،
#Slider4: تم التحقق من ~ #Active Label: Nth-Child (4) ،
#slider5: تم التحقق من ~ #Active Label: nth-child (5) {
الخلفية: #333 ؛
}
#Slider1: تم التحقق من ~ #Controls Label: Nth-Child (5) ،
#slider2: تم التحقق من ~ #Controls Label: Nth-Child (1) ،
#Slider3: تم التحقق من ~ #Controls Label: Nth-Child (2) ،
#Slider4: تم التحقق من ~ #Controls Label: Nth-Child (3) ،
#slider5: تم التحقق من ~ #Controls تسمية: nth-child (4) {
العرض: كتلة ؛
تعويم: اليسار.
الخلفية: url (../ img/prev.png) عدم التكرار ؛
الهامش اليساري: -70 بكسل ؛
}
#Slider1: تم التحقق من ~ #Controls Label: Nth-Child (2) ،
#Slider2: تم التحقق من ~ #Controls Label: Nth-Child (3) ،
#Slider3: تم التحقق من ~ #Controls Label: Nth-Child (4) ،
#Slider4: تم التحقق من ~ #Controls Label: Nth-Child (5) ،
#slider5: تم التحقق من ~ #Controls التسمية: nth-child (1) {
العرض: كتلة ؛
تعويم: صحيح.
الخلفية: url (../ img/next.png) بدون تكرار ؛
يمين الهامش: -70 بكسل ؛
}
#Slider1: تم التحقق من ~ #Sliders المقالة: Nth-Child (1) .info ،
#slider2: تم التحقق من ~ #Sliders المقالة: nth-child (2) .info ،
#slider3: تم التحقق من ~ #Sliders المقالة: Nth-Child (3) .info ،
#Slider4: تم التحقق من ~ #Sliders المقالة: Nth-Child (4) .info ،
#slider5: تم التحقق من ~ #Sliders المقالة: nth-child (5) .info {
العتامة: 1 ؛
الانتقال: جميع 0.6s سهولة 1S ؛
-الويبكيت الانتقال: جميع 0.6s سهولة 1S ؛
}
#slider1: تم التحقق ~ #sliders .inner {
الهامش اليساري: 0 ؛
}
#slider2: فحص ~ #sliders .inner {
الهامش اليساري: -100 ٪ ؛
}
#slider3: تم فحص ~ #sliders .inner {
الهامش اليساري: -200 ٪ ؛
}
#slider4: فحص ~ #sliders .inner {
الهامش اليساري: -300 ٪ ؛
}
#slider5: تم التحقق من ~ #sliders .inner {
الهامش اليساري: -400 ٪ ؛
}
حسنًا ، أعترف أن رمز CSS أعلاه أكثر تعقيدًا وتعقيدًا ، لكنه يحقق حقًا تأثيرًا رائعًا للغاية ، وعندما انتهيت من كتابته ، تأثرت أيضًا بالسحر الضخم لـ CSS3. . .
يستخدم الرمز في النصف الأول من هذا بشكل أساسي لتصميم بنية شريط التمرير ، بما في ذلك بعض الزوايا المستديرة وتصميمات تجميل الظل. يحتوي الشوط الثاني بشكل أساسي على بعض تأثيرات الرسوم المتحركة لتحقيق بعض التأثيرات الديناميكية عند تبديل الصور أو أزرار التحكم. ومع ذلك ، فإن الشيء الأكثر أهمية هو استخدام محدد CSS3 السفلي ، والذي يدرك حقًا وظيفة تبديل الصور. أعتقد حقًا أن المختارين يلعبون دورًا مهمًا للغاية في الأمثلة ، لأن هذا ما تجاهلته في تعلم CSS3 في الماضي. أعتقد دائمًا أن ما هو قوي في CSS3 هو الزوايا المستديرة والظلال والتشوهات والرسوم المتحركة ، لكن هذا الرمز يخبرنا حقًا مدى أهمية المحدد في CSS3. في بعض المنطق المعقد ، يمكن أن يؤدي استخدام محددات CSS3 هذه إلى تحقيق تأثيرات لا يمكن تصورها.
4. مبدأ تنفيذ التمرير
عندما انتهيت لأول مرة من قراءة الكود أعلاه ، يجب أن تكون كما فعلت في البداية. لا أعتقد أن مثل هذا الرمز يمكن أن يحقق تأثير التمرير.
حسنًا ، اسمحوا لي أن أقوم بتحليل مبدأ التنفيذ.
كما قلت أعلاه ، فإن مجموعة الراديو العليا مهمة للغاية وهي مركز تنفيذ شريط التمرير. نعم ، هو حقا.
لتنفيذ شريط التمرير ، لا يوجد سوى نوعين من التبديل ، أي عند النقر فوق زر التحكم ، يتم تبديل الصورة ؛ في الوقت نفسه ، عند تبديل الصورة ، تأكد من عرض جميع أزرار التحكم بشكل صحيح.
في هذا المثال ، نستخدم التسمية كزر تحكم ، تحتوي المقالة على الصورة ، والداخلية كحاوية للصورة.
مجرد التفكير في الأمر ببساطة ، لا يمكن توصيل التسمية والمقالة ، ومن الصعب أن تعكس معلومات حالة التسمية اختيار المقالة. ما لم يكن هناك شيء يمكنه تسجيل حالة التبديل للتسمية ، ثم حدد الصور بالترتيب المقابل لعرضها من خلال بعض الوسائل.
حسنًا ، أنت الآن تفهم سبب كون مجموعة الراديو هذه هي المفتاح لتنفيذ شريط التمرير. نعم ، يبدو أنه يسجل حالة النقر فوق الملصق.
نحن نستخدم الملصق لصالح السمة لتتوافق مع الراديو المقابل. عند النقر فوق التسمية ، يتم فحص الراديو المقابل. ثم انقل الجزء الداخلي إلى اليسار من خلال محدد CSS3 القوي لعرض الصورة المقابلة. بالطبع ، يتم عرض أزرار التحديد اليسرى واليمين المقابلة من خلال المحدد. وعلى نفس المنوال ، عند النقر فوق الأزرار اليمنى واليسرى ، يتم تحقيق حالة أزرار التحديد 5 أدناه بهذه الطريقة.
مبدأ التنفيذ أعلاه بسيط نسبيًا. في الواقع ، طالما يمكنك تسجيل حالة النقر لزر التحكم ، يمكنك تحقيق تأثير التمرير من خلال المحدد.
لا يمكن لمجموعات الراديو أن تفعل ذلك فحسب ، بل يمكن أن تنفذ أيضًا تبديل الصور عند تحوم وفقًا لهذه الفكرة. بالطبع ، هناك العديد من أساليب التنفيذ الأخرى ، طالما أنك تفهم مبدأ التنفيذ.
5. ملخص
في الواقع ، CSS3 ممتع حقًا ، مع العديد من التأثيرات. في CSS3 ، لا يوجد سوى نتائج غير متوقعة ، ولكن لا يمكن لأحد أن يفعل ذلك. في بعض الأحيان أجد حقًا أن كتابة CSS3 تتطلب القليل من الذكاء ، وأحيانًا تكون بعض أساليب التنفيذ الرائعة جديرة بالثناء حقًا.
حسنًا ، كممارسة صغيرة ، اكتسب هذا المثال الكثير ، وخاصة المحدد القوي ، مما يجعلني أشعر بالخجل من تجاهله في الماضي. . .
أحتاج أيضًا إلى النظر في مسألة تبديل الصور المتقطعة. يبدو أنني يجب أن أستخدم القليل من JS للمساعدة.
حسنًا ، دعنا نشاركه إذا كانت هناك نتيجة.