首页编写摇晃桃子的基本页面效果

编写摇晃桃子的基本页面效果

时间: 2024-11-20 09:37:52 浏览: 25

编写一个基础的网页动画，让一个桃子看起来像是被摇晃的效果，通常涉及HTML、CSS和JavaScript。下面是一个简单的例子： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>摇晃的桃子</title> <style> .shake-banana { position: relative; width: 100px; height: 100px; background-color: #ffcc00; /* 桃子颜色 */ animation: shake 2s ease-in-out infinite; } @keyframes shake { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-5px); } 75% { transform: translateX(5px); } } </style> </head> <body> <div class="shake-banana"></div> </body> </html> ``` 在这个示例中： - `.shake-banana` 是一个包含桃子元素的CSS类，设置了宽度和高度，并应用了名为 "shake" 的动画。 - `animation: shake 2s ease-in-out infinite;` 定义了动画，持续时间为2秒，缓动函数为 "ease-in-out"（平滑开始和结束），并且无限循环。当你在浏览器中打开这个HTML文件时，你会看到一个黄色的桃子似乎在左右摇晃。

阅读全文