[分享]css六边形幻灯

CSS六边形幻灯是一种非常炫酷的网页设计效果，它基于CSS技术实现，具有独特的视觉效果和交互性。以下是一份CSS六边形幻灯的代码示例：/六边形样式/ .hexagon { : relative; wi...

CSS六边形幻灯是一种非常炫酷的网页设计效果，它基于CSS技术实现，具有独特的视觉效果和交互性。以下是一份CSS六边形幻灯的代码示例：

/*六边形样式*/
.hexagon {
  position: relative;
  width: 50%;
  height: 0;
  margin: 0 auto 20px;
  padding-bottom: 57.7%;
  background-color: #333;
  overflow: hidden;
  transform: rotate(60deg);
  cursor: pointer;
}
.hexagon:before {
  content: "";
  position: absolute;
  top: 0;
  left: -25%;
  width: 50%;
  height: 100%;
  background-color: inherit;
  transform: rotate(-60deg);
}
.hexagon:after {
  content: "";
  position: absolute;
  top: 0;
  left: 25%;
  width: 50%;
  height: 100%;
  background-color: inherit;
  transform: rotate(60deg);
}
/*图片样式*/
.hexagon img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/*幻灯片样式*/
.hexagon-slider {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.hexagon-slider .slide {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: opacity 1s;
  z-index: 1;
}
.hexagon-slider .slide.active {
  opacity: 1;
  z-index: 2;
} 

以上是六边形和幻灯片的样式代码，下面是JavaScript代码来控制幻灯片的切换效果：

/*切换效果*/
let slideIndex = 0;
const slides = document.querySelectorAll(".hexagon-slider .slide");

function showSlide(index) {
  if(index >= slides.length) {
    index = 0;
  } else if(index < 0) {
    index = slides.length - 1;
  }
  slides.forEach(slide => {
    slide.classList.remove("active");
  });
  slides[index].classList.add("active");
  slideIndex = index;
}

function nextSlide() {
  showSlide(slideIndex + 1);
}

function prevSlide() {
  showSlide(slideIndex - 1);
}

const interval = setInterval(nextSlide, 3000);

const slider = document.querySelector(".hexagon-slider");
slider.addEventListener("mouseenter", () => clearInterval(interval));
slider.addEventListener("mouseleave", () => interval = setInterval(nextSlide, 3000)); 

以上是切换效果的JavaScript代码，该代码实现了自动轮播和鼠标悬停暂停轮播的功能。CSS六边形幻灯可以用于各种类型的网站，例如个人博客、企业展示、产品宣传等。希望以上代码可以帮助你实现一个漂亮的CSS六边形幻灯效果。