gsap+svg实现创意手机商品亮点介绍幻灯片交互放大图文效果代码-html代码-BFW代码库

gsap+svg实现创意手机商品亮点介绍幻灯片交互放大图文效果代码

代码语言：html

所属分类：幻灯片

代码描述：gsap+svg实现创意手机商品亮点介绍幻灯片交互放大图文效果代码

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

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

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

      <meta
      name="viewport"
      content="width=device-width, initial-scale=1, user-scalable=0, maximum-scale=1.0"
    />
  
  
  
<style>
@import url('https://unpkg.com/normalize.css') layer(normalize);

@layer normalize, base, demo, images, controls, debug, intro;

@layer intro {
  details:nth-of-type(3) {
    -webkit-animation:
      slide .75s 0.5s both var(--bounce),
      start .6s 1.05s var(--bounce) both,
      color-in .6s 1.25s var(--bounce) both;
            animation:
      slide .75s 0.5s both var(--bounce),
      start .6s 1.05s var(--bounce) both,
      color-in .6s 1.25s var(--bounce) both;
  }
  details:nth-of-type(1),
  details:nth-of-type(2) {
    --from-y: 75%;
  }
  details:nth-of-type(4),
  details:nth-of-type(5) {
    --from-y: -75%;
  }
  details:nth-of-type(2),
  details:nth-of-type(4) {
    --index: 1;
  }
  details:nth-of-type(1),
  details:nth-of-type(5) {
    --index: 2;
  }
  details:nth-of-type(1),
  details:nth-of-type(2),
  details:nth-of-type(4),
  details:nth-of-type(5) {
    --from-scale: 1;
    --from-x: 35%;
    -webkit-animation:
      start .6s calc(1.05s + (var(--index) * 0.08s)) var(--bounce) both,
      fade-in .6s calc(1.05s + (var(--index) * 0.08s)) var(--bounce) both,
      slide .6s calc(1.05s + (var(--index) * 0.08s)) var(--bounce) both,
      color-in .6s calc(1.25s + (var(--index) * 0.08s)) var(--bounce) both;
            animation:
      start .6s calc(1.05s + (var(--index) * 0.08s)) var(--bounce) both,
      fade-in .6s calc(1.05s + (var(--index) * 0.08s)) var(--bounce) both,
      slide .6s calc(1.05s + (var(--index) * 0.08s)) var(--bounce) both,
      color-in .6s calc(1.25s + (var(--index) * 0.08s)) var(--bounce) both;
  }
  @-webkit-keyframes slide {
    0% {
      scale: var(--from-scale, 0);
      translate: var(--from-x, -200px) var(--from-y, 0);
    }
  }
  @keyframes slide {
    0% {
      scale: var(--from-scale, 0);
      translate: var(--from-x, -200px) var(--from-y, 0);
    }
  }
  @-webkit-keyframes start {
    0% {
      width: var(--sizing);
    }
  }
  @keyframes start {
    0% {
      width: var(--sizing);
    }
  }
  @-webkit-keyframes color-in {
    0% {
      color: #0000;
    }
  }
  @keyframes color-in {
    0% {
      color: #0000;
    }
  }
  @-webkit-keyframes fade-in {
    0% {
      opacity: 0;
    }
  }
  @keyframes fade-in {
    0% {
      opacity: 0;
    }
  }
}
@layer debug {
  /* this is for the debug... */
  [data-debug='true'] {
    section:not(:has([open])) .column:last-of-type div:first-of-type,
    section:has(details:nth-of-type(1)[open]) .column:last-of-type div:nth-of-type(2),
    section:has(details:nth-of-type(2)[open]) .column:last-of-type div:nth-of-type(3),
    section:has(details:nth-of-type(3)[open]) .column:last-of-type div:nth-of-type(4),
   .........完整代码请登录后点击上方下载按钮下载查看