按钮旋转的js动态效果

2023-12-21 12:36:51

创建一个按钮旋转的动态效果通常需要使用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度。你可以根据需要调整旋转的角度、过渡效果的速度等。希望这可以满足你的需求！
    		

    		

    			文章来源:https://blog.csdn.net/elirlove1/article/details/135125151

    			本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。