欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

html怎么設置唱片自轉

老白2年前9瀏覽0評論

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屬性,實現了唱片的自轉效果。