Menggunakan HTML5, CSS untuk mencapai efek pendulum
Titik Pengetahuan:1) Gunakan posisi/kiri/atas dan calc () untuk mencapai level dan pusat elemen vertikal;
2) Gunakan animasi definisi atribut animatif/transformasi/transformasi-origin CSS3;
3) Gunakan transformasi-asal untuk mewujudkan penyesuaian jantung bundar dari asal rotasi
Jangan ucapkan banyak omong kosong, lihat kode secara langsung, kode spesifik ditunjukkan di bawah ini:
<! Calc (50% -200px); ; 0: 0: 0: 0: 0: 0: 0: 0: 0: 0 :; rotate (30deg);} .angle60 {transform: 60deg);} .angle90 {transform: rotate (90deg);} .angle120 {transform: rotate (120deg);} .angle150 {rotate: 150deg);} .angle180 {transform: rotate (180deg);} .angle210 {transs bentuk: rotate (210deg);}. 300deg);} .angle330 {transform: rotate (3 30deg);} #fixpoint {width: 10px; latar belakang -color: CadetBlue; Asal: 60px;} #minuteHand {Width: 4p X; ; <body> <v ID> <Div id = 'dial'> <ul id = skala> <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> <class = skala 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> </div> <Div ID = Hourhand> </div> <Div ID = MinuthHand> </div> <Div ID = Secondhand> </div> </div> <skrip Type = 'text/javascript' src = 'js/jQuery-3.2.1.js'> </script> <script type = text/javascript> window.onload = function () {var houseHand = document.geteLementById ('hourhand '); ; 60 * 360 + Deg '; ')'}); }); // Metode 2: Gunakan pengaturan atribut gaya dari elemen DOM // hourhand.style.transform = 'rotate (' + hourangle + '); + ')'; // Secondhand.Style.Transform = 'Rotate (' + Secondangle + ')';}, 1000); MeringkaskanDi atas adalah efek jam sederhana berdasarkan HTML5+CSS3 yang saya perkenalkan kepada Anda. Terima kasih banyak atas dukungan Anda untuk situs web VEVB Wulin!