gsap实现名人名言文字幻灯片自动播放代码-html代码-BFW代码库

gsap实现名人名言文字幻灯片自动播放代码

代码语言：html

所属分类：幻灯片

代码描述：gsap实现名人名言文字幻灯片自动播放代码，数据来源通过加载url的json文件来自动显示。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
<style>
/* =========================================
   TOKENS
========================================= */
:root {
  --qs-quote-size: clamp(1.6rem, 2vw + 1rem, 2.6rem);
  --qs-cite-size: clamp(.95rem, .4vw + .85rem, 1.05rem);
  --qs-btn-size: 1rem;
  --qs-min-h: clamp(160px, 28vh, 320px); /* responsive stable height */
  --qs-pad: clamp(1rem, 3vw, 2rem);
  --page-pad: clamp(0.75rem, 3.5vw, 2rem); /* responsive page padding */
}

/* =========================================
   THEMES
   - Default = neutral on white
   - Light Patriotic = solid red quote text
   - Dark Patriotic = dramatic gradient text
========================================= */
body:not([data-theme]),
body[data-theme=""],
body[data-theme="default"] {
  --qs-text: #222;
  --qs-muted: #666;
  --qs-accent-red: #777;
  --qs-accent-blue: #bbb;
  --qs-border: rgba(0, 0, 0, 0.1);
  --qs-border-soft: rgba(0, 0, 0, 0.05);
  --qs-btn-bg: #f5f5f5;
  --qs-btn-text: #222;
  --qs-btn-hover: #111;
  --qs-btn-hover-text: #fff;
  background: #fff;
  color: var(--qs-text);
}

body[data-theme="light-patriotic"] {
  --qs-text: #8b1d2a;         /* dark red text */
  --qs-muted: #4a4a4a;
  --qs-accent-red: #8b1d2a;   /* red accents */
  --qs-accent-blue: #023483;  /* deep navy accents */
  --qs-border: rgba(0,0,0,0.12);
  --qs-border-soft: rgba(0,0,0,0.08);
  --qs-btn-bg: #ffffff;
  --qs-btn-text: #023483;
  --qs-btn-hover: #023483;
  --qs-btn-hover-text: #ffffff;
  background: #ffffff;
  color: var(--qs-text);
}

body[data-theme="dark-patriotic"] {
  --qs-text: #f2f2f2;
  --qs-muted: #b9b9c2;
  --qs-accent-red: #ff4d4d;
  --qs-accent-blue: #3c7df0;
  --qs-border: rgba(255,255,255,0.18);
  --qs-border-soft: rgba(255,255,255,0.12);
  --qs-btn-bg: #1b1b2f;
  --qs-btn-text: #f2f2f2;
  --qs-btn-hover: #3c7df0;
  --qs-btn-hover-text: #ffffff;
  background: linear-gradient(180deg, #0a0a12 0%, #141428 60%, #1a1a2f 100%);
  color: var(--qs-text);
}

/* =========================================
   BASE LAYOUT
========================================= */
html, body { min-height: 100%; height: 100%; overflow-x: hidden; }

body {
  margin: 0;
  display: grid;
  place-items: center;
  font-family: Helvetica, serif;
  transition: background 400ms ea.........完整代码请登录后点击上方下载按钮下载查看