css幻灯片模版

CSS幻灯片模版是一种常用的页面元素，它能够帮助我们制作出炫酷的轮播效果。下面就给大家分享一款基于CSS的幻灯片模版。

/* HTML代码结构 */div class="slider">
      ul class="slider-list">
        li class="slider-item active">
          img src="slide-1.jpg" alt="Slide 1">
          div class="slider-text">
            h3>
    Slide 1/h3>
            p>
    Lorem ipsum dolor sit amet./p>
          /div>
        /li>
        li class="slider-item">
          img src="slide-2.jpg" alt="Slide 2">
          div class="slider-text">
            h3>
    Slide 2/h3>
            p>
    Consectetur adipiscing elit./p>
          /div>
        /li>
      /ul>
      ul class="slider-nav">
        li class="slider-nav-item active">
    /li>
        li class="slider-nav-item">
    /li>
      /ul>
    /div>
/* CSS样式 */.slider {
      position: relative;
      width: 100%;
      height: 500px;
      overflow: hidden;
}
.slider-list {
      position: absolute;
      top: 0;
      left: 0;
      width: 200%;
      height: 100%;
      list-style: none;
      margin: 0;
      padding: 0;
}
.slider-item {
      position: absolute;
      top: 0;
      width: 50%;
      height: 100%;
      float: left;
      transition: all 0.3s ease-out;
      opacity: 0;
}
.slider-item.active {
      opacity: 1;
}
.slider-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
}
.slider-text {
      position: absolute;
      bottom: 10%;
      left: 10%;
      color: #ffffff;
      text-shadow: 1px 1px 2px #000000;
      z-index: 1;
}
.slider-text h3 {
      margin: 0;
      font-size: 36px;
      font-weight: 700;
      letter-spacing: 2px;
}
.slider-text p {
      margin: 20px 0 0;
      font-size: 18px;
      font-weight: 400;
      letter-spacing: 1px;
}
.slider-nav {
      position: absolute;
      bottom: 5%;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1;
}
.slider-nav-item {
      width: 10px;
      height: 10px;
      background-color: #ffffff;
      border-radius: 50%;
      margin: 10px;
      transition: all 0.3s ease-out;
      opacity: 0.5;
      cursor: pointer;
}
.slider-nav-item.active {
      opacity: 1;
}
    

该模版的HTML结构很简单，由一个包裹幻灯片的div容器以及两个ul元素组成。其中，slider-list是一个包裹幻灯片图片和文字的列表，而slider-nav则是一个包裹幻灯片导航点的列表。

接下来的CSS样式则定义了元素的尺寸、位置、层级以及动画效果等。该模版使用了CSS3的transition属性，能够使幻灯片切换更加平滑。同时，还使用了flex布局和transform属性，可以使导航点水平居中并自适应幻灯片数量。

总之，这款CSS幻灯片模版能够帮助我们轻松制作出高性能的轮播效果，非常适用于网站的首页、产品展示等页面。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！