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

一、前言

• 在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

  时间轴、轮播图

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

  四、首页代码

                      星游记模仿网页                                                                                                                                    星游记                    

• 首页
• 人物介绍
• 剧情介绍
• 更多图片
• 续集链接
登录

不管黑暗怎样蔓延，总有星星，去把它照亮！

JUST DO IT // 打字机 var text = document.getElementById('my-text'); const txt = ["相信奇迹的人，本身和奇迹一样了不起！", "给我高高的飞起来啊！", "拉勾的事情，就一定要做到！"]; var index = 0; var xiaBiao = 0; var huan = true; setInterval(function () { if (huan) { text.innerHTML = txt[xiaBiao].slice(0, ++index); console.log(index); } else { text.innerHTML = txt[xiaBiao].slice(0, index--); console.log(index); } if (index == txt[xiaBiao].length + 3) { huan = false; } else if (index = txt.length) { xiaBiao = 0; } } }, 200)

人物语录

• 王冠的真正含义是：
• 我会为你们抵挡一切
• 永远让你们只看到
• 金色的希望！
咕咚国王
• 如果黑洞能吞下
• 一百亿个太阳
• 我就是———
• 一百亿零一个！
麦当
• 星空之所以美丽
• 就是因为在无限的宇宙中
• 不管黑暗如何蔓延
• 都有星星的光芒去把它照亮！
迪亚
• 把所有人
• 都踩在脚下
• 才能到达的顶峰
• 还能看到什么风景？
米龙

照片集

联系客服 .stick-box { position: fixed; /* 盒子大小 */ width: 50px; height: 150px; z-index: 999; /* 左下角 */ left: 0%; bottom: 60%; /* 水平垂直居中 */ display: flex; justify-content: center; align-items: center; border-top-right-radius: 10px; /* 添加右上角圆角属性 */ border-bottom-right-radius: 10px; /* 添加右下角圆角属性 */ box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2); /* 添加阴影 */ } .stick-text { /* 属性设置了文字的书写模式为竖排，vertical-rl 的意思是从上到下，从右到左排列文字 */ writing-mode: vertical-rl; /* 属性设置了文字排列方向为混合方向，当在竖排模式下，该属性可以让文字既不会上下倒置，也不会左右倒置。 */ text-orientation: mixed; font-size: 20px; /* 属性设置了行高为字体高度的 1.2 倍，用来控制文字的行距。 */ line-height: 4; color: #fff; margin: auto; } /* 媒体查询 响应式 0-700px生效 */ @media (max-width: 700px) { .stick-box { width: 30px; height: 100px; } .stick-text { font-size: 14px; /* 当屏幕宽度小于400px时，黏性标签的字体大小变为 16px */ } } 顶部 /* 定义样式 */ .sticky-tag { position: fixed; /* 左下角 */ right: -100px; bottom: 10%; transform: translateY(-50%); /* 盒子大小 */ width: 50px; height: 50px; z-index: 999; /* 水平垂直居中 */ display: flex; justify-content: center; align-items: center; /* 添加圆角属性 */ border-radius: 50%; /* 添加阴影 */ box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2); color: #fff; text-align: center; line-height: 30px; cursor: pointer; opacity: 0; transition: all .3s ease-in-out; } .sticky-tag.show { right: 20px; opacity: 1; } .right-stikc-text { /* 属性设置了文字的书写模式为竖排，vertical-rl 的意思是从上到下，从右到左排列文字 */ writing-mode: vertical-rl; /* 属性设置了文字排列方向为混合方向，当在竖排模式下，该属性可以让文字既不会上下倒置，也不会左右倒置。 */ text-orientation: mixed; font-size: 14px; /* 属性设置了行高为字体高度的 1.2 倍，用来控制文字的行距。 */ line-height: 4; color: #fff; margin: auto; } /* 媒体查询 响应式 0-700px生效 */ @media (max-width: 700px) { .sticky-tag { width: 30px; height: 30px; } .right-stikc-text { font-size: 8px; /* 当屏幕宽度小于400px时，黏性标签的字体大小变为 16px */ } } 0:00 3:15 > var arrow = document.querySelector(".right-arrow"); var music = document.querySelector(".music-box"); var fuhao = document.querySelector(".fuhao"); var isFlipped = false; arrow.addEventListener("click", function () { if (isFlipped) { music.classList.remove("show"); fuhao.classList.remove("flip"); isFlipped = false; arrow.setAttribute("transform", "rotate(0)"); } else { fuhao.classList.add("flip"); isFlipped = true; arrow.setAttribute("transform", "rotate(180)"); music.classList.add("show"); } }); © 2023 Pan Peter

星游记官网

• 风暴法米拉1
• 风暴法米拉2
• 剧场版1
• 剧场版2

我们的故事

• 世界观
• 人物小专
• 故事脚本
• 动画制作

能力解说

• 势力
• 道具
• 时空
• 科技

关于我们

• 团队介绍
• 获奖记录
• 幕后制作
• 制作发行
const menuBtn = document.querySelector(".menu-icon span"); const searchBtn = document.querySelector(".search-icon"); const cancelBtn = document.querySelector(".cancel-icon"); const items = document.querySelector(".nav-items"); const form = document.querySelector("form"); menuBtn.onclick = () => { items.classList.add("active"); menuBtn.classList.add("hide"); searchBtn.classList.add("hide"); cancelBtn.classList.add("show"); } cancelBtn.onclick = () => { items.classList.remove("active"); menuBtn.classList.remove("hide"); searchBtn.classList.remove("hide"); cancelBtn.classList.remove("show"); form.classList.remove("active"); cancelBtn.style.color = "#fff"; } searchBtn.onclick = () => { form.classList.add("active"); searchBtn.classList.add("hide"); cancelBtn.classList.add("show"); } const stickyTag = document.getElementById('sticky-tag'); const navbar = document.getElementById('id-navbar'); const scrollOffset = 400; const stick = document.getElementById('id-stick'); window.addEventListener('scroll', function () { if (window.pageYOffset > 400) { stickyTag.classList.add('show'); navbar.classList.add('bg-primary'); // 添加背景蓝色样式 navbar.classList.remove('bg-transparent'); // 移除透明背景样式 navbar.classList.add('fixed-top'); // 添加 fixed-top 样式 stick.classList.add('bg-only'); // 添加背景蓝色样式 stick.classList.remove('bg-transparent'); // 移除透明背景样式 } else { stickyTag.classList.remove('show'); navbar.classList.remove('bg-primary'); // 移除背景蓝色样式 navbar.classList.add('bg-transparent'); // 添加透明背景样式 stick.classList.remove('bg-only'); // 移除背景蓝色样式 stick.classList.add('bg-transparent'); // 添加透明背景样式 } }); *[data-aos] { display: block !important; opacity: 1 !important; visibility: visible !important; } AOS.init({ duration: 700 }); AOS.init({ disable: function () { var maxWidth = 1200; return window.innerWidth

---

 视频

电石QwQ的个人空间-电石QwQ个人主页-哔哩哔哩视频哔哩哔哩电石QwQ的个人空间，提供电石QwQ分享的视频、音频、文章、动态、收藏等内容，关注电石QwQ账号，第一时间了解UP注动态。不甘寂寞https://space.bilibili.com/279540198