html动漫网站源代码可直接用吗？-网页设计-锦华智联科技

我将为你提供详细的代码,包括 HTML结构、CSS样式 和 JavaScript交互，并对关键部分进行解释，方便你理解和修改。

（图片来源网络，侵删）

最终效果预览

这个设计将呈现一个响应式的、深色主题的动漫网站界面，具有以下特点：

响应式设计：在电脑、平板和手机上都能良好显示。
深色主题：符合动漫网站的流行审美，减少视觉疲劳。
功能完整：包含轮播图、分类筛选、悬停效果等。
代码清晰：代码结构清晰，易于扩展和维护。

第1步：HTML 结构 (`index.html`)

这是网站的骨架,定义了所有的内容区域。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">动漫狂热 - 你的专属动漫世界</title>
    <link rel="stylesheet" href="style.css">
    <!-- 引入字体图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <!-- 头部导航栏 -->
    <header>
        <div class="container">
            <a href="#" class="logo">动漫狂热</a>
            <nav class="navbar">
                <a href="#" class="active">首页</a>
                <a href="#">新番</a>
                <a href="#">经典</a>
                <a href="#">电影</a>
                <div class="search-box">
                    <input type="text" placeholder="搜索动漫...">
                    <button type="submit"><i class="fas fa-search"></i></button>
                </div>
            </nav>
        </div>
    </header>
    <main>
        <!-- 轮播图部分 -->
        <section class="hero-slider">
            <div class="slider-container">
                <div class="slide">
                    <img src="https://via.placeholder.com/1920x600/222222/FFFFFF?text=轮播图1" alt="Featured Anime 1">
                    <div class="slide-content">
                        <h2>进击的巨人 最终季</h2>
                        <p>人类最后的希望，就在这里。</p>
                        <a href="#" class="btn">立即观看</a>
                    </div>
                </div>
                <!-- 可以添加更多轮播项 -->
                <!-- <div class="slide">...</div> -->
            </div>
            <button class="slider-btn prev"><i class="fas fa-chevron-left"></i></button>
            <button class="slider-btn next"><i class="fas fa-chevron-right"></i></button>
        </section>
        <div class="container">
            <!-- 分类标签 -->
            <section class="category-tags">
                <button class="tag-btn active" data-category="all">全部</button>
                <button class="tag-btn" data-category="action">动作</button>
                <button class="tag-btn" data-category="adventure">冒险</button>
                <button class="tag-btn" data-category="comedy">喜剧</button>
                <button class="tag-btn" data-category="drama">剧情</button>
                <button class="tag-btn" data-category="fantasy">奇幻</button>
            </section>
            <!-- 动漫卡片网格 -->
            <section class="anime-grid" id="animeGrid">
                <!-- 动漫卡片 1 -->
                <div class="anime-card" data-category="action adventure">
                    <div class="card-img">
                        <img src="https://via.placeholder.com/300/450/222222?text=鬼灭之刃" alt="鬼灭之刃">
                        <span class="episode-count">全26话</span>
                    </div>
                    <div class="card-info">
                        <h3>鬼灭之刃</h3>
                        <div class="rating">
                            <i class="fas fa-star"></i>
                            <span>9.0</span>
                        </div>
                    </div>
                </div>
                <!-- 动漫卡片 2 -->
                <div class="anime-card" data-category="action fantasy">
                    <div class="card-img">
                        <img src="https://via.placeholder.com/300/450/222222?text=咒术回战" alt="咒术回战">
                        <span class="episode-count">全24话</span>
                    </div>
                    <div class="card-info">
                        <h3>咒术回战</h3>
                        <div class="rating">
                            <i class="fas fa-star"></i>
                            <span>8.7</span>
                        </div>
                    </div>
                </div>
                <!-- 动漫卡片 3 -->
                <div class="anime-card" data-category="comedy drama">
                    <div class="card-img">
                        <img src="https://via.placeholder.com/300/450/222222?text=孤独摇滚" alt="孤独摇滚">
                        <span class="episode-count">全12话</span>
                    </div>
                    <div class="card-info">
                        <h3>孤独摇滚</h3>
                        <div class="rating">
                            <i class="fas fa-star"></i>
                            <span>8.9</span>
                        </div>
                    </div>
                </div>
                <!-- 动漫卡片 4 -->
                <div class="anime-card" data-category="adventure fantasy">
                    <div class="card-img">
                        <img src="https://via.placeholder.com/300/450/222222?text=无职转生" alt="无职转生">
                        <span class="episode-count">更新中</span>
                    </div>
                    <div class="card-info">
                        <h3>无职转生 ~到了异世界就拿出真本事~</h3>
                        <div class="rating">
                            <i class="fas fa-star"></i>
                            <span>9.2</span>
                        </div>
                    </div>
                </div>
                <!-- 动漫卡片 5 -->
                <div class="anime-card" data-category="action adventure">
                    <div class="card-img">
                        <img src="https://via.placeholder.com/300/450/222222?text=海贼王" alt="海贼王">
                        <span class="episode-count">超1000话</span>
                    </div>
                    <div class="card-info">
                        <h3>海贼王</h3>
                        <div class="rating">
                            <i class="fas fa-star"></i>
                            <span>9.5</span>
                        </div>
                    </div>
                </div>
                <!-- 动漫卡片 6 -->
                <div class="anime-card" data-category="drama fantasy">
                    <div class="card-img">
                        <img src="https://via.placeholder.com/300/450/222222?text=来自深渊" alt="来自深渊">
                        <span class="episode-count">全13话</span>
                    </div>
                    <div class="card-info">
                        <h3>来自深渊</h3>
                        <div class="rating">
                            <i class="fas fa-star"></i>
                            <span>9.1</span>
                        </div>
                    </div>
                </div>
                 <!-- 动漫卡片 7 -->
                <div class="anime-card" data-category="comedy">
                    <div class="card-img">
                        <img src="https://via.placeholder.com/300/450/222222?text=辉夜大小姐" alt="辉夜大小姐">
                        <span class="episode-count">全37话</span>
                    </div>
                    <div class="card-info">
                        <h3>辉夜大小姐想让我告白</h3>
                        <div class="rating">
                            <i class="fas fa-star"></i>
                            <span>8.8</span>
                        </div>
                    </div>
                </div>
                 <!-- 动漫卡片 8 -->
                <div class="anime-card" data-category="action">
                    <div class="card-img">
                        <img src="https://via.placeholder.com/300/450/222222?text=一拳超人" alt="一拳超人">
                        <span class="episode-count">全24话</span>
                    </div>
                    <div class="card-info">
                        <h3>一拳超人</h3>
                        <div class="rating">
                            <i class="fas fa-star"></i>
                            <span>9.0</span>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </main>
    <!-- 页脚 -->
    <footer>
        <div class="container">
            <p>&copy; 2025 动漫狂热. All rights reserved. | 本网站仅供学习交流使用</p>
        </div>
    </footer>
    <script src="script.js"></script>
