答案之书

项目概述

一个互动式网页应用，为用户提供一种有趣的方式来获取随机答案。用户可以在移动端输入问题，通过翻书动画获取神秘答案，体验类似于实体答案之书的交互过程。

核心特点

沉浸式翻书动画效果
响应式设计，支持桌面和移动设备
丰富的视觉效果和动画
纯前端实现，无需联网，所有数据本地处理
精美的视觉设计，营造节日氛围

技术实现

前端技术栈

HTML5：页面结构与语义化标签
CSS3：样式设计与动画效果
JavaScript：交互逻辑与动态效果

关键技术实现

1. 翻书动画实现

翻书动画是本项目的核心视觉效果，通过CSS 3D变换和过渡动画实现：

.book-container {
    list-style: none;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    perspective: 1200px;
    transition: 1.5s;
    position: relative;
}

.book-page {
    position: absolute;
    transform-origin: left;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 1px 4px 5px rgba(0, 0, 0, .2);
    background: transparent;
}

翻书状态通过添加/移除flipping类实现，每个书页有不同的旋转角度和过渡时间，营造层次感：

.book-container.flipping .book-page:nth-child(1) {
    transform: rotateY(-180deg);
    transition: 1.4s;
}

.book-container.flipping .book-page:nth-child(2) {
    transform: rotateY(-180deg);
    transition: 2.0s;
}

/* 其他书页的翻转动画设置... */

2. 响应式设计

采用响应式设计，通过媒体查询适配不同屏幕尺寸：

/* 横屏模式 */
@media (min-width: 584px) {
    .app-container {
        width: 100%;
        max-width: 100%;
        margin: 0;
        background: transparent;
        background-image: none;
        height: 100vh;
        overflow: hidden;
    }
    
    /* 桌面端使用 bg2 作为背景 */
    .app-container::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('bg2.png');
        background-repeat: repeat;
        background-size: cover;
        background-position: center;
        z-index: -1;
    }
    
    /* 其他桌面端样式调整... */
}

/* 移动设备适配 */
@media (max-width: 583px) {
    h1 {
        font-size: 1.6rem;
    }
    
    .magic-book {
        height: 390px;
        max-width: 260px;
    }
    
    /* 其他移动设备样式调整... */
}

3. 答案生成逻辑

答案生成采用随机选择机制，从预设的答案库中随机抽取：

// 答案列表
const answers = [
    "是的",
    "不是",
    "也许吧",
    "当然",
    // 更多答案...
];

// 获取答案函数
function getAnswer() {
    const question = questionInput.value.trim();
    
    if (!question) {
        shakeMagicBook();
        return;
    }
    
    // 禁用按钮并改变文本
    askBtn.disabled = true;
    askBtn.textContent = '翻页中...';
    
    // 加载答案
    const randomIndex = Math.floor(Math.random() * answers.length);
    const answer = answers[randomIndex];
    answerPageContent.textContent = answer;
    
    // 播放翻页动画
    bookContainer.classList.add('flipping');
    isFlipped = true;
    
    // 翻页完成后恢复按钮状态
    setTimeout(() => {
        askBtn.disabled = false;
        askBtn.textContent = '确定';
    }, 2500);
}

视觉设计与动画效果

1. 整体视觉风格

色彩方案：以金色、深蓝色为主色调，营造节日喜庆氛围
背景设计：使用节日主题背景图片，移动端与桌面端采用不同背景
字体选择：使用衬线字体，增强典雅感和节日氛围

2. 核心动画效果

翻书动画

多层书页的连续翻转动画
每个书页不同的旋转角度和过渡时间
翻页过程中的3D透视效果

标题动画

.title-image {
    margin-bottom: 15px;
    animation: titlePulse 3s ease-in-out infinite;
}

@keyframes titlePulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

背景浮动效果

@keyframes bgFloat {
    0%, 100% {
        opacity: 0.5;
        transform: translateY(0px);
    }
    50% {
        opacity: 1;
        transform: translateY(-20px);
    }
}

按钮交互效果

.ask-btn:active {
    transform: translateY(-1px);
    box-shadow: 0 5px 15px rgba(74, 144, 226, 0.3);
}

书本摇晃动画

当用户未输入问题直接点击时，书本会产生摇晃效果：

