gsap+CSSRulePlugin实现时尚服装幻灯片展示动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：幻灯片

代码描述：gsap+CSSRulePlugin实现时尚服装幻灯片展示动画效果代码，点击左右切换可实现幻灯片滚动入场出场动画，自带进度条展示，无限循环。

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

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

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

  
  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap");

:root {
  font-size: 16px;
  font-family: "Oswald", sans-serif;
  --color-1: hsl(236, 74%, 55%);
  --color-2: hsl(0, 0%, 95%);
  --color-21: hsla(0, 0%, 95%, 0.5);
  --color-3: hsl(0, 0%, 5%);
  --color-4: hsl(0, 0%, 15%);
}

*,
::after,
::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

button,
input[type="submit"],
input[type="reset"] {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
}

body {
  background-color: var(--color-3);
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slider-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 40rem;
  margin: 1rem;
  border: 1px white solid;
  padding: 1rem;
  /* background-color: black; */
}

.title-of-slider {
  font-weight: 300;
  letter-spacing: 0.5rem;
  width: max-content;
  align-self: flex-start;
  color: var(--color-2);
  font-size: clamp(1rem, 4.5vw, 2rem);
  display: flex;
  flex-direction: column;
}

.title-of-slider > span {
  font-weight: 700;
}

#image-container {
  display: flex;
  gap: 0.5rem;
  /* background-color: red; */
  width: 100%;
  padding: 0.5rem 0;
  overflow: hidden;
}

.model-images {
  flex: none;
  width: 30%;
  translate: calc(-100% - 0.5rem);
}

.button-container {
  display: grid;
  grid-template-columns: 2.5rem 2.5rem auto 2.5rem 2.5rem;
  column-gap: 0.1rem;
  width: 100%;
  gap: 0.5rem;
}

.button-container > button {
  position: relative;
  border: 0.1rem var(--color-2) solid;
  border-radius: 50%;
  width: 2.5rem;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

#left-arrow {
  grid-column: 1;
  grid-row: 1;
}

#right-arrow {
  grid-column: 2;
  grid-row: 1;
}

#right-arrow:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

#left-arrow:before {
  position: absolute;
  content: "";
  width: 100%;

  height: 100%;
  border-radius: 50%;
}

.button-container button > svg {
  width: 25%;
  height: auto;
}

#right-arrow svg {
  transform: rotate(180deg);
}

#progress-bar-container {
  position: relative;
  grid-column: 3 / 6;
  align-self: center;
  width: 90%;
  height: 0.2rem;
  justify-self: center;
  border-radius: 0.2rem;
  background-color: var(--color-21);
}

#progress-bar {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--color-2);
  transform-origin: left;
}

@media (max-width: 45em) {
  #left-arrow {
    grid-column: 1;
    grid-row: 1;
  }

  #right-arrow {
    grid-column: 5;
    grid-row: 1;
  }
  #progress-bar-container {
    position: relative;
    grid-column: 2 / 5;
    align-self: center;
    width: 90%;
    height: 0.2rem;
    justify-self: center;
    border-radius: 0.2rem;
    background-color: var(--color-21);
  }
}
</style>

  
</head>

  <body>
    <section class="slider-container">
        <h1 class="title-of-slider">SPRING / SUMMER <span class="bolden"> 2022 COLLECTION</span></h1>
        <div id="image-container">
            <img class="model-images" src="//repo.bfw.wiki/bfwrepo/image/5e0e93f4b010e.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_300,/quality,q_90" alt="shirt-modeler-1">
            <img class="model-images" src="//repo.bfw.wiki/bfwrepo/image/5e0e941197338.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_300,/quality,q_90" alt="shirt-modeler-2">
            <img class="model-images" src="//repo.bfw.wiki/bfwrepo/image/5e0e941197338.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_300,/quality,q_90" alt="shirt-modeler-3">
            <img class="model-images" src="//repo.bfw.wiki/bfwrepo/image/5e0e93f4b010e.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_300,/quality,q_90" alt="shirt-modeler-4">
        </div>
        <div class="button-container">
            <button class="direction-button" id="left-arrow"><svg fill="#fff" height="800px" width="800px" version="1.1"
                    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 330 330" xml:space="preserve">
                    <path id="XMLID_92_"
                        d="M111.213,165.004L250.607,25.607c5.858-5.858,5.858-15.355,0-21.213c-5.858-5.858-15.355-5.858-21.213,0.001
            	l-150,150..........完整代码请登录后点击上方下载按钮下载查看