</body>
</html>

第2步：CSS 样式 (`style.css`)

这是网站的“皮肤”，负责美化界面，定义颜色、布局、字体等。

/* --- 全局样式和变量 --- */
:root {
    --primary-color: #e50914; /* Netflix风格的红 */
    --secondary-color: #141414;
    --text-color: #ffffff;
    --text-secondary: #b3b3b3;
    --card-bg: #1f1f1f;
    --hover-bg: #2a2a2a;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Arial', sans-serif;
}
body {
    background-color: var(--secondary-color);
    color: var(--text-color);
    line-height: 1.6;
}
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
a {
    text-decoration: none;
    color: var(--text-color);
}
img {
    max-width: 100%;
    display: block;
}
/* --- 头部导航栏 --- */
header {
    background-color: rgba(20, 20, 20, 0.9);
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: blur(10px);
}
header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo {
    font-size: 24px;
    font-weight: bold;
    color: var(--primary-color);
}
.navbar {
    display: flex;
    align-items: center;
    gap: 25px;
}
.navbar a {
    color: var(--text-secondary);
    transition: color 0.3s ease;
}
.navbar a:hover, .navbar a.active {
    color: var(--text-color);
}
.search-box {
    display: flex;
    align-items: center;
    background-color: var(--card-bg);
    border-radius: 25px;
    padding: 5px 15px;
}
.search-box input {
    background: none;
    border: none;
    color: var(--text-color);
    outline: none;
    padding: 5px;
    width: 150px;
}
.search-box button {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
}
/* --- 轮播图部分 --- */
.hero-slider {
    position: relative;
    height: 70vh;
    overflow: hidden;
    margin-bottom: 40px;
}
.slider-container {
    display: flex;
    transition: transform 0.5s ease-in-out;
    height: 100%;
}
.slide {
    min-width: 100%;
    position: relative;
}
.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.slide-content {
    position: absolute;
    bottom: 50px;
    left: 50px;
    max-width: 600px;
}
.slide-content h2 {
    font-size: 48px;
    margin-bottom: 10px;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.8);
}
.slide-content p {
    font-size: 20px;
    margin-bottom: 20px;
    color: var(--text-secondary);
    text-shadow: 1px 1px 4px rgba(0,0,0,0.8);
}
.btn {
    display: inline-block;
    background-color: var(--primary-color);
    color: white;
    padding: 12px 25px;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}
