### 使用
HTML、
CSS和
JavaScript实现
满屏显示
爱心动画和自定义名字
为了创建一个具有
满屏显示
爱心动画效果并能展示自定义名字的网页，可以采用如下方法：
#### 1.
HTML 结构
构建基本的
HTML框架来容纳所有的元素。
```
html
<!DOCTYPE
html>
<
html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>爱的心意</title>
<link rel="stylesheet" href="style.
css">
</head>
<body>
<div id="container">
<!-- 动态生成的
爱心 -->
<div class="heart"></div>
<!-- 显示的名字 -->
<h1 id="name">亲爱的[姓名]</h1>
<script src="script.js"></script>
</body>
</
html>
```
此部分设定了文档的基础结构，并引入外部样式表`style.
css`用于控制页面外观[^1]。
#### 2.
CSS 样式设计
利用
CSS设置背景颜色、字体大小以及其他视觉属性；同时编写关键帧动画以模拟心跳跳动的效果。
```
css
/* style.
css */
* {
margin: 0;
padding: 0;
}
body,
html {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: pink; /* 设置粉色作为底色 */
overflow: hidden;
}
#container {
text-align: center;
}
.heart::before,
.heart::after {
position: absolute;
content: '';
width: 50px;
height: 80px;
border-radius: 50% / 100% 100% 0 0;
transform-origin: bottom;
animation-name: beat;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
@keyframes beat {
from {transform: scale
(1
);}
to {transform: scale
(1.2
);}
}
```
上述
代码片段设置了整个画布的颜色为粉红色，并且定义了`.heart`类的选择器用来绘制静态的心形图案。通过伪元素`:before` 和 `:after` 创建两个半圆叠加形成
完整的
爱心形状。最后应用了一个名为`beat`的关键帧动画让其看起来像是有节奏地脉搏跳动。
#### 3.
JavaScript 行为逻辑
借助于
JavaScript动态调整DOM节点的内容或样式，比如随机位置添加多个
漂浮的小红心，或是改变顶部H1标签内的文字内容。
```
javascript
// script.js
document.addEventListener
('DOMContentLoaded', function
() {
const container = document.getElementById
('container'
);
let nameElement = document.querySelector
('#name'
);
// 自定义名字函数
function setName
(customName
) {
if
(customName !== ''
) {
nameElement.textContent = '亲爱的' + customName;
}
}
// 默认加载时调用一次setName
() 方法传入参数 "小明"
setName
("小明"
);
}
);
```
这里展示了如何监听DOM完全加载完毕之后执行一段脚本，在其中获取到目标元素后修改它们内部的文字信息。此外还可以进一步扩展该程序的功能，例如允许用户输入自己的昵称并通过事件触发更新界面中的称呼。
订阅专栏 解锁全文
扫一扫
1787
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
