40岁重启人生学python系列28，利用deepseek快速生成一个MBTI的答题测试页面，可在线预览

最新推荐文章于 2025-05-05 23:34:14 发布

飞哥知行录

最新推荐文章于 2025-05-05 23:34:14 发布

阅读量842

点赞数 22

分类专栏： 40岁重启人生学Python系列文章标签： python 开发语言

本文链接：https://blog.csdn.net/felixzhang2019/article/details/146888400

版权

最近在看mbti的一些资料，但是，要是去做测试题的话，就会有收费的，我就想着能不能自己做一个，利用一个简单的页面，就能看到效果，就能测试，果然被我鼓捣出来了。

下面是我提出的功能和具体需求，有需要的可以拿走不谢！

功能

1.界面设计采用响应式布局，确保在不同设备上都能良好展示。

2.页面展示测试的标题，题目数量不少于10道，都是选择题的样式，一个页面展示一道题。

一、选项展示具体内容

3.选择选项后，自动进入下一题。最后一道选择题选择完毕后展示测试结果

4.每一种测试结果给出对应的趣味提示，要求提示包含emoji。结果页面持续展示满屏烟花效果。

5.测试结果页面展示再试一次的按钮，点击后清空历史选择重新开始答题。

6.顶部有进度条显示测试进度，展示进度文字（2/12），最终结果页不展示答题进度。

二、视觉设计要求：

1.采用马卡龙色系搭配低饱和度渐变背景

2.题目卡片固定大小，尺寸稍微大一些，增加微透明感和柔和阴影

3.选项按钮使用圆角设计，选中时有按压弹性动画

4.标题采用柔和的文字阴影效果，使用圆润的手写字体（Comic Sans MS + 华文彩云）

5.结果框使用双色渐变背景+大圆角设计，正文使用易读的非衬线字体（微软雅黑 + 幼圆）

6.烟花效果使用使用粉色、黄色、蓝色多层渐变色叠加

7.所有交互元素都带有缓动动画

8.采用拟物化设计语言（卡片、阴影等）

9.进度条宽度和弹窗保持一致，进度条颜色使用低饱和度颜色

10.进度文字展示在卡片内题目的顶部，居中展示，字号是13px

三、技术实现要求：

1.所有动画仅使用CSS transition实现

2.烟花效果通过简单的scale动画模拟

3.配色方案使用CSS变量统一管理

4.采用flex布局实现响应式

5.所有元素使用border-radius柔化边缘

四、附上具体的代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MBTI 测试</title>
    <style>
        :root {
            --bg-gradient-start: #f9d5e5;
            --bg-gradient-end: #d6eaf8;
            --card-bg: rgba(255, 255, 255, 0.8);
            --card-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            --button-bg: #f8bbd0;
            --button-hover: #f48fb1;
            --progress-default: #e0e0e0;
            --progress-completed: #ff9a9a;
            --result-bg-start: #ffd180;
            --result-bg-end: #81d4fa;
            --border-radius: 15px;
        }

        body {
            font-family: 'Comic Sans MS', '华文彩云', sans-serif;
            background: linear-gradient(to bottom, var(--bg-gradient-start), var(--bg-gradient-end));
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
        }

        h1 {
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
            margin-bottom: 20px;
        }

        #progress-bar {
            width: 80%;
            max-width: 600px;
            background-color: var(--progress-default);
            border-radius: var(--border-radius);
            margin-bottom: 20px;
            overflow: hidden;
        }