10个纯CSS3图片画廊及滑块

2011-07-13 16:27:04

基于JavaScript实现的图片画廊/滑块插件技术有成百上千款可供您选择,所有的产品提供的功能都是不同的,都提供了交互功能,而且都是比较容易使用且安装的。于是,现在的问题是,为什么您就不考虑纯粹用CSS来替代?

CSS3是很是了不起。它正以惊人的速度及新技术、新想法,几乎每天都在更新,推动本身的能力越走越远,使得我们能够减少对JavaScript的依赖。想看这些效果请安装chrome或者firefox等支持CSS3的浏览器,IE是不支持的。

Turn Your Images Into Polaroids with CSS3

Turn Your Images Into Polaroids with CSS3
这项技术在某些特定浏览器中运用CSS(2和3)相结合完成,运用一些基本的样式,把经常性使用的老图片看起来像是宝丽来影像风格–并没有额外的标记来显示文本。
运用CSS3技术使得您的影像像是宝丽来风格 »

Sliding CSS3 Transition Image Gallery

Sliding CSS3 Transition Image Gallery
本教程将会向您展示如果运用CSS3变换技术创建一个“幻灯片”效果。
CSS3变换技术完成图片幻灯片 »
查看演示 »

CSS Transitions – Throwing Polaroids at a Table

CSS Transitions - Throwing Polaroids at a Table
在这篇教程中,您将会看到如果运用CSS3变换和WebKit变换,使得您可以实现在您网站中布置–桌面可以随意摆放任意尺寸大小的照片
CSS 变换 – 桌面中随意摆放照片 »
查看演示 »

CSS Polaroid Photo Gallery

CSS Polaroid Photo Gallery
CSS实现宝丽来照片库 »
查看演示 »

Tabbed Image Gallery with CSS3 Transitions

Tabbed Image Gallery with CSS3 Transitions
通过本教材您可以通过运用CSS变换实现标签式动画图片库。
CSS变换实现标签式图片库 »
查看演示 »

Pure CSS3 Animated Sliding Image Gallery

Pure CSS3 Animated Sliding Image Gallery
这套主要的想法是为了实现当当前的图片滑出的时候,使得下一张图片滑入。这个可以通过众多 z-index 属性实现,也就是说,最新的那张总是显示在最前端。
纯CSS3实现滑动动画画廊 »
查看演示 »

Fancy Image Gallery with CSS3

Fancy Image Gallery with CSS3
这个CSS3教程会告诉您如何创建一个活泼的图片画廊。虽然建议的是,您需要采用兼容CSS3的浏览器中实现,但对于不兼容的浏览器该画廊依然是可见的,没有动画而已。
CSS3实现花式画廊与 »
查看演示 »

Image Slider With Pure CSS3

Image Slider With Pure CSS3
图像滑块是一种非常流行的图像效果,在作品集站点及博客中经常会被使用,然而,这些大多都是通过JavaScript来实现的。随着CSS3日渐强大,您可以纯粹通过CSS3技术来实现图像滑块效果,这篇文章恰好会告诉您怎么做。
纯CSS3实现图像滑块 »
查看演示 »

Sexy Image Hover Effects using CSS3

Sexy Image Hover Effects using CSS3
在这篇文章中您会被告知通过CSS3创建性感的图像悬停效果。这一类的效果通常都是通过Flash或JavaScript实现的,但当CSS可以完全实现该效果的时候您还会选择它们来实现吗?
用CSS3实现性感的悬停效果 »
查看演示 »

CSS3 Image Enlarger Gallery

CSS3 Image Enlarger Gallery
此图像画廊仅在Safari, Chrome 和 Opera中有效,所有其他浏览器将会看到即时图像大小悬停时产生变化。如果您使用的是上述3款浏览器,那么您就会看到图像放大效果,收缩顺利的话不会超过0.7秒。
CSS3实现图像放大画廊 »
查看演示 »

上一篇:2011 年 20 个最棒的免费 HTML5 网站模板
下一篇:11个非常棒的CSS3实现的图片画廊

有什么想说的吗?