Hello Kitty主题个人网站

这是一个以Hello Kitty为主题的个人网站项目，采用响应式设计，包含多个页面，展示了丰富的前端技术应用。

网站结构

网站包含以下页面：

首页 (index.html)
登录/注册页 (denglu.html)
我的学校 (xuexiao.html)
我的家乡 (jiaxiang.html)
兴趣爱好 (aihao.html)

技术亮点

1. 首页 (index.html)

轮播图实现：使用Swiper.js实现Banner区自动轮播

<!-- Banner区域 -->
<section class="banner">
    <!-- Slider main container -->
    <div class="swiper-container">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper">
            <!-- Slides -->
            <div class="swiper-slide"><img src="images/0702_hellokitty网页-01.jpg" alt="Banner 1"></div>
            <div class="swiper-slide"><img src="images/0702_hellokitty网页-02.jpg" alt="Banner 2"></div>
            <div class="swiper-slide"><img src="images/0702_hellokitty网页-03.jpg" alt="Banner 3"></div>
            <div class="swiper-slide"><img src="images/0702_hellokitty网页-04.jpg" alt="Banner 4"></div>
            <div class="swiper-slide"><img src="images/0702_hellokitty网页-05.jpg" alt="Banner 5"></div>
        </div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
</section>

滚动动画：使用ScrollReveal库实现页面元素的滚动展示动画

// ScrollReveal
ScrollReveal().reveal('.section-title', { delay: 200, origin: 'bottom', distance: '30px', easing: 'ease-in-out' });
ScrollReveal().reveal('.about-content .photo-left', { delay: 300, origin: 'left', distance: '50px' });
ScrollReveal().reveal('.about-content .photo-middle', { delay: 400, origin: 'bottom', distance: '50px' });
ScrollReveal().reveal('.about-content .about-info', { delay: 500, origin: 'right', distance: '50px' });

响应式导航栏：实现移动端适配的导航菜单

// 移动端菜单
document.addEventListener('DOMContentLoaded', function() {
    const menuBtn = document.querySelector('.mobile-menu-btn');
    const mainNav = document.querySelector('.main-nav');
    
    if (menuBtn) {
        menuBtn.addEventListener('click', function() {
            mainNav.classList.toggle('active');
            menuBtn.textContent = mainNav.classList.contains('active') ? '×' : '≡';
        });
    }
});

2. 登录/注册页面 (denglu.html)

玻璃拟态效果：使用CSS实现现代化的玻璃拟态UI

.login-form {
    max-width: 800px;
    margin: 0 auto;
    background-color: rgba(255, 255, 255, 0.85);
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(226, 172, 192, 0.3);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

标签页切换功能：实现登录和注册表单的无刷新切换

// 标签切换功能
function switchTab(index) {
    const tabs = document.querySelectorAll('.form-tab');
    const panels = document.querySelectorAll('.form-panel');
    
    tabs.forEach(tab => tab.classList.remove('active'));
    panels.forEach(panel => panel.classList.remove('active'));
    
    tabs[index].classList.add('active');
    panels[index].classList.add('active');
}

按钮波纹效果：添加交互动画提升用户体验

.submit-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 0;
    border-radius: 100%;
    transform: scale(1, 1) translate(-50%);
    transform-origin: 50% 50%;
}

.submit-btn:hover::after {
    animation: ripple 1s ease-out;
}

3. 我的学校页面 (xuexiao.html)

照片墙动画效果：实现图片展示的多种动画效果

/* 为不同的图片添加不同的动画延迟 */
.gallery-left .gallery-item {
    animation: fadeInLeft 1s ease-out forwards;
}
.gallery-middle .gallery-item:first-child {
    animation: fadeInDown 1s 0.3s ease-out forwards, floatUp 4s ease-in-out infinite;
}
.gallery-middle .gallery-item:last-child {
    animation: fadeInUp 1s 0.6s ease-out forwards, floatDown 4s ease-in-out infinite;
}
.gallery-right .gallery-item {
    animation: fadeInRight 1s 0.9s ease-out forwards;
}

4. 我的家乡页面 (jiaxiang.html)

网格布局：使用CSS Grid实现照片墙的响应式布局

.hometown-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

装饰元素动画：添加小型动画增强页面趣味性

/* 装饰气泡 */
.gallery-bubble {
    position: absolute;
    bottom: -10px;
    right: 15px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: rgba(226, 172, 192, 0.5);
    opacity: 0;
    transition: all 0.3s ease;
}

.gallery-item:hover .gallery-bubble {
    opacity: 1;
    transform: translateY(-10px);
}

背景遮罩：实现半透明背景提高文字可读性

.left-column::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.6);
    z-index: -1;
    border-radius: 15px;
}

5. 兴趣爱好页面 (aihao.html)

Flex布局：使用Flexbox实现网格式的内容展示

.hobby-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto 50px;
}

.hobby-item {
    width: 30%;
    margin: 10px;
    position: relative;
}

标题动画：为页面标题添加浮动动画效果

@keyframes titleFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

共通设计特点

色彩方案：全站统一使用Hello Kitty风格的粉色系配色，主色调为#e2acc0
响应式设计：适配移动端和桌面端不同设备
导航栏一致性：所有页面共享相同的导航栏设计，当前页面高亮显示
动画效果：添加适当的CSS动画和过渡效果提升用户体验
页脚设计：统一的页脚设计，包含版权信息和制作信息

浏览器兼容性

网站兼容现代浏览器，包括：

Chrome
Firefox
Safari
Edge

技术栈

HTML5
CSS3
JavaScript (ES6+)
Swiper.js（轮播图库）
ScrollReveal（滚动动画库）

设计风格

网站整体采用Hello Kitty风格的粉色系设计，结合现代化的UI元素，如玻璃拟态效果、响应式设计、动画过渡等，打造温馨可爱且功能完善的个人网站。

HelloKitty 静态页面模板

Hello Kitty主题个人网站

网站结构

技术亮点

1. 首页 (index.html)

2. 登录/注册页面 (denglu.html)

3. 我的学校页面 (xuexiao.html)

4. 我的家乡页面 (jiaxiang.html)

5. 兴趣爱好页面 (aihao.html)

共通设计特点

浏览器兼容性

技术栈

设计风格