火影忍者主题网页源码 (大作业html)

最新推荐文章于 2025-06-23 11:04:41 发布
peter123123123123
最新推荐文章于 2025-06-23 11:04:41 发布
阅读量278
点赞数 2
CC 4.0 BY-SA版权
分类专栏：前端demo 前端文章标签：课程设计 html 前端
本文链接：https://blog.youkuaiyun.com/Pan_peter/article/details/147907006
前端同时被 2 个专栏收录
20 篇文章
订阅专栏
前端demo
14 篇文章
订阅专栏
「火影忍者主题」
链接：https://pan.quark.cn/s/a55def104530

链接：https://pan.quark.cn/s/a55def104530

链接：https://pan.quark.cn/s/a55def104530
之前代做的大作业（doge），全部放出来，放着也是吃灰~

纯搬砖，技术力很差，天天耕地，在代码的田野里，干就完了！
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>火影忍者游戏世界 - 首页</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <style>
        :root {
            --primary-color: #f7931e; /* Naruto Orange */
            --secondary-color: #343a40; /* Dark Grey */
            --dark-bg: #212529; /* Very Dark Grey */
            --light-text: #f8f9fa; /* Light Grey */
            --card-bg: #343a40; /* Slightly lighter card background */
            --card-border: #4f5b62; /* Card border color */
            --section-padding: 60px 0;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
            background-color: var(--dark-bg);
            color: var(--light-text);
        }

        /* Header/Navbar Styling - Similar to Don't Starve Wiki */
        .navbar {
            background-color: var(--secondary-color);
            padding: 1rem 0;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
        }

        .navbar-brand {
            color: var(--primary-color) !important;
            font-size: 1.8rem;
            font-weight: bold;
            display: flex;
            align-items: center;
        }

        .navbar-brand img {
            height: 60px; /* Adjust logo height */
             margin-right: 10px;
        }

        .navbar-nav .nav-link {
            color: var(--light-text) !important;
            margin-left: 15px;
            font-size: 1.1rem;
            transition: color 0.3s ease;
        }

        .navbar-nav .nav-link:hover,
        .navbar-nav .nav-link.active {
            color: var(--primary-color) !important;
            text-decoration: underline;
        }

        /* Hero Section with Parallax */
        .hero-section {
            position: relative;
            height: 600px; /* Adjust height as needed */
            background: url('img/bg.webp') no-repeat center center;
            background-size: cover;
            background-attachment: fixed; /* Parallax effect */
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            /* Overlay for better text readability */
            &::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: rgba(0, 0, 0, 0.5); /* Dark overlay */
            }
        }

        .hero-content {
            position: relative; /* Ensure content is above overlay */
            z-index: 1;
        }

        .hero-content h1 {
            font-size: 3.5rem;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
        }

        .hero-content .btn-primary {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
            font-size: 1.2rem;
            padding: 10px 30px;
            margin-top: 20px;
            transition: background-color 0.3s ease;
        }

        .hero-content .btn-primary:hover {
            background-color: #e0831c; /* Slightly darker orange */
            border-color: #e0831c;
        }


        /* Section Styling */
        .section {
            padding: var(--section-padding);
            background-color: var(--dark-bg); /* Ensure consistent background */
        }

        .section-title {
            color: var(--primary-color);
            text-align: center;
            margin-bottom: 50px;
            font-size: 2.5rem;
            position: relative;
        }
         .section-title::after {
             content: '';
             display: block;
             width: 80px;
             height: 4px;
             background-color: var(--primary-color);
             margin: 15px auto 0;
         }


        /* Card Styling - Similar to Wiki Info Boxes/Items */
        .card {
            background-color: var(--card-bg);
            border: 1px solid var(--card-border);
            color: var(--light-text);
            margin-bottom: 20px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .card:hover {
             transform: translateY(-5px);
             box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
        }

        .card-img-top {
            width: 100%;
            height: 200px; /* Fixed height for images */
            object-fit: cover; /* Crop and cover the area */
            object-position: center; /* Center the image */
        }

        .card-body {
            padding: 20px;
        }

        .card-title {
            color: var(--primary-color);
            font-size: 1.3rem;
            margin-bottom: 15px;
        }

        .card-text {
            font-size: 1rem;
            line-height: 1.6;
        }

        /* Feature Boxes (using Cards or custom layout) */
        .feature-box {
             text-align: center;
             padding: 30px;
             background-color: var(--card-bg);
             border: 1px solid var(--card-border);
             margin-bottom: 20px;
             border-radius: 8px;
             transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
         .feature-box:hover {
              transform: translateY(-5px);
              box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
         }

        .feature-box h4 {
            color: var(--primary-color);
            margin-top: 15px;
        }

        /* News/Updates List (using List Group) */
        .list-group {
             background-color: transparent;
        }
        .list-group-item {
             background-color: var(--card-bg);
             border: 1px solid var(--card-border);
             color: var(--light-text);
             margin-bottom: 10px;
             border-radius: 5px;
             transition: background-color 0.3s ease;
        }
        .list-group-item:hover {
             background-color: #495057; /* Darken on hover */
        }

        .list-group-item a {
            color: var(--light-text);
            text-decoration: none;
            display: block;
        }
         .list-group-item a:hover {
             color: var(--primary-color);
         }


        /* Footer Styling */
        footer {
            background-color: var(--secondary-color);
            color: var(--light-text);
            text-align: center;
            padding: 30px 0;
            font-size: 0.9rem;
        }
         footer a {
             color: var(--primary-color);
             text-decoration: none;
         }
         footer a:hover {
              text-decoration: underline;
         }

        /* Custom adjustments for responsiveness and spacing */
        .container {
            max-width: 1200px; /* Adjust max-width for larger screens */
        }

        /* AOS animation adjustments (optional) */
        [data-aos] {
            opacity: 0;
            transition-property: opacity, transform;
        }

        [data-aos].aos-animate {
            opacity: 1;
        }

        /* Example AOS animations: fade-up, zoom-in, fade-right, etc. */
    </style>
</head>
<body>

    <nav class="navbar navbar-expand-lg sticky-top">
        <div class="container">
            <a class="navbar-brand" href="index.html">
                 <img src="img/logo.png" alt="Naruto Logo">
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="index.html">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="characters.html">人物介绍</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="story.html">剧情介绍</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="fights.html">经典打斗</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <section class="hero-section">
        <div class="hero-content" data-aos="fade-up">
            <h1>体验忍者的世界！</h1>
            <p class="lead">探索火影忍者游戏的无尽魅力</p>
            <a href="characters.html" class="btn btn-primary btn-lg">探索人物</a>
        </div>
    </section>

    <section class="section" data-aos="fade-up">
        <div class="container">
            <h2 class="section-title">关于火影忍者游戏</h2>
            <p class="text-center fs-5 mb-5">
                火影忍者系列游戏将岸本齐史的经典动漫世界带入了交互式体验。从热血沸腾的格斗到深入的角色扮演，这些游戏忠实地还原了忍者世界的每一个细节、每一个羁绊、每一场史诗般的战斗。无论你是想重温鸣人成长的故事，还是想操控你最爱的忍者进行对决，火影忍者游戏都能满足你的期待。
            </p>

            <div class="row text-center">
                <div class="col-md-4" data-aos="zoom-in" data-aos-delay="100">
                    <div class="feature-box">
                        <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-book mb-3" viewBox="0 0 16 16">
                            <path d="M1 2.828c.885-.37 2.154-.769 3.388-.893 1.33-.134 2.458.063 3.112.752v9.746c-.935-.53-2.12-.603-3.213-.493-1.18.12-.237.78-.237.78-.035 1.09-.141 1.58-1.054 2.114-.838.405-2.39.87-3.684 1.05.7-.323 1.809-.547 2.133-1.1.32-.55.42-.96.647-1.112a3.12 3.12 0 0 1 .503-.33c1.12-.493 1.885-.834 2.539-1.024v-.425c.165.047.331.095.499.143.649.18 1.664.515 2.842.815l.77-.25zm2.082 9.73c-.232-.066-1.046-.27-.91-.27 1.07 0 1.134.662 1.134.662-.083.1-.2.16-.305.2-.12.04-.265.05-.395.05zm5.858-.242c-.405-.033-1.072-.212-1.683-.381l-.77.25-.167.059c1.443.355 2.494.084 3.112-.752V2.9c-.664-.689-1.782-.886-3.112-.752-1.234.124-2.503.523-3.388.893v9.746c.935-.53 2.12-.603 3.213-.493 1.18.12.237.78.237.78.083.1.2.16.305.2.12.04.265.05.395.05.704.082 1.448.138 2.3.141z"/>
                        </svg>
                        <h4>忠实还原剧情</h4>
                        <p>从最初的下忍考验到最后的忍界大战，完整体验鸣人的成长历程。</p>
                    </div>
                </div>
                <div class="col-md-4" data-aos="zoom-in" data-aos-delay="200">
                    <div class="feature-box">
                         <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-lightning-charge mb-3" viewBox="0 0 16 16">
                             <path d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09zM4.157 8.5H7a.5.5 0 0 1 .354.146L9.644 11.35 11.906 6.5H8a.5.5 0 0 1-.354-.146L4.157 8.5z"/>
                         </svg>
                        <h4>热血格斗体验</h4>
                        <p>华丽的忍术、刺激的对决，感受身临其境的忍者战斗快感。</p>
                    </div>
                </div>
                <div class="col-md-4" data-aos="zoom-in" data-aos-delay="300">
                    <div class="feature-box">
                        <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-people mb-3" viewBox="0 0 16 16">
                             <path d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.246.154-.9-.414-1.433C6.42 10.45 6.956 10 8 10s1.58.45 1.982 1.563c-.568.533-.414 1.187-.414 1.433-.001.016.01.037.017.049a.271.271 0 0 1-.014.058l-.002.002-.001.006-.004.015-.018.031c-.14.208-.29.59-.29.988l.002.013a.17.17 0 0 0 .016.019 2 2 0 0 1-.248.636zM9.282 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0"/>
                             <path d="M13.968 2.672a.25.25 0 0 0-.193-.541C12.3 1.414 10.17 1 8 1c-2.17 0-4.3.414-5.775 1.131a.25.25 0 0 0-.193.541C.878 3.023 0 3.922 0 5v1c0 1.1.9 2 2 2h1v9a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8h1c1.1 0 2-.9 2-2V5c0-1.078-.878-1.977-2.032-2.328M11.614 4.599a.5.5 0 0 0-.91-.132A2.49 2.49 0 0 1 8 3.5c-.966 0-1.8.424-2.304 1.017a.5.5 0 0 0-.91.132A3.5 3.5 0 0 0 1 5.02V6c0 .55.45 1 1 1h4.916q.802-.11 1.666 0H14c.55 0 1-.45 1-1V5.02a3.5 3.5 0 0 0-3.386-4.421ZM12.5 8h-9V4.5a1.5 1.5 0 0 1 1.5-1.5h5a1.5 1.5 0 0 1 1.5 1.5z"/>
                         </svg>
                        <h4>海量角色登场</h4>
                        <p>解锁并操控你喜爱的忍者，每个角色都有独特的忍术和战斗风格。</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="section bg-dark" data-aos="fade-up">
        <div class="container">
            <h2 class="section-title">精选游戏</h2>
            <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
                <div class="col" data-aos="zoom-in-up">
                    <div class="card h-100">
                        <img src="img/111.webp" class="card-img-top" alt="火影忍者 疾风传：终极风暴4">
                        <div class="card-body">
                            <h5 class="card-title">火影忍者 疾风传：终极风暴4</h5>
                            <p class="card-text">体验第四次忍界大战的史诗级终章，拥有系列最多的角色和觉醒模式。</p>
                            <a href="#" class="btn btn-primary">了解更多</a>
                        </div>
                    </div>
                </div>
                <div class="col" data-aos="zoom-in-up" data-aos-delay="100">
                    <div class="card h-100">
                        <img src="img/2222.webp" class="card-img-top" alt="火影忍者OL">
                        <div class="card-body">
                            <h5 class="card-title">火影忍者OL</h5>
                            <p class="card-text">官方正版授权的页游/手游，以回合制RPG形式重温经典剧情，组建你的专属小队。</p>
                            <a href="#" class="btn btn-primary">了解更多</a>
                        </div>
                    </div>
                </div>
                <div class="col" data-aos="zoom-in-up" data-aos-delay="200">
                    <div class="card h-100">
                         <img src="img/333.webp" class="card-img-top" alt="NARUTO TO BORUTO: 新世代忍者">
                        <div class="card-body">
                            <h5 class="card-title">NARUTO TO BORUTO: 新世代忍者</h5>
                            <p class="card-text">在线团队格斗游戏，扮演原创角色或经典忍者，在竞技场中进行4v4对战。</p>
                            <a href="#" class="btn btn-primary">了解更多</a>
                        </div>
                    </div>
                </div>
                 </div>
        </div>
    </section>

     <section class="section" data-aos="fade-up">
        <div class="container">
            <h2 class="section-title">最新动态</h2>
            <div class="row justify-content-center">
                <div class="col-lg-8">
                     <div class="list-group">
                         <div class="list-group-item" data-aos="fade-right">
                             <a href="#">
                                 <h6>[新闻] 《火影忍者 终极风暴羁绊》发售！</h6>
                                 <p class="mb-1">系列最新作现已登陆各大平台，带来全新原创故事线。</p>
                                 <small class="text-muted">2023-11-17</small>
                             </a>
                         </div>
                         <div class="list-group-item" data-aos="fade-right" data-aos-delay="100">
                             <a href="#">
                                 <h6>[公告] 《火影忍者OL手游》新忍者“漩涡鸣人 [九尾查克拉模式]”上线</h6>
                                 <p class="mb-1">限定忍者登场，参与活动获取！</p>
                                 <small class="text-muted">2023-11-15</small>
                             </a>
                         </div>
                          <div class="list-group-item" data-aos="fade-right" data-aos-delay="200">
                             <a href="#">
                                 <h6>[攻略] 《终极风暴4》佐助（永恒万花筒）连招技巧分享</h6>
                                 <p class="mb-1">高伤害连招教学，助你轻松取胜。</p>
                                 <small class="text-muted">2023-11-10</small>
                             </a>
                         </div>
                         </div>
                </div>
            </div>
        </div>
    </section>


    <footer>
        <div class="container">
            <p>&copy; 2023 火影忍者游戏世界. 所有权利保留.</p>
            <div>
                 <a href="characters.html">人物介绍</a> |
                 <a href="story.html">剧情介绍</a> |
                 <a href="fights.html">经典打斗</a>
            </div>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script>
      AOS.init({
          duration: 1000, // animation duration
          once: true // whether animation should happen only once - while scrolling down
      });
    </script>
</body>
</html>