HTML之旋转

最新推荐文章于 2024-07-06 11:27:16 发布

原创最新推荐文章于 2024-07-06 11:27:16 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#旋转风车制作基础HTML动态学习

HTML 专栏收录该内容

20 篇文章

订阅专栏

这篇博客通过HTML和CSS实现了一个简单的风车旋转动画。利用`transform: rotate()`属性，配合JavaScript动态改变旋转角度，实现了点击按钮加速和减速的效果。读者可以借此了解HTML动态效果的创建方法。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#body{
position: absolute;
width: 300px;
height: 300px;
top:100px ;

}
#a{
position: absolute;
top:140px ;
width: 300px;
height: 20px;
background-color: green;
transform: rotate(0deg);

}
#b{
position: absolute;
left:140px;
width: 20px;
height: 300px;
background-color: green;
transform: rotate(0deg);

}
</style>
<script>
var i = 0;
var xz_id;
var sd = 10;
var ids = new Array();
window.onload = function(){
xz = document.getElementById("xz");
a = document.getElementById("body");
mess = document.getElementById("mess");
xz.onclick = function(){
id = setInterval("xuanzhuan()",10);
ids.push(id);
mess.innerHTML = ids.length;
}

document.getElementById("tz").onclick = function(){
clearInterval(ids[ids.length-1]);
ids.pop();
mess.innerHTML = ids.length;

}

}

function xuanzhuan(){
if(i>360){
i=0;
}else{
i++;
}
var s = "rotate("+i+"deg)";

a.style.transform = s;

}

</script>
</head>
<body>
<button id="xz">加速</button>
<button id="tz">减速</button><br />
<span id="mess"></span>
<div id="body">
<div id="a"></div>
<div id="b"></div>
</div>
</body>
</html>