当前位置：首页 > 网页特效 > 幻灯片和轮播图

5种动画过渡效果的纯CSS3幻灯片特效

分类：幻灯片和轮播图日期：2024-05-14 点击(3) 评论(0)

5种动画过渡效果的纯CSS3幻灯片特效

简介

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

- slider-def.css：默认的过渡动画效果。
- slider-ltr.css：从左向右。
- slider-ttb.css：从上往下。
- slider-btt.css：从下往上。
- slider-simp.css：简洁模式，无导航按钮。
你需要哪种效果就在页面中引入相应的CSS文件。

#####  HTML结构
该幻灯片的基本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> 
```

web299.com

5种动画过渡效果的纯CSS3幻灯片特效

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果