首页用html写一个有动画特效的告白的网页

用html写一个有动画特效的告白的网页

时间: 2023-03-24 16:01:59 浏览: 218

好的，下面是一个使用 HTML 编写的带有动画特效的网页示例： ```html <!DOCTYPE html> <html> <head> <title>动画特效网页示例</title> <style> /* 定义动画关键帧 */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* 定义需要动画的元素 */ #animated-box { animation-name: fadeIn; /* 指定使用的动画名称 */ animation-duration: 2s; /* 指定动画持续时间 */ animation-delay: 1s; /* 指定动画延迟时间 */ animation-fill-mode: both; /* 指定动画结束后元素样式的状态 */ } </style> </head> <body>  <div id="animated-box"> <h1>欢迎来到动画特效网页示例！</h1> <p>这是一个使用 HTML 和 CSS 实现的带有动画特效的网页。</p> <p>感谢您的光临！</p> </div> </body> </html> ``` 上面的代码实现了一个简单的淡入动画效果，当网页加载完成后，网页中的内容会从透明度为 0 的状态渐变到透明度为 1 的状态，持续时间为 2 秒，延迟时间为 1 秒。您可以根据自己的需求和喜好，修改代码中的关键帧和元素样式，实现不同的动画特效效果。

阅读全文