本文介绍了如何利用CSS3的变换和过渡效果来创建各种图像展示功能，包括图片画廊、滑块插件和悬停效果。教程详细展示了纯CSS3实现的图片幻灯片、放大效果、标签式动画图片库等，适用于在现代浏览器中实现动态视觉体验，减少对JavaScript的依赖。虽然部分效果在旧版或非主流浏览器中可能无法完美呈现，但依然保持基本的可用性。
基于JavaScript实现的图片画廊/滑块插件技术有成百上千款可供您选择，所有的产品提供的功能都是不同的，都提供了交互功能，而且都是比较容易使用且安装的。于是，现在的问题是，为什么您就不考虑纯粹用CSS来替代？
CSS3是很是了不起。它正以惊人的速度及新技术、新想法，几乎每天都在更新，推动本身的能力越走越远，使得我们能够减少对JavaScript的依赖。想看这些效果请安装chrome或者firefox等支持CSS3的浏览器，IE是不支持的。
这项技术在某些特定浏览器中运用CSS(2和3)相结合完成，运用一些基本的样式，把经常性使用的老图片看起来像是宝丽来影像风格–并没有额外的标记来显示文本。
运用CSS3技术使得您的影像像是宝丽来风格 »
本教程将会向您展示如果运用CSS3变换技术创建一个“幻灯片”效果。
CSS3变换技术完成图片幻灯片 »
查看演示 »
在这篇教程中，您将会看到如果运用CSS3变换和WebKit变换，使得您可以实现在您网站中布置–桌面可以随意摆放任意尺寸大小的照片
CSS 变换 – 桌面中随意摆放照片 »
查看演示 »
通过本教材您可以通过运用CSS变换实现标签式动画图片库。
CSS变换实现标签式图片库 »
查看演示 »
这套主要的想法是为了实现当当前的图片滑出的时候，使得下一张图片滑入。这个可以通过众多 z-index 属性实现，也就是说，最新的那张总是显示在最前端。
纯CSS3实现滑动动画画廊 »
查看演示 »
这个CSS3教程会告诉您如何创建一个活泼的图片画廊。虽然建议的是，您需要采用兼容CSS3的浏览器中实现，但对于不兼容的浏览器该画廊依然是可见的，没有动画而已。
CSS3实现花式画廊与 »
查看演示 »
图像滑块是一种非常流行的图像效果，在作品集站点及博客中经常会被使用，然而，这些大多都是通过JavaScript来实现的。随着CSS3日渐强大，您可以纯粹通过CSS3技术来实现图像滑块效果，这篇文章恰好会告诉您怎么做。
纯CSS3实现图像滑块 »
查看演示 »
在这篇文章中您会被告知通过CSS3创建性感的图像悬停效果。这一类的效果通常都是通过Flash或JavaScript实现的，但当CSS可以完全实现该效果的时候您还会选择它们来实现吗？
用CSS3实现性感的悬停效果 »
查看演示 »
此图像画廊仅在Safari, Chrome 和 Opera中有效，所有其他浏览器将会看到即时图像大小悬停时产生变化。如果您使用的是上述3款浏览器，那么您就会看到图像放大效果，收缩顺利的话不会超过0.7秒。
CSS3实现图像放大画廊 »
查看演示 »
扫一扫
211
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
