中秋节3D画廊，让传统文化与现代科技碰撞

2023-07-14 00:45:43

HTML和CSS创造的3D中秋节图片画廊

展现中秋佳节的立体之美

中秋节是中国重要的传统节日，以赏月、团圆和美食品鉴为特色。借助HTML和CSS的强大功能，我们可以创造一个充满节日气氛的中秋节3D图片画廊，让您沉浸在中秋佳节的喜庆氛围中。

创建画廊基础结构

首先，我们需要创建一个HTML文件并添加一个

元素作为画廊的容器。在这个容器中，我们将添加元素来容纳中秋节元素的图片。

<!DOCTYPE html>
<html>
<head>

  <style>
    #gallery {
      width: 100%;
      height: 500px;
      overflow: hidden;
    }

    #gallery img {
      width: 200px;
      height: 200px;
      object-fit: contain;
      margin: 10px;
      transform-style: preserve-3d;
      animation: rotation 10s infinite linear;
    }

    @keyframes rotation {
      0% {
        transform: rotateY(0deg);
      }
      100% {
        transform: rotateY(360deg);
      }
    }
  </style>
</head>
<body>
  <div id="gallery">
    <img src="image1.jpg" alt="中秋节图片1">
    <img src="image2.jpg" alt="中秋节图片2">
    <img src="image3.jpg" alt="中秋节图片3">
    <img src="image4.jpg" alt="中秋节图片4">
    <img src="image5.jpg" alt="中秋节图片5">
  </div>
</body>
</html>

使用CSS实现旋转动画

为了让画廊更加生动，我们使用CSS添加旋转动画，让图片不断旋转，营造出3D立体效果。

@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

使用JavaScript控制图片

为了进一步增强画廊的互动性，我们使用JavaScript来实现图片的旋转和距离设置。

const images = document.querySelectorAll('#gallery img');

for (let i = 0; i < images.length; i++) {
  const image = images[i];

  // 设置图片的旋转角度
  image.style.transform = `rotateY(${i * 45}deg)`;

  // 设置图片的距离
  image.style.zIndex = images.length - i;
}

实现手动播放功能

为了让用户能够手动播放画廊图片，我们添加上一张和下一张按钮。

<button id="prev">上一张</button>
<button id="next">下一张</button>

const prevButton = document.getElementById('prev');
const nextButton = document.getElementById('next');

let currentIndex = 0;

prevButton.addEventListener('click', () => {
  currentIndex--;

  if (currentIndex < 0) {
    currentIndex = images.length - 1;
  }

  showImage(currentIndex);
});

nextButton.addEventListener('click', () => {
  currentIndex++;

  if (currentIndex > images.length - 1) {
    currentIndex = 0;
  }

  showImage(currentIndex);
});

function showImage(index) {
  for (let i = 0; i < images.length; i++) {
    images[i].classList.remove('active');
  }

  images[index].classList.add('active');
}

代码示例

完整的HTML、CSS和JavaScript代码如下：

<!DOCTYPE html>
<html>
<head>

  <style>
    #gallery {
      width: 100%;
      height: 500px;
      overflow: hidden;
    }

    #gallery img {
      width: 200px;
      height: 200px;
      object-fit: contain;
      margin: 10px;
      transform-style: preserve-3d;
      animation: rotation 10s infinite linear;
    }

    @keyframes rotation {
      0% {
        transform: rotateY(0deg);
      }
      100% {
        transform: rotateY(360deg);
      }
    }
  </style>
</head>
<body>
  <div id="gallery">
    <img src="image1.jpg" alt="中秋节图片1">
    <img src="image2.jpg" alt="中秋节图片2">
    <img src="image3.jpg" alt="中秋节图片3">
    <img src="image4.jpg" alt="中秋节图片4">
    <img src="image5.jpg" alt="中秋节图片5">
  </div>

  <button id="prev">上一张</button>
  <button id="next">下一张</button>

  <script>
    const images = document.querySelectorAll('#gallery img');

    for (let i = 0; i < images.length; i++) {
      const image = images[i];

      // 设置图片的旋转角度
      image.style.transform = `rotateY(${i * 45}deg)`;

      // 设置图片的距离
      image.style.zIndex = images.length - i;
    }

    const prevButton = document.getElementById('prev');
    const nextButton = document.getElementById('next');

    let currentIndex = 0;

    prevButton.addEventListener('click', () => {
      currentIndex--;

      if (currentIndex < 0) {
        currentIndex = images.length - 1;
      }

      showImage(currentIndex);
    });

    nextButton.addEventListener('click', () => {
      currentIndex++;

      if (currentIndex > images.length - 1) {
        currentIndex = 0;
      }

      showImage(currentIndex);
    });

    function showImage(index) {
      for (let i = 0; i < images.length; i++) {
        images[i].classList.remove('active');
      }

      images[index].classList.add('active');
    }
  </script>
</body>
</html>