[分享]css3文字随图片轮播

发布于 2024-11-11 15:55:25

CSS3文字随图片轮播是一种优秀的网页动画效果，它可以将文字与图片融合在一起，使整个网页更加生动。下面是一份使用CSS3文字随图片轮播的代码示例： CSS3文字随图片轮播效果 body { margi...

CSS3文字随图片轮播是一种优秀的网页动画效果，它可以将文字与图片融合在一起，使整个网页更加生动。下面是一份使用CSS3文字随图片轮播的代码示例：

<html>
<head>
<title>CSS3文字随图片轮播效果</title>
<style>
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

.container {
  position: relative;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.5s;
}

.slide.active {
  opacity: 1;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slide p {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 32px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.5s;
}

.slide.active p {
  opacity: 1;
}
</style>
</head>
<body>
  <div class="container">
    <div class="slide active">
      <img src="slide-1.jpg" alt="Slide 1">
      <p>Slide 1 Text</p>
    </div>
    <div class="slide">
      <img src="slide-2.jpg" alt="Slide 2">
      <p>Slide 2 Text</p>
    </div>
    <div class="slide">
      <img src="slide-3.jpg" alt="Slide 3">
      <p>Slide 3 Text</p>
    </div>
  </div>
  <script>
    let slides = document.querySelectorAll('.slide');
    let currentSlide = 0;
    let slideInterval = setInterval(nextSlide, 5000);
  
    function nextSlide() {
      slides[currentSlide].className = 'slide';
      currentSlide = (currentSlide + 1) % slides.length;
      slides[currentSlide].className = 'slide active';
    }
  </script>
</body>
</html>

在上面的代码中，我们首先创建了一个容器（div.container）来装载图片和文字，然后在容器内创建了三个幻灯片（div.slide）。每个幻灯片包含一张图片和一段文字，使用position:absolute定位在容器中。

接着，我们使用CSS3的opacity和transition属性来定义幻灯片的淡入淡出动画效果。当幻灯片的className变为“slide active”时，它就会从透明度0转变为透明度1，形成淡入效果。反之，当幻灯片从“slide active”变为“slide”时，它就会从透明度1转变为透明度0，形成淡出效果。

最后，我们使用JavaScript来实现自动轮播幻灯片的功能。我们通过setInterval函数来间隔一段时间执行nextSlide函数，实现幻灯片切换的自动化。

综上所述，CSS3文字随图片轮播效果可以很好地提升网页的视觉体验，需要结合HTML、CSS和JavaScript技术进行实现。

css 教程

一个月内的热帖推荐

[分享]css3文字随图片轮播

91云脑