怎么给html动态爱心添加文字

我们要创建一个动态爱心，然后在爱心上添加文字，动态爱心可以使用HTML、CSS和JavaScript来实现，下面我将一步一步地教大家如何实现这一效果。

创建动态爱心

1、我们需要创建一个HTML文件，并在文件中添加以下代码：

Markup

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态爱心</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="heart"></div>
    <script src="script.js"></script>
</body>
</html>

2、创建一个CSS文件（style.css），并在文件中添加以下样式代码：

CSS

#heart {
    width: 100px;
    height: 100px;
    background-color: pink;
    position: relative;
    transform: rotate(45deg);
    animation: pulse 1s infinite;
}
#heart:before,
#heart:after {
    content: '';
    width: 100px;
    height: 100px;
    background-color: pink;
    border-radius: 50%;
    position: absolute;
}
#heart:before {
    top: -50px;
    left: 0;
}
#heart:after {
    top: 0;
    left: 50px;
}
@keyframes pulse {
    0% {
        transform: scale(1) rotate(45deg);
    }
    50% {
        transform: scale(0.9) rotate(45deg);
    }
    100% {
        transform: scale(1) rotate(45deg);
    }
}

3、创建一个JavaScript文件（script.js），这里暂时不需要添加代码。

在动态爱心上添加文字

1、修改HTML文件，添加一个span元素用于显示文字：

Markup

<div id="heart">
    <span>我爱你</span>
</div>

2、修改CSS文件，为span元素添加样式：

CSS

#heart span {
    color: white;
    font-size: 18px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

3、至此，我们已经在动态爱心上添加了文字，以下是完整的代码展示：

- HTML：

Markup

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态爱心</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="heart">
        <span>我爱你</span>
    </div>
    <script src="script.js"></script>
</body>
</html>

- CSS：

CSS

#heart {
    width: 100px;
    height: 100px;
    background-color: pink;
    position: relative;
    transform: rotate(45deg);
    animation: pulse 1s infinite;
}
#heart:before,
#heart:after {
    content: '';
    width: 100px;
    height: 100px;
    background-color: pink;
    border-radius: 50%;
    position: absolute;
}
#heart:before {
    top: -50px;
    left: 0;
}
#heart:after {
    top: 0;
    left: 50px;
}
#heart span {
    color: white;
    font-size: 18px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
@keyframes pulse {
    0% {
        transform: scale(1) rotate(45deg);
    }
    50% {
        transform: scale(0.9) rotate(45deg);
    }
    100% {
        transform: scale(1) rotate(45deg);
    }
}