发布日期：2025-09-17 浏览次数：2
表白网站建设，表白网页在线生成制作教程
创建一个简单而优雅的表白网页模板，并解释如何在线生成和自定义这样的页面。
设计思路
首先，我会设计一个温馨浪漫的表白页面，包含以下元素：
柔和的粉色系配色方案
动态飘落的心形效果
可自定义的表白信息区域
响应式设计，适配各种设备
简单的交互效果
实现代码
下面是完整的HTML代码，包含了CSS和JavaScript：
<!DOCTYPE html><html lang="zh-CN"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的心意 - 表白网页</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Microsoft YaHei', sans-serif;
background: linear-gradient(135deg, #ffe8e8 0%, #ffd6d6 100%);
color: #333;
min-height: 100vh;
overflow-x: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
}
.container {
max-width: 800px;
width: 100%;
background: rgba(255, 255, 255, 0.9);
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
padding: 30px;
text-align: center;
position: relative;
z-index: 1;
}
h1 {
color: #ff6b6b;
margin-bottom: 20px;
font-size: 2.5rem;
}
.heart-icon {
color: #ff6b6b;
font-size: 2rem;
margin: 15px 0;
display: block;
}
.message {
font-size: 1.2rem;
line-height: 1.6;
margin: 20px 0;
padding: 20px;
background: rgba(255, 107, 107, 0.1);
border-radius: 10px;
text-align: left;
}
.signature {
text-align: right;
font-style: italic;
margin-top: 20px;
color: #ff6b6b;
font-weight: bold;
}
.hearts {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
}
.heart {
position: absolute;
color: rgba(255, 107, 107, 0.7);
font-size: 20px;
animation: fall 10s linear infinite;
}
@keyframes fall {
0% {
transform: translateY(-10%) rotate(0deg);
opacity: 1;
}
100% {
transform: translateY(100vh) rotate(360deg);
opacity: 0;
}
}
.customize-btn {
background: #ff6b6b;
color: white;
border: none;
padding: 12px 25px;
border-radius: 50px;
font-size: 1rem;
cursor: pointer;
margin-top: 20px;
transition: all 0.3s ease;
}
.customize-btn:hover {
background: #ff5252;
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(255, 82, 82, 0.4);
}
.customize-panel {
display: none;
margin-top: 30px;
padding: 20px;
background: #f9f9f9;
border-radius: 10px;
text-align: left;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #ff6b6b;
}
input, textarea {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
font-family: inherit;
}
textarea {
min-height: 100px;
resize: vertical;
}
@media (max-width: 768px) {
.container {
padding: 20px;
}
h1 {
font-size: 2rem;
}
.message {
font-size: 1rem;
}
} </style></head><body>
<div class="container">
<h1>致我心中的唯一</h1>
<span class="heart-icon">❤</span>
<div class="message">
<p>亲爱的，</p>
<p>从遇见你的那一刻起，我的世界便充满了色彩。你的笑容如阳光般温暖，你的声音如音乐般动听。</p>
<p>每一天，我都想告诉你：我真的很喜欢你！喜欢你的一切，喜欢你的笑容，喜欢你的温柔，喜欢你偶尔的小脾气。</p>
<p>希望未来的日子里，我能一直陪伴在你身边，为你遮风挡雨，与你分享生活的点点滴滴。</p>
<p>你愿意给我这个机会吗？</p>
</div>
<div class="signature">
<p>永远爱你的，</p>
<p>某某某</p>
</div>
<button class="customize-btn" id="customizeBtn">自定义这份表白</button>
<div class="customize-panel" id="customizePanel">
<div class="form-group">
<label for="recipient">收件人姓名：</label>
<input type="text" id="recipient" placeholder="输入TA的名字">
</div>
<div class="form-group">
<label for="message">表白内容：</label>
<textarea id="message" placeholder="写下你想对TA说的话..."></textarea>
</div>
<div class="form-group">
<label for="sender">你的名字：</label>
<input type="text" id="sender" placeholder="输入你的名字">
</div>
<button class="customize-btn" id="saveBtn">保存更改</button>
</div>
</div>
<div class="hearts" id="hearts"></div>
<script>
// 创建飘落的心形
function createHearts() {
const heartsContainer = document.getElementById('hearts');
const heartCount = 30;
for (let i = 0; i < heartCount; i++) {
const heart = document.createElement('div');
heart.classList.add('heart');
heart.innerHTML = '❤';
heart.style.left = Math.random() * 100 + 'vw';
heart.style.animationDuration = (Math.random() * 10 + 5) + 's';
heart.style.fontSize = (Math.random() * 15 + 10) + 'px';
heart.style.opacity = Math.random() * 0.5 + 0.3;
heartsContainer.appendChild(heart);
}
}
// 显示/隐藏自定义面板
document.getElementById('customizeBtn').addEventListener('click', function() {
const panel = document.getElementById('customizePanel');
if (panel.style.display === 'block') {
panel.style.display = 'none';
this.textContent = '自定义这份表白';
} else {
panel.style.display = 'block';
this.textContent = '收起编辑面板';
// 填充当前内容
document.getElementById('recipient').value = document.querySelector('h1').textContent.replace('致', '').trim();
document.getElementById('message').value = document.querySelector('.message').textContent.trim();
document.getElementById('sender').value = document.querySelector('.signature p:last-child').textContent.trim();
}
});
// 保存自定义内容
document.getElementById('saveBtn').addEventListener('click', function() {
const recipient = document.getElementById('recipient').value || '我心中的唯一';
const message = document.getElementById('message').value || '写下你想对TA说的话...';
const sender = document.getElementById('sender').value || '某某某';
// 更新页面内容
document.querySelector('h1').textContent = '致' + recipient;
document.querySelector('.message').innerHTML = `<p>${message.replace(/\n/g, '</p><p>')}</p>`;
document.querySelector('.signature').innerHTML = `<p>永远爱你的，</p><p>${sender}</p>`;
// 隐藏面板
document.getElementById('customizePanel').style.display = 'none';
document.getElementById('customizeBtn').textContent = '自定义这份表白';
alert('表白内容已更新！');
});
// 初始化
window.addEventListener('load', function() {
createHearts();
}); </script></body></html>在线生成教程
要在线生成和自定义这个表白网页，您可以按照以下步骤操作：
复制代码：将上面的完整代码复制到剪贴板
创建新文件：
打开任何文本编辑器（如记事本、VSCode等）
创建一个新文件，将代码粘贴进去
将文件保存为love.html
自定义内容：
用浏览器打开这个HTML文件
点击"自定义这份表白"按钮
填写收件人姓名、表白内容和你的名字
点击"保存更改"按钮
分享你的表白：
将这个HTML文件发送给你想表白的人
或者将其上传到免费网页托管服务（如GitHubPages、Netlify等）
发送链接给对方
进阶定制建议
如果您想进一步个性化这个表白页面，可以考虑：
更换背景颜色：修改CSS中的background属性值
添加照片：在页面中添加<img>标签并链接到你的照片
添加音乐：使用<audio>标签添加背景音乐
更多动画效果：可以添加更多的CSS动画或JavaScript效果
希望这个教程能帮助您创建出令人难忘的表白网页！
表白网站建设 表白网页在线生成制作教程
扫码手机访问