目录
基础准备
一台云服务器(要有公网IP别人才能访问到)
html+css+js
1. 项目背景
今天是七夕节,这是中国传统的情人节。七夕节源自牛郎织女的传说,是中国浪漫爱情的象征。在这一天,情侣们通常会互送礼物,表达爱意,而未婚男女则会祈求美好的姻缘。
七夕节不仅有着浪漫的氛围,也有着丰富的传统习俗,例如穿针乞巧、拜织女星、祭拜牛郎织女等。在现代,七夕节已经逐渐演变为中国的情人节,很多情侣会选择在这一天约会、吃饭或送花,以庆祝他们的爱情。
2. 设计理念
- 浪漫氛围营造:网页通过粒子动画和表白信内容的结合,营造出浪漫、温馨的节日氛围。
- 简洁优雅的设计:网页的布局和设计风格保持简洁与优雅,注重用户体验,适合在各种设备上展示。
3. 实现细节
- HTML 结构:包括粒子特效和表白信两个主要部分。
- CSS 样式:使用了简洁的样式设计,突出表白信的情感表达,并使用CSS动画实现粒子特效。
- JavaScript 时间功能和粒子动画:JavaScript实现了页面时间的动态更新,以及粒子动画的持续生成和控制。
4. 项目代码
4.1 index.html设计思路
4.1.1 HTML基础结构
- 使用标准的HTML结构,设置页面语言为中文简体,并确保字符编码为UTF-8,以正确显示中文内容。(一般不用管)
4.1.2 视觉效果设计
- 背景与布局:设置页面背景为黑色,并使用Flexbox布局,使内容居中显示。
- 粒子效果:创建一个
.particle-container
用于存放粒子,并设置粒子样式为圆形、粉色背景,添加动画效果。
4.1.3 动画效果
- 定义粒子的动画(
particleAnimation
),包括位置移动和透明度变化。 - 为LOVE文本设置渐入渐出的动画效果,使其在指定时间段内淡入淡出。
4.1.4 JavaScript逻辑
- 使用
createParticle()
函数生成粒子,随机位置并应用不同样式(普通粒子或爱心粒子)。 - 通过
generateHeartCircle()
函数生成爱心形状的粒子分布。 - 使用
setInterval()
函数定时生成粒子和显示爱心形状与LOVE文字的组合效果。
4.1.5 页面行为设计
- 持续生成粒子效果,并每隔一段时间显示爱心图案和LOVE文字,以营造浪漫氛围。
4.1.6 爱心形状的数学公式
爱心形状可以通过以下参数方程来表示:
- x=16×sin3(t)x = 16 \times \sin^3(t)x=16×sin3(t)
- y=13×cos(t)−5×cos(2t)−2×cos(3t)−cos(4t)y = 13 \times \cos(t) - 5 \times \cos(2t) - 2 \times \cos(3t) - \cos(4t)y=13×cos(t)−5×cos(2t)−2×cos(3t)−cos(4t)
其中,t
是一个从 0 到 2π 的参数,x
和 y
表示心形曲线上的点的坐标。
4.1.7 代码组织
- 将样式、动画和JavaScript逻辑集成在一起,函数化的设计使代码清晰易维护,并且注重流畅的视觉效果。
4.2 index.html代码
<!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>
/* 设置页面基础样式 */
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: #000; /* 黑色背景 */
display: flex;
justify-content: center;
align-items: center;
color: #fff;
}
/* 粒子容器样式 */
.particle-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
overflow: hidden;
z-index: 1;
}
/* 普通粒子和爱心粒子的基础样式 */
.particle, .heart-particle {
position: absolute;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: rgba(255, 192, 203, 0.7); /* 粉红色背景 */
opacity: 0;
animation: particleAnimation 5s forwards ease-in-out; /* 动画效果 */
}
/* 爱心粒子的样式 */
.heart-particle {
background-color: #FF69B4; /* 固定粉色 */
opacity: 1;
animation: none; /* 保持静止 */
}
/* 粒子动画效果 */
@keyframes particleAnimation {
0% {
opacity: 1;
transform: translate(0, 0) scale(0.5); /* 起始状态 */
}
100% {
opacity: 0;
transform: translate(var(--x), var(--y)) scale(1); /* 结束状态 */
}
}
/* LOVE文本样式 */
.love-text {
position: absolute;
font-size: 5rem;
font-weight: bold;
color: #FF69B4; /* 粉色文字 */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
opacity: 0;
animation: fadeInOut 12s infinite; /* 渐入渐出动画 */
}
/* LOVE文本的动画效果 */
@keyframes fadeInOut {
0%, 80% { opacity: 0; }
83%, 97% { opacity: 1; }
100% { opacity: 0; }
}
</style>
</head>
<body>
<!-- 点击LOVE文字时跳转链接 -->
<a href="12.html">
<div class="particle-container"></div> <!-- 粒子容器 -->
<div class="love-text">LOVE</div> <!-- LOVE文字 -->
</a>
<script>
const particleContainer = document.querySelector('.particle-container');
const particleColor = 'random'; // 设置随机粒子颜色
const particleCount = 300; // 粒子数量
const heartScale = 20; // 调整爱心大小以确保可见性
// 随机生成颜色的函数
function getRandomColor() {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
// 创建粒子函数,参数为爱心位置的x和y坐标以及粒子的样式类名
function createParticle(heartX, heartY, className) {
const particle = document.createElement('div');
particle.classList.add(className);
// 设置粒子位置为屏幕中心
particle.style.left = '50%';
particle.style.top = '50%';
particle.style.setProperty('--x', `${heartX}px`);
particle.style.setProperty('--y', `${heartY}px`);
// 如果是随机颜色并且粒子类名为'particle',设置随机颜色
if (particleColor === 'random' && className === 'particle') {
particle.style.backgroundColor = getRandomColor();
}
// 将粒子添加到容器中
particleContainer.appendChild(particle);
// 如果粒子是普通粒子,则在5秒后移除
if (className === 'particle') {
setTimeout(() => {
particle.remove();
}, 5000);
}
}
// 生成爱心形状的粒子函数
function generateHeartCircle() {
const steps = 200; // 粒子数量
for (let i = 0; i < steps; i++) {
const t = (i / steps) * Math.PI * 2;
const heartX = heartScale * 16 * Math.pow(Math.sin(t), 3);
const heartY = heartScale * -(13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t));
createParticle(heartX, heartY, 'heart-particle'); // 创建爱心粒子
}
}
// 定时生成普通粒子的函数
function generateParticles() {
setInterval(() => {
const t = Math.random() * Math.PI * 2;
const heartX = heartScale * 16 * Math.pow(Math.sin(t), 3);
const heartY = heartScale * -(13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t));
createParticle(heartX, heartY, 'particle'); // 创建普通粒子
}, Math.max(10, 1000 / particleCount));
}
// 显示爱心粒子圈并与LOVE文本同步
function displayHeartWithLove() {
generateHeartCircle(); // 生成爱心粒子圈
}
// 启动粒子生成
generateParticles();
setInterval(displayHeartWithLove, 12000); // 每12秒显示一次爱心粒子圈与LOVE文本
</script>
</body>
</html>
4.3 12.html设计思路
4.3.1 HTML基础结构
- 使用标准HTML文档结构,设置页面语言为中文简体,字符编码为UTF-8,确保中文内容正确显示。(一般不用管)
4.3.2 页面样式设计
- 整体样式:设置页面背景为浅灰色,字体为楷体,文本颜色为深灰色,保持页面简洁和阅读舒适。
- 信件容器:通过
.letter-container
样式定义一个白色背景的容器,设置边框、阴影和内边距,使信件内容突出显示。 - 文字样式:标题使用粉色并居中对齐,段落内容首行缩进,签名部分使用斜体并右对齐。
4.3.3 动态时间显示
- 使用 JavaScript 获取当前时间,并格式化为
YYYY年MM月DD日 HH:MM:SS
的格式。 - 在页面右下角通过
#time
容器动态显示当前时间,并使用setInterval()
每秒更新一次,保持时间显示实时性。
4.3.4 页面行为设计
- 页面加载时立即显示当前时间,并且每秒钟自动更新,以增强页面的动态效果。
4.3.5 代码组织
- 样式、信件内容和动态时间显示逻辑全部内嵌在一个HTML文件中,代码结构简单清晰,便于理解和维护。
4.4 12.html代码
<!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>
/* 设置页面的基础样式 */
body {
font-family: 'KaiTi', serif; /* 设置字体为楷体 */
background-color: #f7f7f7; /* 背景颜色为浅灰色 */
color: #333; /* 文本颜色为深灰色 */
padding: 20px; /* 页面内容的内边距 */
line-height: 1.6; /* 行高 */
}
/* 表白信容器的样式 */
.letter-container {
background-color: #fff; /* 容器背景颜色为白色 */
border: 1px solid #ddd; /* 边框颜色为浅灰色 */
padding: 20px; /* 容器的内边距 */
max-width: 600px; /* 容器最大宽度为600像素 */
margin: 0 auto; /* 居中对齐 */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}
/* 标题的样式 */
h1 {
text-align: center; /* 标题居中 */
color: #ff69b4; /* 标题颜色为粉色 */
}
/* 段落的样式 */
p {
text-indent: 2em; /* 首行缩进两个字符 */
}
/* 签名部分的样式 */
.signature {
text-align: right; /* 签名右对齐 */
margin-top: 40px; /* 上边距 */
font-style: italic; /* 斜体 */
}
/* 时间显示部分的样式 */
.time {
text-align: right; /* 时间右对齐 */
margin-top: 10px; /* 上边距 */
font-style: italic; /* 斜体 */
font-size: 0.9em; /* 字体大小 */
color: #555; /* 字体颜色为浅灰色 */
}
</style>
</head>
<body>
<!-- 表白信的容器 -->
<div class="letter-container">
<h1>致特别的你</h1>
<p>亲爱的L,</p>
<p>我一直在寻找一个合适的机会向你表达我心中的感受,而今天,我终于鼓起勇气写下这封信。</p>
<p>与你相识的每一天,我都感受到一种前所未有的温暖和快乐。你的一举一动都深深吸引着我,每次见到你,我的心跳都会不自觉地加速。你的笑容像阳光一样,照亮了我的世界。</p>
<p>我想对你说,我喜欢你,喜欢你的善良、你的聪明、你的坚强,喜欢你的一切。我无法想象没有你的日子会是什么样子,我只知道,有你的陪伴,生活变得更加美好。</p>
<p>或许我不是最完美的,但我愿意为你努力,成为你心中值得依靠的那个人。如果你愿意给我一个机会,我会用我的真心和行动来证明我的爱。</p>
<p>不主动,怕失去,太主动,怕自作多情,伸手怕犯错,缩手怕错过,多一点怕打扰,少一点怕遗憾,我想见你。</p>
<p>无论你做出什么决定,我都尊重并理解,但请记住,无论如何,你在我心中永远是最特别的。</p>
<p class="signature">真心喜欢你的<br>某某某</p>
<!-- 显示当前时间 -->
<div class="time" id="time"></div>
</div>
<script>
/* 更新显示时间的函数 */
function updateTime() {
var now = new Date(); /* 获取当前时间 */
var year = now.getFullYear(); /* 获取年份 */
var month = String(now.getMonth() + 1).padStart(2, '0'); /* 获取月份并补齐两位 */
var day = String(now.getDate()).padStart(2, '0'); /* 获取日期并补齐两位 */
var hours = String(now.getHours()).padStart(2, '0'); /* 获取小时并补齐两位 */
var minutes = String(now.getMinutes()).padStart(2, '0'); /* 获取分钟并补齐两位 */
var seconds = String(now.getSeconds()).padStart(2, '0'); /* 获取秒数并补齐两位 */
var currentTime = year + '年' + month + '月' + day + '日 ' + hours + ':' + minutes + ':' + seconds;
document.getElementById('time').textContent = currentTime; /* 将时间显示在页面上 */
}
setInterval(updateTime, 1000); /* 每秒更新一次时间 */
updateTime(); /* 初始加载时间 */
</script>
</body>
</html>
5. Apache2 部署步骤
5.1 环境准备
在开始部署之前,请确保已经在服务器上安装了Apache2。如果尚未安装,可以使用以下命令进行安装:
sudo apt update
sudo apt install apache2
5.2 配置Apache2
5.2.1将网页文件复制到Apache2的根目录
默认情况下,Apache2的网页根目录位于 /var/www/html
。请将你的HTML文件及相关资源html复制到该目录中。
假设你的项目文件在本地目录 /path/to/your/project
,可以使用以下命令进行复制:
sudo cp -r /path/to/your/project/* /var/www/html/
如果在自己电脑上,可以使用xshell迁移代码
5.2.2设置文件权限
为了确保Apache2能够正确访问和提供这些文件,可能需要调整文件权限:
sudo chown -R www-data:www-data /var/www/html/
sudo chmod -R 755 /var/www/html/
5.2.3启用并重启Apache2
通过以下命令启用Apache2并重启服务,以确保配置生效:
sudo systemctl enable apache2
sudo systemctl restart apache2
5.3 访问网页
在完成以上步骤后,你可以通过浏览器访问你的服务器IP地址或域名,查看部署效果。
如果你在本地环境中测试,可以通过 http://
localhost来访问,本地只能给自己看,哈哈。
5.3.1 访问首页
5.3.2 书信
点击上面方框位置
6. 总结
通过以上步骤,成功地将七夕节特效与表白信网页部署到了Apache2服务器上(部署上是存在一定问题的,详细部署可以参考配置文档)。该网页不仅在设计上注重浪漫与简洁,还通过Apache2的稳定性保证了用户的访问体验。未来可以进一步优化网页内容,并添加更多的自定义功能来提升用户体验。