手机版表白网页制作，如何实现？-网页设计-锦华智联科技

响应式设计：完美适配手机屏幕，无论是iPhone还是安卓手机，都能获得最佳浏览体验。
浪漫动画：包含心动动画、烟花效果和文字渐显效果，营造浪漫氛围。
交互性强：用户可以输入对方的名字，点击按钮后触发表白动画和最终结果。
代码清晰：代码结构清晰，并附有详细注释，方便你理解和修改。

最终效果预览

初始页面：温馨的背景，一个输入框和“发送表白”按钮。
点击后：背景变暗，出现“正在发送...”的动画，模拟心跳声。
表白成功：绚烂的烟花在屏幕上绽放，显示“我喜欢你，[对方的名字]！”和一句动人的情话。

如何使用

复制代码：将下面提供的所有代码（HTML、CSS、JavaScript）复制下来。
创建文件：在你的电脑上创建一个新的文件夹，然后在该文件夹里创建三个文件，分别命名为 index.html、style.css 和 script.js。
粘贴代码：
- 将 HTML代码 粘贴到 index.html 文件中。
- 将 CSS代码 粘贴到 style.css 文件中。
- 将 JavaScript代码 粘贴到 script.js 文件中。
：打开 index.html 文件，找到第21行的 <input type="text" id="nameInput" placeholder="请输入TA的名字...">，你可以修改 placeholder 属性里的文字，让它更符合你的风格。
打开网页：用手机浏览器（如Safari, Chrome）打开 index.html 文件，你可以通过数据线将手机连接到电脑，然后将 index.html 文件拖拽到手机里，再用浏览器打开，或者，如果你有本地服务器，也可以在手机上访问本地地址。

完整代码

HTML 代码 (`index.html`)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <!-- 禁止用户缩放，确保手机端体验 -->一份心意</title>
    <link rel="stylesheet" href="style.css">
    <!-- 引入字体图标库，用于心形图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <div id="main-container">
        <!-- 标题 -->
        <h1 id="title">Hi, 有句话想对你说...</h1>
        <!-- 输入区域 -->
        <div id="input-area">
            <input type="text" id="nameInput" placeholder="请输入TA的名字...">
            <button id="confessBtn">
                <i class="fas fa-paper-plane"></i> 发送表白
            </button>
        </div>
        <!-- 表白结果区域 (初始隐藏) -->
        <div id="result-area" class="hidden">
            <h2 id="confession-text"></h2>
            <p id="love-message"></p>
            <button id="resetBtn">
                <i class="fas fa-heart"></i> 再来一次
            </button>
        </div>
    </div>
    <!-- 烟花画布 -->
    <canvas id="fireworks-canvas"></canvas>
    <!-- 引入JavaScript文件 -->
    <script src="script.js"></script>
</body>
</html>

CSS 代码 (`style.css`)

/* 全局样式重置和基础设置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    /* 紫色渐变背景，营造浪漫氛围 */
    color: #fff;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* 防止滚动条出现 */
    position: relative;
}
/* 主容器 */
#main-container {
    text-align: center;
    z-index: 10; /* 确保内容在烟花之上 */
    padding: 20px;
    width: 90%;
    max-width: 400px;
}
样式 */{
    font-size: 1.8rem;
    margin-bottom: 30px;
    font-weight: 300;
    letter-spacing: 1px;
    opacity: 0.9;
}
/* 输入区域样式 */
#input-area {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
#nameInput {
    padding: 15px;
    font-size: 1rem;
    border: none;
    border-radius: 50px;
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
    text-align: center;
    backdrop-filter: blur(10px); /* 毛玻璃效果 */
    outline: none;
    transition: all 0.3s ease;
}
#nameInput::placeholder {
    color: rgba(255, 255, 255, 0.7);
}
#nameInput:focus {
    background-color: rgba(255, 255, 255, 0.3);
    transform: scale(1.02);
}
/* 按钮通用样式 */
button {
    padding: 15px 30px;
    font-size: 1rem;
    border: none;
    border-radius: 50px;
    background-color: #ff6b6b; /* 温柔的粉红色 */
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 auto;
}
button:hover {
    background-color: #ff5252;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4);
}
button:active {
    transform: translateY(0);
}
/* 结果区域样式 */
#result-area {
    animation: fadeInScale 1s ease-out;
}
#result-area.hidden {
    display: none;
}
#confession-text {
    font-size: 2rem;
    margin-bottom: 20px;
    color: #ffd166; /* 温暖的黄色 */
}
#love-message {
    font-size: 1.2rem;
    line-height: 1.6;
    margin-bottom: 30px;
    opacity: 0.9;
}
/* 烟花画布样式 */
#fireworks-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* 让鼠标事件可以穿透 */
    z-index: 5; /* 在内容之下，背景之上 */
}
/* 动画定义 */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
/* 心跳动画 */
@keyframes heartbeat {
    0% { transform: scale(1); }
    14% { transform: scale(1.3); }
    28% { transform: scale(1); }
    42% { transform: scale(1.3); }
    70% { transform: scale(1); }
}
/* 发送中动画 */
.sending {
    animation: heartbeat 1.5s ease-in-out infinite;
}

JavaScript 代码 (`script.js`)

