SOURCE

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>悬疑电影</title>
<style>
  body {
    margin: 0;
    height: 100vh;
    background: #0f0f0f;
    color: #d4d4d4;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Microsoft YaHei", sans-serif;
    user-select: none;
    overflow: hidden;
  }
  .box {
    width: 80%;
    max-width: 500px;
    text-align: left;
    padding: 30px;
    background: #1e1e1e;
    border-left: 4px solid #800000;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
  }
  h2 {
    color: #ff4d4d;
    margin-top: 0;
    border-bottom: 1px dashed #444;
    padding-bottom: 10px;
  }
  p {
    font-size: 16px;
    line-height: 1.8;
    min-height: 50px;
  }
  .hint {
    font-size: 12px;
    color: #666;
    text-align: right;
    margin-top: 20px;
  }
</style>
</head>
<body onclick="next()">

<div class="box">
  <h2 id="title">《雨夜谜案》</h2>
  <p id="content">男主是个失忆的侦探，雨夜醒来，身边有一具尸体...</p>
  <div class="hint" id="hint">点击屏幕，查看下一段线索 >></div>
</div>

<script>
  var steps = [
    { t: "线索一", c: "男主是个失忆的侦探，雨夜醒来，身边有一具尸体，手里拿着凶器。" },
    { t: "线索二", c: "他拼命回忆，发现自己一直在调查一家精神病院，而死者是院长。" },
    { t: "线索三", c: "随着线索深入，他发现所有证据都指向自己就是凶手。" },
    { t: "高潮", c: "电影最后十分钟反转！男主确实杀了人，但他不是侦探，而是精神病院的患者。" },
    { t: "真相", c: "整个追踪破案的过程，全是他发病时的幻觉。真正的凶手，是他那个看似温柔的心理医生。" },
    { t: "结局", c: "心理医生微笑着走进病房，给男主注射了镇静剂。男主闭上眼睛，镜头切黑。" },
    { t: "——", c: "好了，故事讲完了。你睡了整整四十分钟，错过的就是这些。" }
  ];
  
  var i = 0;
  var title = document.getElementById('title');
  var content = document.getElementById('content');

  function next() {
    if (i < steps.length - 1) {
      i++;
      content.style.opacity = 0;
      setTimeout(function() {
        title.innerText = steps[i].t;
        content.innerText = steps[i].c;
        content.style.opacity = 1;
      }, 200);
    }
  }
</script>
</body>
</html>