gsap+css实现图片幻灯片效果代码-html代码-BFW代码库

gsap+css实现图片幻灯片效果代码

代码语言：html

所属分类：幻灯片

代码描述：gsap+css实现图片幻灯片效果代码

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

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

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

  
  
  
<style>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: system-ui, -apple-system, sans-serif;
  background: linear-gradient(135deg, #1e1e2e 0%, #2d2d44 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*** CUSTOM SLIDER ***/
.custom-slider {
  position: relative;
  width: 100%;
  max-width: 100vw;
  padding: 60px 0 100px 0;
  overflow: hidden;
}

.slider-container {
  position: relative;
  width: 100%;
  overflow: visible;
  display: flex;
  justify-content: center;
}

.slider-track {
  display: flex;
  align-items: center;
  gap: 20px; /* REDUZIERT von 40px auf 20px */
  position: relative;
  will-change: transform;
  cursor: grab;
}

.slider-track:active {
  cursor: grabbing;
}

/* ========================================
   SLIDES
   ======================================== */
.slide {
  flex-shrink: 0;
  width: 360px; /* REDUZIERT von 480px */
  height: 240px; /* REDUZIERT von 320px */
  position: relative;
  
  border-radius: 16px;
  overflow: hidden;
  background-color: #000;
  
  /* Base state - MEHR Transparenz */
  opacity: 0.3; /* REDUZIERT von 0.5 */
  filter: brightness(0.5) saturate(0.7); /* DUNKLER */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  transform: none;
  
  transition: 
    width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    height 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    filter 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Aktives Slide (Mitte) - DEUTLICH GRÖSSER */
.slide.active {
  width: 900px; /* VERGRÖSSERT von 720px */
  height: 600px; /* VERGRÖSSERT von 480px */
  opacity: 1;
  z-index: 10;
  filter: brightness(1) saturate(1.05) contrast(1.02);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.7);
}

/* Nachbar-Slides - KLEINER */
.slide.neighbor {
  width: 420px; /* REDUZIERT von 520px */
  height: 280px; /* REDUZIERT von 350px */
  opacity: 0.6; /* REDUZIERT von 0.75 */
  z-index: 5;
  filter: brightness(0.75) saturate(0.85);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}

/* Weit entfernte Slides - NOCH KLEINER & DUNKLER */
.slide.far {
  width: 360px;
  height: 240px;
  opacity: 0.25; /* REDUZIERT von 0.4 */
  filter: brightness(0.5) saturate(0.7);
}

.slide figure {
  width: 100%;
  height: 100%;
  margin: 0;
  display: block;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  pointer-events: none;
}

/* ========================================
   NAVIGATION
   ======================================== */
.slider-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  
  width: 50px; /* VERGRÖSSERT von 40px */
  height: 50px;
  padding: 12.........完整代码请登录后点击上方下载按钮下载查看