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

文章目录

  • 👩‍💻 基础Web开发练手项目系列:个人网站制作
    • 🚀 添加页面动画
      • 🔨使用CSS动画
        • 🔧步骤 1: 添加动画效果
      • 🔨使用JavaScript实现动画
        • 🔧步骤 2: 使用JavaScript添加动画
    • 🚀 服务端集成
      • 🔨使用Node.js和Express
        • 🔧步骤 3: 创建简单的Node.js服务
    • 🚀 预览与保存
    • 🚀 下一步计划


👩‍💻 基础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}`);
});
  1. 运行 node server.js 启动服务。

🚀 预览与保存

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

🚀 下一步计划

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/626386.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

笔记本电脑如何连接显示屏?

目录 1.按下快捷键 winP,选择扩展 2.连接显示器,连好接线 3.笔记本驱动有问题,显示错误如下: 4.驱动已经下载完成, 按下快捷键,还是显示第3步中的错误 5.驱动已经下载完成, 按下快捷键,参照…

步进电机基本原理详解

步进电机基本原理 步进电机是一种将电脉冲信号转换成相应角位移或线位移的电动机。 区别于以电压或电流作为控制信号,被控制量是转速的电动机。 每输入一个脉冲信号,转子就转动一个角度或前进一步,其输出的角位移或线位移与输入的脉冲数成正…

C++(9.5)——浅谈new和delete的实现原理

(注:本文是针对上篇文章中C内存管理的两个关键字)两个关键字原理的解析,对于这两个关键字的使用并没有什么影响,如果只想得知两个关键字的使用方法,则可以直接跳过本篇文章) 目录 1. 引入: 2.operator new 与 operat…

实战 php 使用 wkhtmltopdf 生成pdf的全过程

公司里边有生成pdf报告的业务需求,之前有过尝试用tcpdf,直接生成的pdf的过程,但是pdf报告的内容数据,根据不同内容的变化,都是各种各样的bug,一直处理修修补补的状态,让后台开发人员很是头疼. 经过思索和甄选,总结出我们的业务中是由于样式不可控导致的,当时从逻辑上就思考到用…

医院如何选择高效的内外网数据交换方案 替代U盘进行跨网传输?

医院信息网络是所有网络中安全性要求较高的网络之一,因此很多医院基于信息安全相关要求,会使用防火墙将网络隔离成内网和外网。内网用于日常医疗信息交换,外网可以及时获取Internet信息资源。但是网络隔离后,医院仍存在将报告资料…

原子类-数组类型原子类

数组类型原子类 AtomicIntegerArray:整型数组原子类 AtomicLongrArray:长整型数组原子类 AtomicReferenceArray:用类型数组原子类 常用API简介 数组类型原子类常用API简介 public final int get(int i) //获取 index=i 位置元素的值 public final int getAndSet(int i, in…

[数据集][目标检测]茶叶病害数据集VOC+YOLO格式883张8类别

数据集格式:Pascal VOC格式YOLO格式(不包含分割路径的txt文件,仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数):883 标注数量(xml文件个数):883 标注数量(txt文件个数):883 标注类别…

哪些药物可能对发作性睡病有帮助?

发作性睡病是一种慢性睡眠障碍,其症状包括不可抗拒的短期睡眠发作、猝倒、睡眠麻痹和睡眠幻觉等。治疗发作性睡病的方法包括药物治疗和非药物治疗,其中药物治疗是重要的手段之一。 目前治疗发作性睡病的药物主要包括中枢兴奋剂、抗抑郁药和镇静催眠药等…

【NI国产替代】PXI-6254,32 AI(16位,1 MS/s),48 DIO,PXI多功能I/O模块

32 AI(16位,1 MS/s),48 DIO,PXI多功能I/O模块 PXI-6254提供模拟输入、关联数字I/O、两个32位计数器/定时器以及模拟和数字触发。该设备为从实验室自动化、研究、设计验证/测试到制造测试等各种应用提供了低成本的可靠D…

Mybatis基础---------增删查改

增删改 1、新建工具类用来获取会话对象 import org.apache.ibatis.session.SqlSession; import org.apache.ibatis.session.SqlSessionFactory; import org.apache.ibatis.session.SqlSessionFactoryBuilder; import org.apache.ibatis.io.Resources;import java.io.IOExcept…

Java运算符作用及解析

Java运算符是对变量或者常量进行操作的符号。以下是Java中常见运算符的解析: 赋值运算符:如“”,将右侧的值赋给左侧的变量。一元运算符:如“”“-”“!”,用于对变量进行操作。算术运算符:如“”“-”“*…

典型场景解析|PolarDB分布式版如何支撑SaaS多租户?

SaaS多租户背景 很多平台类应用或系统(如电商CRM平台、仓库订单平台等等),它们的服务模型是围绕用户维度(这里的用户维度可以是一个卖家或品牌,可以是一个仓库等)展开的。因此,这类型的平台业务…

【原创】docker +宝塔+安装zabbix

Zabbix: Zabbix可以监控各种网络服务、服务器和网络设备,而无需在目标设备上安装客户端。它的强大之处在于自带的Web界面,能够提供实时监控和各种报警功能。方法1: 步骤 创建Docker Compose文件: 首先,你需要创建一个docker-comp…

C技能树-学习笔记(1-2)C语言概述和数据类型

参考:https://edu.csdn.net/skill/c 1、输出 “Hello, World!” 字符串,请选出错误答案。 2、错误的print函数。 for … in …:是python的语法,C语言的写法是for (;😉 3、C标准 没有C19标准。 4、了解C编译管道 …

AI嵌入式K210项目(4)-FPIOA

文章目录 前言一、FPIOA是什么?二、FPIOA代码分析总结 前言 磨刀不误砍柴工,在正式开始学习之前,我们先来了解下K210自带的FPIOA,这个概念可能与我们之前学习STM32有很多不同,STM32每个引脚都有特定的功能&#xff0c…

嵌入式培训机构四个月实训课程笔记(完整版)-C++和QT编程第三天-C++类和对象高级应用(物联技术666)

链接:https://pan.baidu.com/s/1YRXI0WiABUlYaQXQDNfbyA?pwd=1688 提取码:1688 上午:类和对象高级应用(续) 下午:派生和继承 教学内容: 1、友元 类的私有成员只能在类定义的范围内使用,也就是说私有成员只能通过它的成员函数来访问但是,有时候需要在类的外部访问…

关于前端面试中forEach方法的灵魂7问?

目录 前言 一、forEach方法支持处理异步函数吗? 二、forEach方法在循环过程中能中断吗? 三、forEach 在删除自己的元素后能重置索引吗? 四、forEach 的性能相比for循环哪个好? 五、使用 forEach 会不会改变原来的数组&#…

xshell:关于ssh用户身份验证不能选择password的解决方法

接下来我将告诉大家如何进行修改让其能够进行密码登录 我使用的软件是VM VirtualBox管理器 进行用户名密码登录后 输入 cd /etc/ 切换到etc目录下 cd /etc/ 切换到etc目录后输入ls ls 切换到ssh目录下 cd ssh 进入文件 sshd_config vi sshd_config 找到指定部分进行修改 如何…

多级缓存架构(三)OpenResty Lua缓存

文章目录 一、nginx服务二、OpenResty服务1. 服务块定义2. 配置修改3. Lua程序编写4. 总结 三、运行四、测试五、高可用集群1. openresty2. tomcat 通过本文章,可以完成多级缓存架构中的Lua缓存。 一、nginx服务 在docker/docker-compose.yml中添加nginx服务块。…

评估文字识别准确性的方法与流程

随着信息技术的发展,文字识别技术在各个领域得到了广泛的应用。然而,在实际应用中,如何评估文字识别的准确性,一直是相关领域的一个难题。本文将介绍几种常用的文字识别准确性评估方法,以期为相关领域的研究提供参考。…