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

代码语言：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 */
html {scrollbar-width: none;} /* Firefox */

/* ------------------------- Reset -------------------------------------------------- */

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  scroll-behavior: initial;
}

html,
body {
  -webkit-font-smoothing: antialiased;
}

svg {
  max-width: none;
  height: auto;
  box-sizing: border-box;
  vertical-align: middle;
}

a {
  color: inherit;
}

/* Selection */
::selection {
  background-color: var(--color-primary);
  color: var(--color-dark);
  text-shadow: none;
}

::-moz-selection {
  background-color: var(--color-primary);
  color: var(--color-dark);
  text-shadow: none;
}
body {
  background-color: var(--color-black);
  color: var(--color-light);
  font-size: var(--size-font);
  font-family: arial, sans-serif;
}

.cloneable {
  padding: var(--container-padding);
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  display: flex;
  position: relative;
  font-size: 1.1vw;
}

.tab-container {
  grid-column-gap: 3em;
  grid-row-gap: 3em;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  min-height: 100%;
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 2.5em;
  display: flex;
}

.tab-layout-container {
  width: 100%;
  max-width: 36em;
  height: 100%;
  margin-left: auto;
  margin-right: 0;
  padding-top: 1em;
  padding-bottom: 2em;
}

.tab-container-bottom {
  grid-column-gap: 2em;
  grid-row-gap: 2em;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.tab-container-top {
  grid-column-gap: 2em;
  grid-row-gap: 2em;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.tab-layout-col {
  width: 50%;
}

.tab-content-wrap {
  width: 100%;
  min-width: 24em;
  position: relative;
}

.content-button__bg {
  z-index: -1;
  background-color: #efeeec;
  border-radius: .25em;
  position: absolute;
  inset: 0%;
}

.content-p {
  margin: 0;
  font-size: 1.25em;
  line-height: 1.4;
}

.tab-button__bg {
  z-index: 0;
  background-color: #efeeec0f;
  border: 1px solid #efeeec14;
  border-radius: .25em;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.tab-content-item {
  z-index: 1;
  grid-column-gap: 1.25em;
  grid-row-gap: 1.25em;
  visibility: hidden;
  flex-flow: column;
  display: flex;
  position: absolute;
  inset: auto 0% 0%;
}

.tab-content-item.active {
  visibility: visible;
}

.tab-layout {
  z-index: 1;
  grid-row-gap: 3em;
  flex-flow: wrap;
  width: 100%;
  min-height: 37em;
  display: flex;
  position: relative;
}.........完整代码请登录后点击上方下载按钮下载查看