HTML，CSS，JavaScript实例 —— 齿轮，按钮
以下是一个简单的示例，展示了如何使用HTML, CSS 和 JavaScript 创建一个带有旋转齿轮和按钮的简单界面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gear and Button Example</title>
<style>
.gear {
width: 100px;
height: 100px;
background-color: #3498db;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(0deg);
animation: rotateGear 5s linear infinite;
}
.button {
width: 100px;
height: 100px;
background-color: #e74c3c;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
opacity: 0.7;
cursor: pointer;
}
@keyframes rotateGear {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
</style>
</head>
<body>
<div class="gear"></div>
<div class="button" onclick="rotateGear()"></div>
<script>
function rotateGear() {
var gear = document.querySelector('.gear');
gear.style.animation = 'none';
var angle = Math.random() * 360; // 生成一个0到360度之间的随机角度
gear.style.transform = 'translate(-50%, -50%) rotate(' + angle + 'deg)';
}
</script>
</body>
</html>这段代码创建了一个页面，其中包含一个旋转的齿轮和一个可点击的按钮。当按钮被点击时，齿轮将停止旋转并随机旋转到一个新的角度。这个简单的示例展示了如何使用CSS动画和JavaScript来实现交互式设计元素。
评论已关闭