个人网站制作 Part 6 添加高级特性(页面动画、服务端集成） | Web开发项目

---

👩?💻 基础Web开发练手项目系列：个人网站制作

欢迎回到基础Web开发练手项目系列！

在前几篇博文中，我们已经创建了个人网站的基本结构、样式、导航栏、项目展示、联系信息、表单交互、动画效果、页面滚动效果、响应式设计和性能优化。

在本篇中，我们将学习如何添加一些高级特性，例如页面动画和服务端集成。

🚀 添加页面动画

🔨使用CSS动画

🔧步骤 1: 添加动画效果

在 style.css 文件中为元素添加动画效果：

/* 旋转动画效果 */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* 应用旋转动画到项目展示区域 */
#projects {
    animation: rotate 5s infinite linear; /* 持续5秒，无限循环，线性变化 */
}

🔨使用JavaScript实现动画

🔧步骤 2: 使用JavaScript添加动画

在 script.js 文件中使用JavaScript为元素添加动画效果：

// 获取项目展示区域
const projectsSection = document.getElementById('projects');

// 添加JavaScript动画效果
function rotateElement() {
    let rotation = 0;

    // 使用定时器实现旋转动画
    setInterval(() => {
        rotation += 5; // 每次增加5度
        projectsSection.style.transform = `rotate(${rotation}deg)`;
    }, 100); // 每100毫秒执行一次
}

// 调用动画函数
rotateElement();

🚀 服务端集成

🔨使用Node.js和Express

🔧步骤 3: 创建简单的Node.js服务

1. 安装Node.js和npm。
2. 在项目根目录创建 server.js 文件。

// 导入Express框架
const express = require('express');
const app = express();

// 设置端口
const port = 3000;

// 创建简单的路由
app.get('/', (req, res) => {
    res.send('欢迎访问我的网站！');
});

// 启动服务
app.listen(port, () => {
    console.log(`服务器运行在 http://localhost:${port}`);
});

3. 运行 node server.js 启动服务。

🚀 预览与保存

确保保存所有文件并在浏览器中预览你的网站。你现在应该看到一个拥有页面动画和简单服务端的更加功能丰富的个人网站了！

🚀 下一步计划

在下一篇文章中，我们将学习如何添加用户认证和数据库集成，进一步提升网站的功能性。记得继续关注本系列，为你的网站增添更多强大的功能！

通过这个项目，你已经学到了Web开发中许多重要的基础知识，并通过添加高级特性使你的网站更加炫酷。祝你编码愉快，不断拓展技能！