html图片转换特效,css3图片切换效果

本教程将带给大家一些很酷的图片切换效果的制作方法。为了使大家看到不同的效果，我们准备了三种不同的例子：图片切换、全屏幻灯片和一些产品展示。这些效果不仅仅可以运用在幻灯片中。但在我们的例子中，都是以幻灯片的形式出现。你可以发挥你的想象力，将它们应用在其他场景中，例如页面切换，页面加载，点击按钮后的效果，提交表单效果等等。

第三个DEMO的产品展示效果中使用了透明背景。我们在做各种效果的时候，可以模拟现实生活中物体的运动效果。在最后的一个例子中，我们将一些酒瓶碰撞的效果。

例子中的过渡状态我们使用CSS Animations。这将允许我们在图片运动的时候给它指定一些状态。这对于需要使用方向感知的效果特别有用。

注意：不是每一个浏览器都支持在伪元素上使用CSS Animations，最好是使用Chrome或Firefox浏览器观看。

在下载包中我们将三个例子做成三个文件。

小图片切换效果：这个demo中包含了许多有意思的图片切换效果。

全屏轮播图：这个demo中有多种不同效果的全屏轮播图效果。

透明背景产品展示：在这个demo中你可以体验到酒瓶碰撞的真实效果。正确合理的使用animations可以帮助我们实现这种效果。