HTML是一種基礎的網頁制作語言,可以用來創建各種各樣的網頁效果。其中,設置唱片自轉就是一個很有趣的功能。
<!-- CD樣式的div塊 --> <div style="width:200px; height:200px; background-color:#EEEEEE;border-radius:50%;box-shadow: 0px 0px 20px rgba(0,0,0,0.5);position:relative;"> <!-- 唱片圖片 --> <img src="CD.png" style="width:160px; height:160px; position:absolute;left:20px; top:20px;" id="disk"> <!-- 唱針圖片 --> <img src="needle.png" style="width:40px; height:60px; position:absolute;left:50%;top:-25px;transform:rotate(-20deg)"> </div>
上述代碼中,我們創建了一個div塊用于顯示CD,給它設置了寬高和圓角等樣式,并添加了陰影效果。在div里面添加了唱片圖片和唱針圖片,借助position和transform屬性,我們可以將唱針定位到唱片上方,并設置它的旋轉角度。
<!-- JS代碼 --> <script> // 獲取唱片圖片元素 var disk = document.getElementById("disk"); // 設置初始旋轉角度為0度 var angle = 0; // 每隔10毫秒旋轉3度,并更新角度值 setInterval(function(){ angle += 3; disk.style.transform = "rotate("+ angle +"deg)"; }, 10); </script>
通過以上JS代碼,我們給唱片圖片添加了一個定時器函數。函數每隔10毫秒將唱片角度值增加3度,并更新CSS樣式里的transform屬性,實現了唱片的自轉效果。
上一篇c list轉json
下一篇html字體灰色代碼