gsap实现5个卡片排列左右切换轮播动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：幻灯片

代码描述：gsap实现5个卡片排列左右切换轮播动画效果代码

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

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

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

  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
  
<style>
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;700&display=swap');

html, body {
  margin:0;
  padding:0;
  width:100%;
  height:100%;
}

body {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  background:#eee;
}

.cards-wrapper {
  width:100%;
  height:300px;
  max-width:1200px;
  overflow-x:hidden;
  position:relative;
}

.cards {
  position:absolute;
  top:15px;
  left:50%;
  transform:translateX(-110px);
  display:flex;
  flex-direction:row;
  width:1300px;
  justify-content:space-between;
}

.card {
  width:220px;
  height:260px;
  border-radius:14px;
  border:none;
  font-family: 'Open Sans', sans-serif;
  letter-spacing:0.5px;
  display:inline;
  cursor:pointer;
  box-sizing:border-box;
  color:#000;
}

.card h2 {
  font-size:2.6em;
  font-weight:300;
  margin-top:1.25em;
}

.card h4 {
  text-transform:uppercase;
}

.icon svg {
  overflow:visible;
  stroke-width:1.25em;
  width:3em;
}

.cards-wrapper::after {
  content:'';
  display:block;
  position:absolute;
  top:0;
  width:100%;
  max-width:1200px;
  height:100%;
  background:linear-gradient(90deg, #eee 0%, #ffffff00 30%, #ffffff00 70%, #eee 100%);
  pointer-events:none;
}

.arrow-btn {
  width:40px;
  height:40px;
  background:#fff;
  border-radius:50%;
  border:none;
  box-shadow: 0 6px 8px #00000030;
  position:absolute;
  top:50%;
  left:20px;
  transform:translateY(-50%);
  z-index:1000;
  cursor:pointer;
}

.arrow-btn-next {
  left:auto;
  right:20px;
}

.arrow-btn svg {
  fill:#333;
  position:absolute;
  height:80%;  
  left:50%;
  top:50%;
  transform:translate(-60%,-50%);
}

.arrow-btn-next svg {
  transform:translate(-40%,-50%);
}
</style>


  
  
</head>

<body translate="no">
  <div class='cards-wrapper'>
  <div class='cards'>
    <button class='card card1' tabindex="-1">
      <div class="icon">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 200">
    <path d="M208 80c0-26.5 21.5-48 48-48h64c26.5 0 48 21.5 48 48v64c0 26.5-21.5 48-48 48h-8v40h152c30.9 0 56 25.1 56 56v32h8c26.5 0 48 21.5 48 48v64c0 26.5-21.5 48-48 48h-64c-26.5 0-48-21.5-48-48v-64c0-26.5 21.5-48 48-48h8v-32c0-4.4-3.6-8-8-8H312v40h8c26.5 0 48 21.5 48 48v64c0 26.5-21.5 48-48 48h-64c-26.5 0-48-21.5-48-48v-64c0-26.5 21.5-48 48-48h8v-40H112c-4.4 0-8 3.6-8 8v32h8c26.5 0 48 21.5 48 48v64c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48v-64c0-26.5 21.5-48 48-48h8v-32c0-30.9 25.1-56 56-56h152v-40h-8c-26.5 0-48-21.5-48-48V80z"/>
  </svg>
      </div>
      <h2>Card 1</h2>
      <h4>Lorem</h4>    
    </button>

    <button class='card card2' tabindex="-1">
      <div class="icon">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 200">
  <path d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2s-6.3 25.5 4.1 33.7l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L477.4 348.9c1.7-9.4 2.6-19 2.6-28.9h64c17.7 0 32-14.3 32-32s-14.3-32-32-32h-64.3c-1.1-14.1-5-27.5-11.1-39.5.7-.6 1.4-1.2 2.1-1.9l64-64c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-64 64c-.7.7-1.3 1.4-1.9 2.1-14.3-7.3-30.4-11.4-47.5-11.4H264c-8.3 0-16.3 1-24 2.8L38.8 5.1zM320 0c-53 0-96 43-96 96v3.6c0 15.7 12.7 28.4 28.4 28.4h135.2c15.7 0 28.4-12.7 28.4-28.4V96c0-53-43-96-96-96zM160.3 256H96c-17.7 0-32 14.3-32 32s14.3 32 32 32h64c0 24.6 5.5 47.8 15.4 68.6-2.2 1.3-4.2 2.9-6 4.8l-64 64c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l63.1-63.1a159.2 159.2 0 0 0 90.3 39.6V335.5L166.7 227.3c-3.4 9-5.6 18.7-6.4 28.7zM336 479.2c36.6-3.6 69.7-19.6 94.8-43.8L336 360.7v118.5z"/>
</svg>
      </div>
      <h2>Card 2</h2>
      <h4>Ipsum</h4>    
    </button>

    <button class='card card3' tabindex="-1">
      <div class="icon">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 200">
  <path d="M308.5 135.3a22 22 0 0 0 6.2-25 171 171 0 0 0-7.6-15.5l-3.1-5.4c-3-5-6.3-9.9-9.8-14.6a22 22 0 0 0-24.7-7.1L241.3 77c-10.7-8.8-23-16-36.2-20.9l-6.1-29a21.9 21.9 0 0 0-18.5-17.8c-6.6-.9-13.3-1.3-20.1-1.3h-.7c-6.8 0-13.5.4-20.1 1.2A22 22 0 0 0 121.1 27L115 56.1c-13.3 5-25.5 12.1-36.2 20.9l-28.3-9.2c-9-3-19-.5-24.7 7.1-3.5 4.7-6.8 9.6-9.9 14.6l-3 5.3c-2.8 5-5.3 10.2-7.6 15.6a22.1 22.1 0 0 0 6.2 25l22.2 19.8a128.8 128.8 0 0 0 0 41.7l-22.2 19.8a22 22 0 0 0-6.2 25 187 187 0 0 0 7.6 15.6l3 5.2c3 5.1 6.3 9.9 9.9 14.6a22 22 0 0 0 24.7 7.1l28.2-9.3c10.7 8.8 23 16 36.2 20.9l6.1 29.1a21.9 21.9 0 0 0 18.5 17.8 172 172 0 0 0 40.8 0 22 22 0 0 0 18.5-17.8l6.1-29.1c13.3-5 25.5-12.1 36.2-20.9l28.2 9.3c9 3 19 .5 24.7-7.1 3.5-4.7 6.8-9.5 9.8-14.6l3.1-5.4a171 171 0 0 0 7.6-15.5c3.7-8.7.9-18.6-6.2-25l-22.2-19.8a131 131 0 0 0 0-41.8l22.2-19.8zM112 176a48 48 0 1 1 96 0 48 48 0 1 1-96 0zm392.7 324.5a22 22 0 0 0 25 6.2 171 171 0 0 0 15.5-7.6l5.4-3.1c5-3 9.9-6.3 14.6-9.8a22 22 0 0 0 7.1-24.7l-9.3-28.2c8.8-10.7 16-23 20.9-36.2L613 391a21.9 21.9 0 0 0 17.8-18.5 172 172 0 0 0 0-40.8 22 22 0 0 0-17.8-18.5l-29.1-6.2c-5-13.3-12.1-25.5-20.9-36.2l9.3-28.2c3-9 .5-19-7.1-24.7-4.7-3.5-9.6-6.8-14.6-9.9l-5.3-3c-5-2.8-10.2-5.3-15.6-7.6a22.1 22.1 0 0 0-25 6.2l-19.8 22.2a131 131 0 0 0-41.8 0l-19.8-22.2a22 22 0 0 0-25-6.2 187 187 0 0 0-15.6 7.6l-5.2 3a144 144 0 0 0-14.6 9..........完整代码请登录后点击上方下载按钮下载查看