首页
前端开发
Javascript
HTML爱心代码实现方法

HTML爱心代码实现方法

20 次浏览 0 条评论
zip
zip

提供一种基于HTML的“爱心”图形绘制方法，并附带源码示例。

<!DOCTYPE html>

<html>
<head>
  <title>爱心代码</title>
  <style>
    html, body {
      height: 100%;
      margin: 0;
      background: #000;
    }
    .heart {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100px;
      height: 90px;
    }
    .heart:before,
    .heart:after {
      position: absolute;
      content: '';
      left: 50px;
      top: 0;
      width: 50px;
      height: 80px;
      background: red;
      border-radius: 50px 50px 0 0;
      transform: rotate(-45deg);
      transform-origin: 0 100%;
    }
    .heart:after {
      left: 0;
      transform: rotate(45deg);
      transform-origin: 1000%;
    }
  </style>
</head>
<body>
  

</body>
</html>

将上述代码保存为 love.html 文件，使用浏览器打开即可查看效果。

代码解析

  • html, body: 设置页面背景颜色和元素居中。
  • .heart: 定义爱心形状的容器，通过 :before 和 :after 伪元素创建两个红色的半圆形，并使用 transform 属性进行旋转和定位，最终拼合成心形。
zip 文件大小：4.74KB