手把手教你用HTML/CSS/JS打造浪漫520爱心页面

编程狮（w3cschool.cn） 2025-05-13 17:14:31 浏览数 (232)
反馈

各位正在学习网页编程的同学们，今天编程狮（W3Cschool.cn）的前端团队将带大家打造一个浪漫的520爱心告白页面。这个项目综合运用了HTML、CSS和JavaScript知识，非常适合零基础的小伙伴练习。完成后，你可以将这个页面作为520礼物送给心爱的人，也可以作为编程作品展示你的学习成果。

项目效果预览

520动态网页

我们的目标页面包含：

  • 中间的动态跳动爱心（带有心跳动画效果）
  • 浪漫的诗意告白文字
  • 点击页面任意位置生成爱心效果
  • 自动下落的爱心雨（每300毫秒生成一个）

整个页面采用了粉色系主题，充满浪漫氛围，非常契合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 href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap" rel="stylesheet">
    <title>W3Cschool编程狮 • 520爱心告白</title>
    <meta name="description" content="编程狮(W3Cschool.cn)提供的浪漫520页面，包含动态爱心雨效果和诗意告白">
</head>
<body>
    <div class="hearts"></div>
    <div class="container">
        <div class="heart">❤️</div>
        <div class="message">
            <p>在数不尽的星辰中</p>
            <p>你是我唯一追寻的光</p>
            <p>520 • 爱你每一天</p>
        </div>
    </div>

    
    <footer>
        Powered by 编程狮 • W3Cschool学习平台
        <div>w3cschool.cn</div>
    </footer>
</body>
</html>

代码解析：

  • 我们使用了语义化HTML标签，使页面结构清晰- 引入了谷歌字体库，提升文字显示效果
  • 使用viewport元标签确保页面在移动设备上良好显示
  • 整体采用居中布局，主内容通过position:absolute实现精准定位

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); }
}

重点知识点：

  1. 响应式布局：使用vh单位使页面高度适应不同屏幕尺寸
  2. 动画效果：通过@keyframes定义心跳动画，实现爱心跳动效果
  3. 文字阴影：使用text-shadow增加文字立体感
  4. 居中定位：absolute+transform实现页面元素精确定位

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);

代码解析：

  1. 动态元素创建：使用document.createElement生成爱心元素
  2. 随机效果：通过Math.random()实现爱心大小和下落速度的随机变化
  3. 事件监听：添加点击事件，实现点击位置生成爱心
  4. 定时器：使用setInterval实现自动爱心雨效果

如何运行你的520爱心页面

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 href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap" rel="stylesheet">
    <title>W3Cschool编程狮 • 520爱心告白</title>
    <meta name="description" content="编程狮(W3Cschool.cn)提供的浪漫520页面，包含动态爱心雨效果和诗意告白">
    <style>
        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);
        }


        .message {
            font-size: 2em;
            margin: 20px 0;
            line-height: 1.6;
        }


        .hearts {
            position: fixed;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }


        /* 心跳动画
   缩放比例 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;
        }


        /* 爱心下落动画
   带360度旋转效果 */
@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>在数不尽的星辰中</p>
            <p>你是我唯一追寻的光</p>
            <p>520 • 爱你每一天</p>
        </div>
    </div>

    
    <footer style="
        position: absolute;
        bottom: 20px;
        width: 100%;
        text-align: center;
        color: #ff6680;
        font-size: 14px;
    ">
        Powered by 编程狮 • W3Cschool学习平台
        <div>w3cschool.cn</div>
    </footer>
    <script>
        // 创建单个爱心元素
// 参数说明：
// x - 爱心初始横坐标
// y - 爱心初始纵坐标
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);
        });


        // 自动生成爱心雨
        // 自动爱心雨定时器（每300ms生成一个）
setInterval(() => {
            const x = Math.random() * window.innerWidth;
            const y = -50;
            createHeart(x, y);
        }, 300);
    </script>
</body>
<!-- 技术支持：W3Cschool前端团队 -->
</html>

  1. 将上述完整代码复制到文本编辑器（如记事本、HTML 在线编译器、Trae、VS Code等）
  2. 保存为.html文件（例如：520.html）
  3. 用浏览器打开该文件即可查看效果

拓展学习建议

  1. 尝试修改背景颜色和文字内容，创建属于你自己的个性化页面
  2. 学习更多CSS效果动画，为页面添加更多交互元素
  3. 探索JavaScript高级功能，实现更复杂的交互效果

感谢各位同学跟着编程狮（W3Cschool.cn）一起学习前端开发知识。希望这个520爱心页面不仅能够帮助你表达爱意，也能成为你编程学习道路上的一个美好回忆！

HTML CSS JavaScript 前端 实例代码

1 人点赞

©w3cschool编程狮闽ICP备15016281号-3

违法和不良信息举报电话：173-0602-2364|举报邮箱：jubao@eeedong.com