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

代码语言：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),
    section:has(details:nth-of-type(4)[open]) .column:last-of-type div:nth-of-type(5),
    section:has(details:nth-of-type(5)[open]) .column:last-of-type div:nth-of-type(6) {
      outline: 4px dashed hotpink;
    }

    section:not(:has(details:nth-of-type(1)[open])) .column:last-of-type .img-block:nth-of-type(2),
  section:not(:has(details:nth-of-type(2)[open])) .column:last-of-type .img-block:nth-of-type(3) {
    .img-wrapper {
      opacity: 0.75;
    }
  }
    
    
    
    section:has([open]) .column:last-of-type div:first-of-type,
    section:not(:has(details:nth-of-type(1)[open])) .column:last-of-type div:nth-of-type(2),
    section:not(:has(details:nth-of-type(2)[open])) .column:last-of-type div:nth-of-type(3),
    section:not(:has(details:nth-of-type(3)[open])) .column:last-of-type div:nth-of-type(4),
    section:not(:has(details:nth-of-type(4)[open])) .column:last-of-type div:nth-of-type(5),
    section:not(:has(details:nth-of-type(5)[open])) .column:last-of-type div:nth-of-type(6) {
      outline: 4px dashed green;
    }
    section .column:first-of-type {
      background: repeating-linear-gradient(45deg, hsl(140 100% 50% / 0.5) 0 1px, #0000 1px 6px);
    }
    section .column:last-of-type {
      background: repeating-linear-gradient(45deg, hsl(280 90% 50% / 0.5) 0 1px, #0000 1px 6px);
    }
    section .column:last-of-type img {
      background: repeating-linear-gradient(-45deg, hsl(210 90% 50% / 0.35) 0 1px, #0000 1px 6px);
    }
    section .column:last-of-type div {
      outline: 2px dashed red;
    }
    summary {
      outline: 4px dashed red;
      outline-offset: -4px;
    }
    [open] summary {
      opacity: 0.5;
    }
    [open] .content {
      opacity: 0.25;
    }
    details {
      outline: 4px dashed blue;
      outline-offset: -4px;
    }
  }
}

@layer controls {


  [data-action] {

    display: grid;
    place-items: center;
    width: 36px;
    aspect-ratio: 1;
    border: 0;
    cursor: pointer;
    padding: 0;
    border-.........完整代码请登录后点击上方下载按钮下载查看