首先需要创建一个 HTML 文件,然后在其中添加 CSS 样式和 JavaScript 代码。以下是一个简单的示例:
- 创建一个名为
loveheart.html
的文件 -
<!DOCTYPE html> <html lang="zh"> <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: #f0f0f0; margin: 0; } .heart { width: 100px; height: 100px; background-color: red; position: relative; transform: rotate(45deg); } .heart:before, .heart:after { content: ""; width: 100px; height: 100px; background-color: red; border-radius: 50%; position: absolute; } .heart:before { top: -50px; left: 0; } .heart:after { top: 0; left: -50px; } </style> </head> <body> <div class="heart"></div> <script> // 在这里添加 JavaScript 代码 </script> </body> </html>
3.保存文件并在浏览器中打开它。你将看到一个红色的爱心形状。
这个示例使用了简单的 CSS 动画来创建爱心形状。你可以根据需要修改样式和动画效果。