首页给我个情书的HTML动画代码

给我个情书的HTML动画代码

时间: 2023-05-31 15:07:03 浏览: 195

以下是一个简单的情书动画的HTML代码： ```html <!DOCTYPE html> <html> <head> <title>情书动画</title> <style> body { background-color: pink; } #letter { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 400px; height: 400px; background-color: white; padding: 20px; border-radius: 10px; box-shadow: 0px 0px 20px rgba(0,0,0,0.5); animation: fadeIn 2s ease-in-out; } @keyframes fadeIn { 0% { opacity: 0; transform: translate(-50%, -60%); } 100% { opacity: 1; transform: translate(-50%, -50%); } } #heart { position: absolute; top: 25%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0% { transform: scale(0.8); } 50% { transform: scale(1.2); } 100% { transform: scale(0.8); } } </style> </head> <body> <div id="heart"> <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <path d="M50 10 C20 10 20 40 20 40 C20 60 50 90 50 90 C50 90 80 60 80 40 C80 40 80 10 50 10 Z" fill="red" /> </svg> </div> <div id="letter"> <h1>亲爱的XXX：</h1> <p>这是我写给你的情书，我想让你知道我有多么爱你。</p> <p>你是我生命中最重要的人，我愿意为你付出一切。</p> <p>我希望我们可以一直在一起，直到永远。</p> <p>爱你的XXX</p> </div> </body> </html> ``` 该代码使用了CSS动画来实现情书和心形图案的动态效果。其中，情书部分使用了`fadeIn`动画来实现从上方缓慢出现的效果，心形图案使用了`pulse`动画来实现微小的心跳效果。您可以根据需要自行修改样式和动画效果。

阅读全文