باستخدام HTML5 ، CSS لتحقيق تأثير البندول
نقطة المعرفة:1) استخدام الموضع/اليسار/الأعلى و calc () لتحقيق المستوى والمركز العمودي للعناصر ؛
2) استخدام تعريف سمة الرسوم المتحركة/التحويل/التحويل/التحويل CSS3 ؛
3) استخدم التحويل الأولي لتحقيق تعديل القلب المستدير لأصل الدوران
لا تقل الكثير من الهراء ، انظر إلى الكود مباشرة ، ويرد الرمز المحدد أدناه:
<! Calc (50 ٪ px) ؛ ؛ 0: 0: 0: 0: 0: 0: 0: rotate (30deg) ؛} .angle60 {transform: 60deg) ؛ {transform: rotate (180deg) ؛} .angle210 {transs form: rotate (210deg) ؛}. 300deg) ؛}. الخلفية الأصل: 60px ؛} ؛} <Body> <div id> <div id = 'dial'> <ul id = scale> <li class = scaleindex> </li> <li class = scaleIndex angle30> </li> <li class = scaleindex angle60> < /li> <li class = scaleIndex angle90> </l i> <li class = scaleindex angle120> </li> <li class = scaleindex angle150> </li> <li class = scaleindex angle180> </li> <li class = ScaleIndex angle210> </li> class = scaleindex angle240> </li> <li class = scaleindex angle270> </li> <li class = scaleindex angle300> </li> <li class = scaleindex angle330> </li> </ul> <div id = fixpoint> </viv> <div id = hourhand> </viv> <div id = minatehhand> </viv> <div id = sethhand> </viv> </viv> <script اكتب = 'text/javaScript' src = 'js/jquery-33. ') ؛ ؛ 660 + 'deg' ؛ ')') ؛ }) ؛ + ')' ؛ لخصما ورد أعلاه هو تأثير الساعة البسيطة بناءً على HTML5+CSS3 التي قدمتها لك. شكرا جزيلا لدعمكم لموقع VEVB Wulin!