gsap+flip实现图文幻灯片点击标签切换代码-html代码-BFW代码库

gsap+flip实现图文幻灯片点击标签切换代码

代码语言：html

所属分类：幻灯片

代码描述：gsap+flip实现图文幻灯片点击标签切换代码

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

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

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

<style>
:root {
  --color-light: var(--color-neutral-200);
  --color-dark: var(--color-neutral-800);
  --color-primary: #ff4c24;
  --color-neutral-100: #ffffff;
  --color-neutral-200: #efeeec;
  --color-neutral-300: #e3e1de;
  --color-neutral-400: #cbc8c5;
  --color-neutral-500: #818180;
  --color-neutral-600: #2c2c2c;
  --color-neutral-700: #1f1f1f;
  --color-neutral-800: #131313;
  --color-neutral-900: #000000;
  --color-white: var(--color-neutral-100);
  --color-black: var(--color-neutral-900);
  --color-error: var(--color-primary);
  --color-success: #0ba954; 
  --cubic-default: cubic-bezier(0.65, 0.05, 0, 1);
  --duration-default: 0.735s;
  --animation-default: var(--duration-default) var(--cubic-default);
  --gap: 2em;
  --section-padding: calc(3.5em + (var(--gap) * 2));
  --container-padding: 2em;
  --header-height: calc(1.5em + (var(--gap) * 2));
  --footer-height: calc(2.785em + (var(--gap) * 2));
}

/* Tablet */
@media screen and (max-width: 991px) {
  :root {
    --container-padding: 1.5em;
  }
}

/* Mobile Landscape */
@media screen and (max-width: 767px) {
  :root {
    --container-padding: 1em;
  }
}

/* Mobile Portrait */
@media screen and (max-width: 479px) {
  :root {}
}

/* ------------------------- Scaling System by Osmo [https://osmo.supply/] -------------------------  */

/* Desktop */
:root {
  --size-unit: 16; /* body font-size in design - no px */
  --size-container-ideal: 1440; /* screen-size in design - no px */
  --size-container-min: 992px;
  --size-container-max: 1920px;
  --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));
  --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));
}

/* Tablet */
@media screen and (max-width: 991px) {
  :root {
    --size-container-ideal: 834; /* screen-size in design - no px */
    --size-container-min: 768px;
    --size-container-max: 991px;
  }
}

/* Mobile Landscape */
@media screen and (max-width: 767px) {
  :root {
    --size-container-ideal: 390; /* screen-size in design - no px */
    --size-container-min: 480px;
    --size-container-max: 767px;
  }
}

/* Mobile Portrait */
@media screen and (max-width: 479px) {
  :root {
    --size-container-ideal: 390; /* screen-size in design - no px */
    --size-container-min: 320px;
    --size-container-max: 479px;
  }
}


/* ------------------------- Hide Scrollbar -------------------------------------------------- */

body ::-webkit-scrollbar,
body::-webkit-scrollbar {display: none;} /* Chrome, Safari, Opera */
body {-ms-overflow-style: none;} /* IE & Edge */
h.........完整代码请登录后点击上方下载按钮下载查看