首页摇晃的桃子html完整版

摇晃的桃子html完整版

时间: 2024-12-03 21:16:16 浏览: 22

好的，以下是一个简单的“摇晃的桃子”HTML完整版示例代码。这个示例包括HTML、CSS和JavaScript，通过JavaScript实现桃子的摇晃动画效果。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>摇晃的桃子</title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f8ff; } .peach { width: 100px; height: 100px; background-image: url('peach.png'); background-size: cover; cursor: pointer; transition: transform 0.3s; } </style> </head> <body> <div class="peach" id="peach"></div> <script> const peach = document.getElementById('peach'); peach.addEventListener('click', () => { peach.style.transform = 'rotate(20deg)'; setTimeout(() => { peach.style.transform = 'rotate(-20deg)'; }, 100); setTimeout(() => { peach.style.transform = 'rotate(0deg)'; }, 200); }); </script> </body> </html> ``` 这个示例中，我们创建了一个简单的HTML页面，其中包含一个桃子图片。当用户点击桃子时，桃子会左右摇晃。

阅读全文