الآن بعد أن تعلمت التأثير الانتقالي ، بدأت في الحصول على وعي بإجراء آثار الرسوم المتحركة ، وسأدرك بعض الأدوات المبهرة. إن إضافة تأثيرات الرسوم المتحركة الانتقالية إلى صفحة ويب ستجعل الناس يبدون جميلًا وليست قاسية ولديهم نظرة جيدة. الرسوم المتحركة هي واحدة من المظاهر الرئيسية لجمال صفحة الويب. فيما يلي بعض الأمثلة على اليانصيب باستخدام تأثيرات الانتقال لتحقيقها.
دعونا أولاً نأخذ العروض:
يتطلب هذا التنفيذ بعض كود JS.
الصور المطلوبة:
هذه الصورة في موقع المؤشر.
Turntable-BG.JPG هذه الصورة هي صورة الخلفية ، في موضع الخلفية.
هذه الصورة في موقع turntable.png.
هناك حاجة إلى هذه الصور الثلاث. إذا كنت ترغب في تنفيذها ، فما عليك سوى حفظ هذه الصور الثلاث وتقديمها فيها. إذا لم يكن الأمر كذلك ، يرجى تعديله إلى اسم الصورة المقابل ووضعه في نفس الملف.
شفرة:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> إصدار يانصيب </title> <!-هنا جزء CSS-> <style> #bg {width: 650px ؛ الارتفاع: 600 بكسل ؛ الهامش: 0 Auto ؛ الخلفية: URL (Turntable-BG.JPG) عدم التكرار ؛ الموقف: قريب } img [src^= "pointer"] {الموضع: Absolute ؛ Z-Index: 10 ؛ أعلى: 155 بكسل ؛ اليسار: 247 بكسل ؛ } img [src^= "turntable"] {الموضع: Absolute ؛ Z-index: 5 ؛ أعلى: 60px ؛ اليسار: 116 بكسل ؛ الانتقال: جميع 4s ؛ } </style> </head> <body> <!-هنا جزء هيكل html-> <div id = "bg"> <img src = "pointer.png"> <img src = "turntable.png"> </viv> <! var oturntable = document.getElementSbyTagName ("img") [1] ؛ var cat = 51.4 ؛ var num = 0 ؛ var Offon = true ؛ document.title = "" ؛ opointer.onclick = function () {if (Offon) {oturntable.style.transform = "Rotate (0deg)" ؛ Offon =! Offon ؛ Rating () ؛ }} دالة rationing () {var timer = null ؛ var rdm = 0 ؛ ClearInterval (مؤقت) ؛ timer = setInterval (function () {if (math.floor (rdm/360) <3) {rdm = math.floor (math.random ()*3600) ؛} else {oturntable.style.transform = "ROTATE ("+rdm+"deg)" num = rdm 360 ؛ إذا كان (cat*5) {تنبيه ("خدمة خالية من الفائدة") ؛ } </script> </body> </html>لا يوجد الكثير من كود CSS و HTML ، وذلك بشكل أساسي لتحقيق إعدادات الانتقال ، ولتنفيذ تحديد موقع Cascade ، بحيث يتم وضع العنصر للحصول على نقرات للعناصر والأحداث ، وسيتم تدوير مؤشر النقر ، لذلك تحتاج إلى إضافة حدث نقرة إلى المؤشر ، ثم تحديد ما إذا كان التناوب يتوقف. إذا لم يكن هناك نقرة ، لا يمكنك الاتصال بالدالة Rating (). تؤدي هذه الوظيفة دوران القرص الدوار ويحدد مكان إيقاف المؤشر ، ثم يظهر المحتوى المقابل. تتمثل عملية تنفيذ الدوران في الوظيفة في الحصول على عناصر القرص الدوار ، ثم استخدام JS للتحكم في سمة تحويل CSS: تدوير (). ألم نستخدم هذه الخاصية لتحقيق تأثير الدوران مباشرة في CSS؟ يتم تنفيذه مع محدد الفئة الزائفة: تحوم وسمات الانتقال. لذلك ، نظرًا لأن CSS لا يمكنها تنفيذ تشغيل الأرقام ونقرات الماوس ، دع JS تنفذ والتحكم في سمة CSS لتحقيق وظيفة دوران النقر. ومع ذلك ، فإن استخدام المؤقت ناهيك عن المؤقت. تتمثل الفكرة في استخدام JS لتنفيذ تشغيل الأرقام ونقر الماوس والتحكم في سمة CSS لتحقيق تأثير الدوران.
Math.Random () هو توليد الأرقام العشوائية ، وجولات Math.Floor () لأسفل.
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.