.shake {
    animation: shake 0.8s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes shake {
    10%, 90% {
        transform: translate3d(-2px, 0, 0);
    }
    20%, 80% {
        transform: translate3d(4px, 0, 0);
    }
    30%, 50%, 70% {
        transform: translate3d(-6px, 0, 0);
    }
    40%, 60% {
        transform: translate3d(6px, 0, 0);
    }
}

3. 页面布局

移动端布局：垂直流式布局，顶部标题，中间魔法书，底部问题输入和按钮
桌面端布局：居中显示魔法书，隐藏其他元素，专注于翻书体验

页面结构

主要页面组成

标题区域：展示应用名称和装饰元素
魔法书区域：核心交互元素，包含翻书动画
问题输入区域：用户输入问题的文本框
操作按钮区域：获取答案的按钮
页脚区域：提示信息和装饰元素

HTML结构

<div class="app-container">
    <div class="container">
        <div class="header">
            <img src="title.png" alt="新年答案之书" class="title-image">
        </div>

        <div class="main-content">
            <div class="book-section">
                <div class="magic-book" id="magic-book">
                    <ul class="book-container" id="book-container">
                        <!-- 封面 -->
                        <li class="book-page">
                            <div class="book-cover"></div>
                        </li>
                        <!-- 内页 -->
                        <li class="book-page">
                            <div class="book-inner-page">
                                <div class="inner-page-content">相信你的直觉</div>
                            </div>
                        </li>
                        <!-- 更多内页... -->
                        <!-- 答案页 -->
                        <li class="book-page">
                            <div class="answer-page">
                                <div class="answer-page-content" id="answer-page-content"></div>
                            </div>
                        </li>
                        <!-- 底页 -->
                        <li class="book-page">
                            <div class="book-cover"></div>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="content-right">
                <div class="question-section">
                    <input type="text" id="question-input" class="question-input" placeholder="输入问题，寻找新年的答案..." autocomplete="off">
                </div>

                <div class="btn-container">
                    <button class="ask-btn" id="ask-btn">获取答案</button>
                </div>

                <div class="footer">
                    <p>记住，答案的力量在于你如何理解它</p>
                </div>
            </div>
        </div>
    </div>
</div>

交互流程

移动端交互流程

输入问题：用户在文本框中输入关于新年的问题
获取答案：点击"获取答案"按钮
翻书动画：系统播放翻书动画，模拟真实翻书过程
显示答案：动画结束后，答案页显示随机生成的答案
确认返回：点击"确定"按钮，书本翻回封面状态，等待下一次提问

桌面端交互流程

直接点击：用户直接点击魔法书
翻书动画：系统播放翻书动画
显示答案：动画结束后，答案页显示随机生成的答案
再次点击：点击魔法书，翻回封面状态，等待下一次提问

响应式设计实现

移动端适配（< 584px）

垂直流式布局
固定大小的魔法书组件
优化的触摸交互
适合小屏幕的字体大小和间距

桌面端适配（≥ 584px）

居中显示魔法书
更大尺寸的魔法书组件
背景图片平铺效果
隐藏输入框和按钮，直接通过点击魔法书交互
优化的鼠标悬停和点击效果

项目结构

/
├── index.html          # 主页面
├── bg1.png             # 移动端背景图片
├── bg2.png             # 桌面端背景图片
├── cover.png           # 书本封面图片
├── inner.png           # 书本内页图片
├── title.png           # 标题图片
└── README.md           # 项目说明文档

关键功能模块

1. 魔法书组件

结构：多层书页的嵌套结构
样式：封面、内页、答案页的不同样式
动画：翻书动画的实现与控制

2. 答案生成模块

答案库：预设的答案列表
随机选择：从答案库中随机选择答案
显示逻辑：将答案显示在答案页上

3. 交互控制模块

事件监听：按钮点击、输入框回车、魔法书点击
状态管理：跟踪书本是否处于翻页状态
动画控制：触发和控制翻书动画

4. 响应式适配模块

设备检测：检测当前设备类型和屏幕尺寸
布局调整：根据设备类型调整布局结构
交互模式：根据设备类型切换交互模式

技术亮点

纯前端实现：无需后端服务器，所有功能在浏览器中完成
流畅的翻书动画：通过CSS 3D变换和过渡动画实现逼真的翻书效果
响应式设计：自适应不同设备屏幕尺寸，提供最佳体验
丰富的视觉效果：多种动画效果叠加，营造沉浸式体验
优化的性能：合理的CSS选择器和动画实现，确保流畅运行
用户友好的交互：直观的操作流程，清晰的视觉反馈

使用方法

Github部署：通过浏览器在线访问页面 https://weatheraintbad.github.io/AnswerBook/
直接打开：双击 index.html 文件，在浏览器中打开

开发说明

自定义答案

要修改或扩展答案库，只需编辑 index.html 文件中的 answers 数组：

const answers = [
    "是的",
    "不是",
    // 添加更多答案...
];

修改视觉元素

背景图片：替换 bg1.png（移动端）和 bg2.png（桌面端）
书本封面：替换 cover.png
书本内页：替换 inner.png
标题图片：替换 title.png

调整动画效果

修改CSS中的动画关键帧和过渡时间，可调整翻书速度、标题动画等效果。

浏览器兼容性

现代浏览器：Chrome、Firefox、Safari、Edge 等现代浏览器均支持
移动浏览器：iOS Safari、Android Chrome 等移动浏览器均支持
IE浏览器：不支持（不兼容CSS 3D变换和现代JavaScript特性）

Name		Name	Last commit message	Last commit date
Latest commit History 11 Commits
.github/workflows		.github/workflows
.idea		.idea
.nojekyll		.nojekyll
README.md		README.md
bg1.png		bg1.png
bg2.png		bg2.png
cover.png		cover.png
index.html		index.html
inner.png		inner.png
title.png		title.png

Folders and files

Latest commit

History

Repository files navigation

答案之书

项目概述

核心特点

技术实现

前端技术栈

关键技术实现

1. 翻书动画实现

2. 响应式设计

3. 答案生成逻辑

视觉设计与动画效果

1. 整体视觉风格

2. 核心动画效果

翻书动画

标题动画

背景浮动效果

按钮交互效果

书本摇晃动画

3. 页面布局

页面结构

主要页面组成

HTML结构

交互流程

移动端交互流程

桌面端交互流程

响应式设计实现

移动端适配（< 584px）

桌面端适配（≥ 584px）

项目结构

关键功能模块

1. 魔法书组件

2. 答案生成模块

3. 交互控制模块

4. 响应式适配模块

技术亮点

使用方法

开发说明

自定义答案

修改视觉元素

调整动画效果

浏览器兼容性

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages