前端——bootstrap响应式网页制作-星游记主题（大作业+源码）_网站优化分享

相关推荐recommended

前端——bootstrap响应式网页制作-星游记主题（大作业+源码）

作者：mmseoamin日期：2024-01-22

一、前言

在b站上看见了童年神作的续集（虽然是个人自制）
作品：【自制星游记续】十年后，我们再飞行！！！
【自制星游记续】十年后，我们再飞行！！！_哔哩哔哩_bilibili六一快乐，伙伴们。部分BGM来自：北京来的狼，鹿泊言{其实还有举杯邀酒请孤独，老杯做了很多动画bgm，很感谢他}开头的钢琴曲来自：再见秋猫配音表：麦当——繁陌浅笛亚——名前桑咕咚——在下秋爷米龙——Variabilitysama 唐武德以及联盟士兵——老零ZERO , 视频播放量 93902、弹幕量 1023、点赞数 21409、投硬币枚数 20380、收藏人数 8282、转发人数 1365, 视频作者 K王桐木, 作者简介修高！！！！！！！！！！！！！！！！！，相关视频：【自制星游记第28站】迷失的方向，最后的倒计时！，【自制星游记第27站】把彩虹海画下来，为自己而活，𝐓𝐌耗时𝟏𝟏𝟒𝟓𝟏𝟒秒修复的星游记《再飞行》，只为让你们带着梦想再次高高的飞起来啊！，纳米核心第一季，2023，再等星游！，九年相识，三年等待！终将再一次响彻整个宇宙！，星游记，一部曾经有机会触碰那个天花板的作品。，星游记—笛亚，【独家】赘婿第1集风起【4月国创】，“这短短三小时，看懂的人却整整花了十几年”https://www.bilibili.com/video/BV1om4y147ZM剧情神还原！太赞了！

自己正好想了解一下响应式网页的制作——于是制作了一个简单的网页，用于练习

二、网页（源码）

星游记-响应式网页制作.zip - 蓝奏云文件大小：52.4 M|https://wwwf.lanzout.com/iECSB0yuujxc

目录结构

把模块引用的CSS单独放一个文件夹里，方便以后CV

素材

搜集素材还是挺累时间的（文本内容+照片）

三、功能

1、导航变色（下拉到一定距离-变色）
2、打字机特效
3、鼠标特效（点击特效（烟花）-还可以加鼠标移动特效）
4、音乐播放 (用的大佬的)
5、盒子出现动画（JS库）
6、时间轴滚动特效（Plugin）
7、响应式（※※※）网格布局（超出换行）
8、网页宠物（左下角）（Plugin）
9、返回顶部（黏性标签-联系客服）
10、canvas的应用（星空点绘制-拓展可以做樱花飞舞）
11、加载动画（简单：gif --进阶- 用svg画一个，然后加CSS动画）
12、轮播图 (用的大佬的)
13、图片-遮罩

14、响应式导航

TODO
1、图表
2、时钟
3、登录-注册页
4、表格

借用大佬的素材：
https://space.bilibili.com/266664645
时间轴、轮播图

还用了好几位大佬的素材，但是链接找不到了，呜呜呜