การใช้ HTML5, CSS เพื่อให้ได้เอฟเฟกต์ลูกตุ้ม
จุดความรู้:1) ใช้ตำแหน่ง/ซ้าย/ด้านบนและ calc () เพื่อให้ได้ระดับและศูนย์กลางแนวตั้งขององค์ประกอบ;
2) ใช้ภาพเคลื่อนไหว/การแปลง/แปลงต้นกำเนิดของ CSS3
3) ใช้การแปลงต้นกำเนิดเพื่อตระหนักถึงการปรับหัวใจทรงกลมของต้นกำเนิดการหมุน
อย่าพูดเรื่องไร้สาระมากดูรหัสโดยตรงรหัสเฉพาะจะแสดงด้านล่าง:
<doctype html> <html> <gead> <meta charset = utf-8> </title> <style> li {list-style: ไม่มี;} #box {width: 400px; CALL (50% -200px); ; 0: 0: 0: 0: 0: 0: 0: 0: 0: 0: 0:; หมุน (30deg);} .angle60 {transform: 60deg);} .angle90 {transform: rotate (90deg);} .angle120 {transform: rotate (120deg);}. {transform: rotate (180deg);} .angle210 {transs form: rotate (210deg);} 300DEG);} .ANGLE330 {Transform: หมุน (3 30DEG);} #FIXPOINT {WIDTH: 10PX; พื้นหลัง-Color: Cadetblue; ต้นกำเนิด: 50% 60px;} #minutehand {ความกว้าง: 4p x; } #secondhand {ความกว้าง: 2px; <body> <div id> <div id = 'dial'> <ul id = scale> <li class = scaleIndex> </li> <li class = scaleIndex Angle30> </li> <li class = scaleIndex Angle60> </li class /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 = fidpoint> </div> <div id = hourhand> </div> <div id = minutehand> </div> <div id = มือสอง> </div> </div> <สคริปต์ type = 'text/javascript' src = 'js/jQuery-3.2.1.js'> </script> <script type = text/javascript> window.onload = function () {var househand = document.getElementById ('hourhand '); var minutehand = document.getElementById (' minutehand '); ; 60 * 360 + 'deg'; ')') '}); }); + ')'; สรุปข้างต้นเป็นเอฟเฟกต์นาฬิกาง่าย ๆ ตาม HTML5+CSS3 ที่ฉันแนะนำให้รู้จักกับคุณ ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Vevb Wulin!