按钮旋转的js动态效果

创建一个按钮旋转的动态效果通常需要使用CSS和可能的JavaScript来实现。以下是一个简单的示例，你可以根据自己的需求进行调整：

HTML：

htmlCopy code

点击旋转

CSS（styles.css）：

cssCopy code

body { display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0; } .rotate-btn { padding: 10px 20px; font-size: 16px; cursor: pointer; transition: transform 0.5s ease; /* 添加过渡效果 */ } .rotated { transform: rotate(45deg); /* 旋转45度 */ }

JavaScript（script.js）：

javascriptCopy code

function rotate() { var btn = document.querySelector('.rotate-btn'); btn.classList.toggle('rotated'); // 切换添加/移除类以触发旋转效果 }

这个示例中，点击按钮后，会在按钮上添加一个类（'rotated'），通过CSS中的过渡效果，按钮会平滑地旋转45度。你可以根据需要调整旋转的角度、过渡效果的速度等。希望这可以满足你的需求！