• 网站首页
  • 好站推荐
  • 焦点互联网
  • 技术相关
  • 经典网页设计
  • 优秀设计资源
  • 工业设计
  • 其它
烈火前端
  • 首页
  • 好站推荐
  • 互联网
  • 技术相关
  • 经典网页
  • 优秀资源
  • 工业设计
  • 其它
站内搜索

10个CSS3技术实现的图片相册及slider滑动效果

2010年06月10日 · 优秀设计资源

相册和slider滑动效果对于网页设计来说,已经是一个很简单的题目了。使用jq+css,可以很容易的制作出一个。今天这10个案例比较特殊,全部采用的是纯CSS3来完成,没使用任何JS。鉴于目前状况,请使用chrome或safari观看演示。

Turn Your Images Into Polaroids with CSS3

Turn Your Images Into Polaroids with CSS3

This technique uses a combination of browser-specific CSS (2 and 3) integration and some basic styling to turn regular old images into cool looking Polaroid style images—with no additional markup to show the text.

Turn Your Images Into Polaroids with CSS3 »

点击查看演示 »

Sliding CSS3 Transition Image Gallery

Sliding CSS3 Transition Image Gallery

This tutorial will show you how to create a "slide" effect image gallery using CSS3 transitions.

Sliding CSS3 Transition Image Gallery »

点击查看演示 »

CSS Transitions – Throwing Polaroids at a Table

CSS Transitions - Throwing Polaroids at a Table

In this tutorial you will be shown how CSS3 transforms and WebKit transitions can add zing to the way you present images on your site by transforming some basic images into lots of differently sized Polaroid photos scattered across a table.

CSS Transitions – Throwing Polaroids at a Table »

点击查看演示 »

CSS Polaroid Photo Gallery

CSS Polaroid Photo Gallery

CSS Polaroid Photo Gallery »

点击查看演示 »

Tabbed Image Gallery with CSS3 Transitions

Tabbed Image Gallery with CSS3 Transitions

In this tutorial you are are going to create a tabbed animated image gallery using some CSS transitions.

Tabbed Image Gallery with CSS3 Transitions »

点击查看演示 »

Pure CSS3 Animated Sliding Image Gallery

Pure CSS3 Animated Sliding Image Gallery

The idea of this CSS3 experiment is to get one image to slide in while the current image slides out. There’s a lot of z-index going on as well, so the new image always appears to be at the top.

Pure CSS3 Animated Sliding Image Gallery »

点击查看演示 »

Fancy Image Gallery with CSS3

Fancy Image Gallery with CSS3

This CSS3 tutorial will show you how to create an image gallery with animation. Although it is recommend that you a CSS3 compliant browser to experience the animations, even without a compliant browser the gallery is still going to be visible without animation.

Fancy Image Gallery with CSS3 »

点击查看演示 »

Image Slider With Pure CSS3

Image Slider With Pure CSS3

Image sliders are a popular effect and often used in portfolio sites and blogs, with the most of these sliders being built with Javascript. But with CSS3's strength, you can implement an image slider with only pure CSS3, this article will show you how.

Image Slider With Pure CSS3 »

点击查看演示 »

Sexy Image Hover Effects using CSS3

Sexy Image Hover Effects using CSS3

In this post you are going to be shown how to create a sexy CSS3 effect on image hover. This kind of effect is usually built with Flash or Javascript, but why use Flash or js when CSS can do the same work.

Sexy Image Hover Effects using CSS3 »

点击查看演示 »

CSS3 Image Enlarger Gallery

CSS3 Image Enlarger Gallery

This image gallery is only for Safari, Chrome and Opera, all other browsers will see an instant image size change on hover.

Those of you using any of the above three browsers will see the images enlarge and shrink smoothly over 0.7 seconds.

CSS3 Image Enlarger Gallery »

点击查看演示 »

转载自:http://speckyboy.com/2010/06/09/10-pure-css3-image-galleries-and-sliders/

相关文章
15个 html5+css3 案例
25个 html5 和 css3 网页开发工具
25个优秀html5技术设计案例新赏
20个网页设计师应该学习的CSS3经典教程实例
© 2025 Design by vpshu.com // 黑ICP备2024032218号-1 黑公网安备23100002000223号
© 2025 Design by vpshu.com