首页用HTML写一个关于元旦的动画

用HTML写一个关于元旦的动画

时间: 2023-04-01 10:03:45 浏览: 92

HTML 动画通常是使用 JavaScript 来实现的，因此我们需要在 HTML 文件中添加一些 JavaScript 代码。这是一个简单的关于元旦的 HTML 动画的示例： ``` <html> <head> <style> /* 这里是 CSS 样式，用于设置动画的外观 */ .animation { width: 100px; height: 100px; background-color: red; position: relative; animation: celebrate 1s linear infinite; } @keyframes celebrate { 0% { transform: translateY(0); } 50% { transform: translateY(-30px); } 100% { transform: translateY(0); } } </style> </head> <body>  <div class="animation"></div>  <script> // 获取动画元素 const animationElement = document.querySelector('.animation'); // 设置动画的开始时间（从当前时间开始） animationElement.style.animationDelay = '0s'; // 设置动画的持续时间（持续 1 秒） animationElement.style.animationDuration = '1s'; // 设置动画的循环次数（无限循环） animationElement.style.animationIterationCount = 'infinite'; </script> </body> </html> ``` 在这个示例中，我们使用了 CSS3 的动画特性（`@keyframes` 和 `animation`）来创建一个红色方块的上下移动动画。然后，我们使用 JavaScript 代码来控制动画的开始时间、持续时间和循环次数。希望这个示例能

阅读全文