首先需要创建一个 HTML 文件,然后在其中添加 CSS 样式和 JavaScript 代码。以下是一个简单的示例:
loveheart.html 的文件- DOCTYPE html>
-
-
-
爱心程序 -
- 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;
- }
-
-
-
- // 在这里添加 JavaScript 代码
-
3.保存文件并在浏览器中打开它。你将看到一个红色的爱心形状。
这个示例使用了简单的 CSS 动画来创建爱心形状。你可以根据需要修改样式和动画效果。