前端——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");
            }
        });

    



    
    
    




    
    
        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 < maxWidth;
            }
        });
    

 视频

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