// 获取DOM元素
const mainContainer = document.getElementById('main-container');
const inputArea = document.getElementById('input-area');
const resultArea = document.getElementById('result-area');
const nameInput = document.getElementById('nameInput');
const confessBtn = document.getElementById('confessBtn');
const resetBtn = document.getElementById('resetBtn');
const confessionText = document.getElementById('confession-text');
const loveMessage = document.getElementById('love-message');
const canvas = document.getElementById('fireworks-canvas');
const ctx = canvas.getContext('2d');
// 设置画布大小为窗口大小
function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
}
resizeCanvas();
window.addEventListener('resize', resizeCanvas);
// 烟花粒子类
class Particle {
    constructor(x, y, color) {
        this.x = x;
        this.y = y;
        this.color = color;
        this.velocity = {
            x: (Math.random() - 0.5) * 8,
            y: (Math.random() - 0.5) * 8
        };
        this.alpha = 1;
        this.decay = Math.random() * 0.03 + 0.01;
    }
    draw() {
        ctx.save();
        ctx.globalAlpha = this.alpha;
        ctx.beginPath();
        ctx.arc(this.x, this.y, 2, 0, Math.PI * 2, false);
        ctx.fillStyle = this.color;
        ctx.fill();
        ctx.restore();
    }
    update() {
        this.draw();
        this.velocity.x *= 0.99;
        this.velocity.y *= 0.99;
        this.x += this.velocity.x;
        this.y += this.velocity.y;
        this.alpha -= this.decay;
    }
}
// 烟花类
class Firework {
    constructor(x, y) {
        this.x = x;
        this.y = y;
        this.particles = [];
        const particleCount = 150;
        const hue = Math.random() * 360;
        for (let i = 0; i < particleCount; i++) {
            const color = `hsl(${hue}, 100%, 60%)`;
            this.particles.push(new Particle(this.x, this.y, color));
        }
    }
    draw() {
        this.particles.forEach(particle => particle.draw());
    }
    update() {
        this.particles.forEach((particle, index) => {
            if (particle.alpha <= 0) {
                this.particles.splice(index, 1);
            } else {
                particle.update();
            }
        });
    }
}
// 烟花数组
let fireworks = [];
// 动画循环函数
function animate() {
    requestAnimationFrame(animate);
    ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'; // 半透明黑色覆盖，实现拖尾效果
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    fireworks.forEach((firework, index) => {
        if (firework.particles.length === 0) {
            fireworks.splice(index, 1);
        } else {
            firework.update();
            firework.draw();
        }
    });
}
animate();
// 创建多个烟花
function createFireworks() {
    for (let i = 0; i < 5; i++) {
        setTimeout(() => {
            const x = Math.random() * canvas.width;
            const y = Math.random() * canvas.height * 0.6;
            fireworks.push(new Firework(x, y));
        }, i * 300); // 每300ms发射一个
    }
}
// 表白按钮点击事件
confessBtn.addEventListener('click', () => {
    const name = nameInput.value.trim();
    if (!name) {
        // 如果没有输入名字，让输入框抖动一下作为提示
        nameInput.style.animation = 'shake 0.5s';
        setTimeout(() => {
            nameInput.style.animation = '';
        }, 500);
        return;
    }
    // 隐藏输入区域，显示结果区域
    inputArea.classList.add('hidden');
    resultArea.classList.remove('hidden');
    // 设置表白文字
    confessionText.textContent = `我喜欢你，${name}！`;
    // 设置情话数组，随机选择一句
    const messages = [
        "从遇见你的那一刻起，我的世界就亮了。",
        "想和你一起，看遍世间风景，吃遍所有美食。",
        "你是我平淡生活里，最耀眼的星辰。",
        "希望未来的每一天，都有你在我身边。",
        "不是因为你完美，而是因为你是你。"
    ];
    loveMessage.textContent = messages[Math.floor(Math.random() * messages.length)];
    // 触发烟花效果
    createFireworks();
});
// 重置按钮点击事件
resetBtn.addEventListener('click', () => {
    // 隐藏结果区域，显示输入区域
    resultArea.classList.add('hidden');
    inputArea.classList.remove('hidden');
    // 清空输入框
    nameInput.value = '';
    // 停止所有烟花
    fireworks = [];
    ctx.clearRect(0, 0, canvas.width, canvas.height);
});
// 添加抖动动画的CSS
const style = document.createElement('style');
style.textContent = `
    @keyframes shake {
        0%, 100% { transform: translateX(0); }
        10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
        20%, 40%, 60%, 80% { transform: translateX(5px); }
    }
`;
document.head.appendChild(style);

可自定义修改的地方

背景颜色：在 style.css 的 body 样式中，修改 background: linear-gradient(...) 的颜色值，可以换成你喜欢的渐变色，比如粉色和蓝色。
按钮颜色：修改 button 样式中的 background-color。
：在 script.js 的 messages 数组里，你可以添加或修改任何你想说的话。
标题文字：在 index.html 中修改 <h1> 标签里的文字。

希望这个网页能帮你成功表达心意！祝你成功！

（图片来源网络，侵删）

手机版表白网页制作，如何实现？

最终效果预览

如何使用

完整代码

HTML 代码 (index.html)

CSS 代码 (style.css)

JavaScript 代码 (script.js)

可自定义修改的地方

HTML 代码 (`index.html`)

CSS 代码 (`style.css`)

JavaScript 代码 (`script.js`)