各位正在學(xué)習(xí)網(wǎng)頁(yè)編程的同學(xué)們，今天編程獅（W3Cschool.cn）的前端團(tuán)隊(duì)將帶大家打造一個(gè)浪漫的520愛(ài)心告白頁(yè)面。這個(gè)項(xiàng)目綜合運(yùn)用了HTML、CSS和JavaScript知識(shí)，非常適合零基礎(chǔ)的小伙伴練習(xí)。完成后，你可以將這個(gè)頁(yè)面作為520禮物送給心愛(ài)的人，也可以作為編程作品展示你的學(xué)習(xí)成果。
項(xiàng)目效果預(yù)覽
我們的目標(biāo)頁(yè)面包含：
- 中間的動(dòng)態(tài)跳動(dòng)愛(ài)心（帶有心跳動(dòng)畫(huà)效果）
- 浪漫的詩(shī)意告白文字
- 點(diǎn)擊頁(yè)面任意位置生成愛(ài)心效果
- 自動(dòng)下落的愛(ài)心雨（每300毫秒生成一個(gè)）
整個(gè)頁(yè)面采用了粉色系主題，充滿(mǎn)浪漫氛圍，非常契合520這個(gè)特殊的日子。
HTML結(jié)構(gòu)解析
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet">
<title>W3Cschool編程獅 ? 520愛(ài)心告白</title>
<meta name="description" content="編程獅(W3Cschool.cn)提供的浪漫520頁(yè)面，包含動(dòng)態(tài)愛(ài)心雨效果和詩(shī)意告白">
</head>
<body>
<div class="hearts"></div>
<div class="container">
<div class="heart">??</div>
<div class="message">
<p>在數(shù)不盡的星辰中</p>
<p>你是我唯一追尋的光</p>
<p>520 ? 愛(ài)你每一天</p>
</div>
</div>
<footer>
Powered by 編程獅 ? W3Cschool學(xué)習(xí)平臺(tái)
<div>w3cschool.cn</div>
</footer>
</body>
</html>代碼解析：
- 我們使用了語(yǔ)義化HTML標(biāo)簽，使頁(yè)面結(jié)構(gòu)清晰- 引入了谷歌字體庫(kù)，提升文字顯示效果
- 使用
viewport元標(biāo)簽確保頁(yè)面在移動(dòng)設(shè)備上良好顯示 - 整體采用居中布局，主內(nèi)容通過(guò)
position:absolute實(shí)現(xiàn)精準(zhǔn)定位
CSS樣式詳解
body {
margin: 0;
height: 100vh;
background: #ffe6f2;
overflow: hidden;
position: relative;
font-family: 'Noto Sans SC', 'Source Han Sans', sans-serif;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: #ff3366;
}
.heart {
font-size: 100px;
animation: pulse 1.2s infinite;
text-shadow: 0 0 20px rgba(255,51,102,0.5);
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}重點(diǎn)知識(shí)點(diǎn)：
- 響應(yīng)式布局：使用
vh單位使頁(yè)面高度適應(yīng)不同屏幕尺寸 - 動(dòng)畫(huà)效果：通過(guò)
@keyframes定義心跳動(dòng)畫(huà)，實(shí)現(xiàn)愛(ài)心跳動(dòng)效果 - 文字陰影：使用
text-shadow增加文字立體感 - 居中定位：
absolute+transform實(shí)現(xiàn)頁(yè)面元素精確定位
JavaScript交互功能
function createHeart(x, y) {
const heart = document.createElement('div');
heart.innerHTML = '??';
heart.className = 'heart-fall';
heart.style.left = x + 'px';
heart.style.top = y + 'px';
heart.style.fontSize = Math.random() * 30 + 20 + 'px';
heart.style.animationDuration = Math.random() * 3 + 2 + 's';
document.querySelector('.hearts').appendChild(heart);
setTimeout(() => heart.remove(), 5000);
}
document.addEventListener('click', (e) => {
createHeart(e.clientX, e.clientY);
});
setInterval(() => {
const x = Math.random() * window.innerWidth;
const y = -50;
createHeart(x, y);
}, 300);代碼解析：
- 動(dòng)態(tài)元素創(chuàng)建：使用
document.createElement生成愛(ài)心元素 - 隨機(jī)效果：通過(guò)
Math.random()實(shí)現(xiàn)愛(ài)心大小和下落速度的隨機(jī)變化 - 事件監(jiān)聽(tīng)：添加點(diǎn)擊事件，實(shí)現(xiàn)點(diǎn)擊位置生成愛(ài)心
- 定時(shí)器：使用
setInterval實(shí)現(xiàn)自動(dòng)愛(ài)心雨效果
如何運(yùn)行你的520愛(ài)心頁(yè)面
520.html 完整源代碼
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet">
<title>W3Cschool編程獅 ? 520愛(ài)心告白</title>
<meta name="description" content="編程獅(W3Cschool.cn)提供的浪漫520頁(yè)面，包含動(dòng)態(tài)愛(ài)心雨效果和詩(shī)意告白">
<style>
body {
margin: 0;
height: 100vh;
background: #ffe6f2;
overflow: hidden;
position: relative;
font-family: 'Noto Sans SC', 'Source Han Sans', sans-serif;
}
/* 主內(nèi)容容器樣式
居中定位 + 文字居中 */
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: #ff3366;
}
.heart {
font-size: 100px;
animation: pulse 1.2s infinite;
text-shadow: 0 0 20px rgba(255,51,102,0.5);
}
.message {
font-size: 2em;
margin: 20px 0;
line-height: 1.6;
}
.hearts {
position: fixed;
width: 100%;
height: 100%;
pointer-events: none;
}
/* 心跳動(dòng)畫(huà)
縮放比例 1 -> 1.1 -> 1 */
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.heart-fall {
position: absolute;
animation: fall linear forwards;
opacity: 0.7;
}
/* 愛(ài)心下落動(dòng)畫(huà)
帶360度旋轉(zhuǎn)效果 */
@keyframes fall {
to {
transform: translateY(100vh) rotate(360deg);
opacity: 0;
}
}
</style>
</head>
<body>
<div class="hearts"></div>
<div class="container">
<div class="heart">??</div>
<div class="message">
<p>在數(shù)不盡的星辰中</p>
<p>你是我唯一追尋的光</p>
<p>520 ? 愛(ài)你每一天</p>
</div>
</div>
<footer style="
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
color: #ff6680;
font-size: 14px;
">
Powered by 編程獅 ? W3Cschool學(xué)習(xí)平臺(tái)
<div>w3cschool.cn</div>
</footer>
<script>
// 創(chuàng)建單個(gè)愛(ài)心元素
// 參數(shù)說(shuō)明：
// x - 愛(ài)心初始橫坐標(biāo)
// y - 愛(ài)心初始縱坐標(biāo)
function createHeart(x, y) {
const heart = document.createElement('div');
heart.innerHTML = '??';
heart.className = 'heart-fall';
heart.style.left = x + 'px';
heart.style.top = y + 'px';
heart.style.fontSize = Math.random() * 30 + 20 + 'px';
heart.style.animationDuration = Math.random() * 3 + 2 + 's';
document.querySelector('.hearts').appendChild(heart);
setTimeout(() => heart.remove(), 5000);
}
// 點(diǎn)擊事件監(jiān)聽(tīng)：在點(diǎn)擊位置生成愛(ài)心
document.addEventListener('click', (e) => {
createHeart(e.clientX, e.clientY);
});
// 自動(dòng)生成愛(ài)心雨
// 自動(dòng)愛(ài)心雨定時(shí)器（每300ms生成一個(gè)）
setInterval(() => {
const x = Math.random() * window.innerWidth;
const y = -50;
createHeart(x, y);
}, 300);
</script>
</body>
<!-- 技術(shù)支持：W3Cschool前端團(tuán)隊(duì) -->
</html>- 將上述完整代碼復(fù)制到文本編輯器（如記事本、HTML 在線(xiàn)編譯器、Trae、VS Code等）
- 保存為
.html文件（例如：520.html） - 用瀏覽器打開(kāi)該文件即可查看效果
拓展學(xué)習(xí)建議
- 嘗試修改背景顏色和文字內(nèi)容，創(chuàng)建屬于你自己的個(gè)性化頁(yè)面
- 學(xué)習(xí)更多CSS效果動(dòng)畫(huà)，為頁(yè)面添加更多交互元素
- 探索JavaScript高級(jí)功能，實(shí)現(xiàn)更復(fù)雜的交互效果
-
推薦課程：
感謝各位同學(xué)跟著編程獅（W3Cschool.cn）一起學(xué)習(xí)前端開(kāi)發(fā)知識(shí)。希望這個(gè)520愛(ài)心頁(yè)面不僅能夠幫助你表達(dá)愛(ài)意，也能成為你編程學(xué)習(xí)道路上的一個(gè)美好回憶！
