创建一个按钮旋转的动态效果通常需要使用CSS和可能的JavaScript来实现。以下是一个简单的示例，你可以根据自己的需求进行调整：
HTML：
htmlCopy code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <title>旋转按钮</title> </head> <body> <button class="rotate-btn" onclick="rotate()">点击旋转</button> <script src="script.js"></script> </body> </html>
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度。你可以根据需要调整旋转的角度、过渡效果的速度等。希望这可以满足你的需求！
扫一扫
998
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
