大学生期末大作业：治愈系浪浪山小妖怪主题网站开发全记录-优快云博客

一、网站描述

浪浪山小妖怪主题网站是我为HTML+CSS+JavaScript课程设计的期末大作业，一个纯原生前端实现的响应式网站。网站以虚构的动画电影《浪浪山小妖怪》为主题，采用温暖治愈的配色方案，主色调为米白、浅棕和淡橙色系，营造出温馨舒适的视觉体验。

网站包含五个完整页面：

首页：展示电影简介和主要角色
电影介绍：详细介绍电影内容和主创团队
小妖怪图鉴：展示各种小妖怪角色及其属性
幕后故事：讲述电影制作过程和创作理念
关于我们：介绍工作室信息和联系方式

整个项目完全使用原生HTML5、CSS3和JavaScript实现，没有引入任何第三方库或框架，充分展示了基础前端技术的应用能力。

二、作品简介

这个项目源于我对治愈系动画的喜爱，我希望创建一个能够带给观众温暖感受的网站。浪浪山小妖怪的世界观设定为一个充满奇幻色彩但又不失温情的山中精灵世界，每个小妖怪都有独特的性格和能力。

技术层面，这个项目重点实现了：

响应式布局：适配从手机到桌面各种屏幕尺寸
CSS动画效果：增强用户体验的交互元素
原生JavaScript功能：如图片筛选、表单验证等
语义化HTML结构：提高可访问性和SEO友好性

作为大学生课程作业，这个项目不仅满足基本要求，还额外实现了许多增强用户体验的细节，如平滑滚动、悬停效果等，体现了对前端开发的深入理解。

三、功能描述

1. 响应式布局

网站采用移动优先的设计理念，使用媒体查询(@media)实现响应式布局：

桌面端：多栏布局，充分利用屏幕空间
平板电脑：适当调整布局和字体大小
手机端：简化为单栏布局，优化触摸操作

导航栏在移动设备上会转换为汉堡菜单，提升小屏幕下的可用性。

2. 交互功能

图片筛选系统：在小妖怪图鉴页面，用户可以按类型筛选不同的小妖怪
平滑滚动：点击导航链接时实现平滑滚动到对应区域
表单验证：联系表单提供基本的客户端验证
悬停效果：卡片、按钮等元素都有精心设计的悬停动画

3. 视觉设计

配色方案：主色调#d4a373(淡橙棕)、辅色#5a4a3a(深棕)、背景色#fff9f0(米白)
字体选择：使用系统默认的无衬线字体，确保可读性
图标设计：使用SVG内联图标，保证各种分辨率下的清晰度
阴影效果：柔和的阴影增强层次感

4. 性能优化

所有图片使用SVG或Base64编码内联，减少HTTP请求
CSS和JavaScript都经过精简优化
使用CSS动画代替JavaScript动画提高性能

四、作品演示

首页展示

首页包含导航栏、欢迎横幅、电影简介和小妖怪展示区。横幅区域采用渐变色背景，搭配简洁的文字介绍和召唤按钮。

小妖怪图鉴

这个页面展示了6种不同的小妖怪角色，每种都有独特的颜色和特征。用户可以点击顶部筛选按钮按类型查看不同的小妖怪。

幕后故事时间线

采用创新的时间线设计展示电影制作历程，左右交替的布局既美观又便于阅读。

五、关键代码展示

1. 响应式导航栏实现

<header>
    <div class="container">
        <nav>
            <div class="logo">
                <img src="data:image/svg+xml;base64,..." alt="浪浪山小妖怪">
                浪浪山小妖怪
            </div>
            <div class="menu-toggle" id="menuToggle">☰</div>
            <ul class="nav-links" id="navLinks">
                <li><a href="index.html">首页</a></li>
                <!-- 其他导航项 -->
            </ul>
        </nav>
    </div>
</header>

<style>
    @media (max-width: 768px) {
        .menu-toggle {
            display: block;
        }
        
        .nav-links {
            position: fixed;
            top: 70px;
            left: -100%;
            width: 100%;
            height: calc(100vh - 70px);
            background-color: #fff9f0;
            flex-direction: column;
            transition: left 0.3s;
        }
        
        .nav-links.active {
            left: 0;
        }
    }
</style>

<script>
    const menuToggle = document.getElementById('menuToggle');
    const navLinks = document.getElementById('navLinks');
    
    menuToggle.addEventListener('click', () => {
        navLinks.classList.toggle('active');
    });
</script>

2. 小妖怪筛选系统

// 获取所有筛选按钮和小妖怪卡片
const filterBtns = document.querySelectorAll('.filter-btn');
const characterCards = document.querySelectorAll('.character-card');

// 为每个按钮添加点击事件
filterBtns.forEach(btn => {
    btn.addEventListener('click', () => {
        // 更新按钮状态
        filterBtns.forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        
        const filter = btn.dataset.filter;
        
        // 筛选并显示符合条件的卡片
        characterCards.forEach(card => {
            if (filter === 'all' || card.dataset.category === filter) {
                card.style.display = 'block';
            } else {
                card.style.display = 'none';
            }
        });
    });
});

3. 时间线布局CSS

.story-timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 0;
}

.story-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    background-color: #d4a373;
    transform: translateX(-50%);
}

.timeline-item:nth-child(odd) {
    padding-right: calc(50% + 30px);
    text-align: right;
}

.timeline-item:nth-child(even) {
    padding-left: calc(50% + 30px);
    text-align: left;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .story-timeline::before {
        left: 30px;
    }
    
    .timeline-item:nth-child(odd),
    .timeline-item:nth-child(even) {
        padding-left: 80px;
        padding-right: 0;
        text-align: left;
    }
}

4. 卡片悬停动画

.character-card {
    background-color: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
}

.character-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.character-image img {
    transition: transform 0.5s;
}

.character-card:hover .character-image img {
    transform: scale(1.1);
}

六、开发心得

通过这个项目的开发，我深刻体会到原生Web技术的强大之处。虽然现在有各种前端框架，但掌握好HTML、CSS和JavaScript基础仍然是成为优秀前端开发者的关键。

几个重要的收获：

CSS布局能力：通过这个项目，我熟练掌握了Flexbox和Grid布局，能够创建复杂的响应式设计
JavaScript DOM操作：实现各种交互功能让我对原生DOM API有了更深理解
性能优化意识：学会了如何在不使用框架的情况下保证页面性能
设计思维：从配色到动效，全面考虑用户体验

这个项目也让我认识到，好的前端开发不仅仅是实现功能，更需要关注细节，比如：

适当的过渡动画提升用户体验
精心设计的交互反馈
无障碍访问考虑
跨浏览器兼容性

未来我计划为这个项目添加更多功能，比如：

小妖怪的3D旋转展示
用户收藏系统
更丰富的动画效果
夜间模式支持

这个浪浪山小妖怪网站虽然是我的课程作业，但我把它当作一个真正的产品来打造。希望通过这个项目，能够展示我对前端开发的热爱和专业能力。