5种动画过渡效果的纯CSS3幻灯片特效_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

CSS3-Slider是一款简单的带5种动画过渡效果的纯CSS3幻灯片特效。该幻灯片使用纯CSS3制作，使用非常简单，只需要按指定的格式编写HTML代码，并引入相应的CSS文件即可正常工作。

使用方法

在style文件夹中有5个不同的CSS文件，分别对应5种不同的CSS过渡动画效果：

slider-def.css：默认的过渡动画效果。
slider-ltr.css：从左向右。
slider-ttb.css：从上往下。
slider-btt.css：从下往上。
slider-simp.css：简洁模式，无导航按钮。

你需要哪种效果就在页面中引入相应的CSS文件。

HTML结构

该幻灯片的基本HTML结构如下：

<div id="slider">
  <div class="slides">
    <div class="slider">
      <div class="legend"></div>
      <div class="content">
        <div class="content-txt">
          <h1>Slide 1</h1>
          <h2>This is slide 1</h2>
        </div>
      </div>
      <div class="image">
        <img src="img/1.jpg">
      </div>
    </div>
    <div class="slider">
      <div class="legend"></div>
      <div class="content">
        <div class="content-txt">
          <h1>Slide 2</h1>
          <h2>This is slide 2</h2>
        </div>
      </div>
      <div class="image">
        <img src="img/2.jpg">
      </div>
    </div>
    <div class="slider">
      <div class="legend"></div>
      <div class="content">
        <div class="content-txt">
          <h1>Slide 3</h1>
          <h2>This is slide 3</h2>
        </div>
      </div>
      <div class="image">
        <img src="img/3.jpg">
      </div>
    </div>
    <div class="slider">
      <div class="legend"></div>
      <div class="content">
        <div class="content-txt">
          <h1>Slide 4</h1>
          <h2>This is slide 4</h2>
        </div>
      </div>
      <div class="image">
        <img src="img/4.jpg">
      </div>
    </div>
  </div>
  <div class="switch">
    <ul>
      <li>
        <div class="on"></div>
      </li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</div>