.btn:hover {
    background-color: #f40612;
}
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0,0,0,0.5);
    color: white;
    border: none;
    font-size: 24px;
    padding: 15px;
    cursor: pointer;
    z-index: 10;
    transition: background-color 0.3s ease;
}
.slider-btn:hover {
    background-color: rgba(0,0,0,0.8);
}
.prev { left: 20px; }
.next { right: 20px; }
/* --- 分类标签 --- */
.category-tags {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}
.tag-btn {
    background-color: var(--card-bg);
    border: 1px solid #444;
    color: var(--text-secondary);
    padding: 8px 20px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.tag-btn:hover, .tag-btn.active {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}
/* --- 动漫卡片网格 --- */
.anime-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 25px;
    margin-bottom: 50px;
}
.anime-card {
    background-color: var(--card-bg);
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}
.anime-card:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}
.card-img {
    position: relative;
    padding-top: 150%; /* 2:3 宽高比 */
    overflow: hidden;
}
.card-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.anime-card:hover .card-img img {
    transform: scale(1.1);
}
.episode-count {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgba(0,0,0,0.8);
    color: white;
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 12px;
}
.card-info {
    padding: 15px;
}
.card-info h3 {
    font-size: 16px;
    margin-bottom: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rating {
    color: var(--text-secondary);
    font-size: 14px;
}
.rating i {
    color: #f5c518;
}
/* --- 页脚 --- */
footer {
    text-align: center;
    padding: 20px;
    background-color: #0a0a0a;
    color: var(--text-secondary);
    margin-top: 50px;
}
/* --- 响应式设计 --- */
@media (max-width: 768px) {
    .navbar .search-box {
        display: none; /* 在小屏幕上隐藏搜索框 */
    }
    .anime-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 15px;
    }
    .slide-content {
        left: 20px;
    }
    .slide-content h2 {
        font-size: 32px;
    }
    .slide-content p {
        font-size: 16px;
    }
}

第3步：JavaScript 交互 (`script.js`)

这是网站的“大脑”，负责实现动态功能，如轮播图切换和分类筛选。

（图片来源网络，侵删）

document.addEventListener('DOMContentLoaded', () => {
    // --- 轮播图功能 ---
    const sliderContainer = document.querySelector('.slider-container');
    const slides = document.querySelectorAll('.slide');
    const prevBtn = document.querySelector('.prev');
    const nextBtn = document.querySelector('.next');
    let currentIndex = 0;
    const totalSlides = slides.length;
    function goToSlide(index) {
        // 如果超出范围，循环播放
        if (index >= totalSlides) currentIndex = 0;
        if (index < 0) currentIndex = totalSlides - 1;
        // 计算偏移量
        const offset = -currentIndex * 100;
        sliderContainer.style.transform = `translateX(${offset}%)`;
    }
    function nextSlide() {
        currentIndex++;
        goToSlide(currentIndex);
    }
    function prevSlide() {
        currentIndex--;
        goToSlide(currentIndex);
    }
    nextBtn.addEventListener('click', nextSlide);
    prevBtn.addEventListener('click', prevSlide);
    // 自动播放轮播图 (可选)
    // setInterval(nextSlide, 5000); // 每5秒切换一次
    // --- 分类筛选功能 ---
    const tagButtons = document.querySelectorAll('.tag-btn');
    const animeCards = document.querySelectorAll('.anime-card');
    tagButtons.forEach(button => {
        button.addEventListener('click', () => {
            // 1. 移除所有按钮的 'active' 类
            tagButtons.forEach(btn => btn.classList.remove('active'));
            // 2. 给当前点击的按钮添加 'active' 类
            button.classList.add('active');
            const category = button.getAttribute('data-category');
            animeCards.forEach(card => {
                if (category === 'all') {
                    // 如果选择"全部"，显示所有卡片
                    card.style.display = 'block';
                } else {
                    // 检查卡片的 data-category 属性是否包含当前选中的分类
                    // 使用 includes() 可以匹配多个分类，如 "action adventure"
                    if (card.getAttribute('data-category').includes(category)) {
                        card.style.display = 'block';
                    } else {
                        card.style.display = 'none';
                    }
                }
            });
        });
    });
});

如何使用

创建文件：在你的项目文件夹中创建三个文件：index.html、style.css 和 script.js。
复制代码：将上面提供的代码分别粘贴到对应的文件中。
放置图片：为你的动漫图片创建一个 images 文件夹，并将图片路径修改为指向你的图片，将 https://via.placeholder.com/... 替换为 images/your-anime-image.jpg。
打开网页：用浏览器打开 index.html 文件，你就能看到这个动漫网站了。

如何扩展和修改

添加更多动漫：在 index.html 的 anime-grid 部分复制 .anime-card 的代码块，并修改其中的图片、标题和评分信息。
修改颜色主题：在 style.css 的 root 部分修改变量值，可以轻松改变整个网站的颜色。
增加轮播图：在 index.html 的 slider-container 中复制 .slide 的代码块，并添加相应的轮播控制逻辑（如果需要）。
添加新功能：你可以基于这个框架，添加用户登录、动漫详情页、评论系统等更复杂的功能。

（图片来源网络，侵删）

html动漫网站源代码可直接用吗？

最终效果预览

第1步：HTML 结构 (index.html)

第2步：CSS 样式 (style.css)

第3步：JavaScript 交互 (script.js)

如何使用

如何扩展和修改

第1步：HTML 结构 (`index.html`)

第2步：CSS 样式 (`style.css`)

第3步：JavaScript 交互 (`script.js`)