幻灯片/轮播
动画过渡效果的纯CSS3幻灯片特效
PetitQ
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>
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
