CSS3中增加了诸多新的特性,借助这些特性,可以实现不可思议的效果。本文带来20个教程,教你如何使用CSS3创建引人注目的图片切换效果和灯箱效果。
点击小标题可以直接看效果
1. 创建带3D灯箱动画效果的CSS3图片画廊
这是一个伟大的效果,当鼠标悬停时,图片会以3D效果突出显示,而且还带有阴影效果。
![](http://dl.iteye.com/upload/attachment/616737/849e920f-cbdb-3cac-869d-5573036dc0dd.jpg)
2. CSS 3D图片画廊
在本教程中,我们将使用CSS中的3D转换和先进的JavaScript/jQuery框架,来创建一个图片画廊。
![](http://dl.iteye.com/upload/attachment/616739/295f5b24-420d-36a8-be88-3a0639d375ab.jpg)
3. CSS3图像转换动画
本教程使用CSS3和jQuery实现了各种图片转换效果,目前只能在Webkit引擎的浏览器(如Safari)中实现。
![](http://dl.iteye.com/upload/attachment/616741/38d1c9d0-6594-3fba-9b4e-eae8dd9a52b8.jpg)
4. 图片旋转切换效果
使用CSS3和jQuery旋转插件,实现一个漂亮的幻灯片效果,点击箭头按钮,会以旋转效果进行切换。
![](http://dl.iteye.com/upload/attachment/616743/7e942b92-4d69-3a67-91d8-38a68e15f8d8.jpg)
5. 用CSS3实现全屏背景图片切换效果
本文中,将只使用CSS创建一个全屏背景图片切换效果,包含不同类型的切换方式。同时,标题也应用了CSS动画效果。
![](http://dl.iteye.com/upload/attachment/616745/55c2e68e-b3ba-3886-859e-60935a27b5c2.jpg)
6. 只使用CSS创建3D切换效果
本实例用到了CSS3中最新的3D转换特性,来实现各种图片切换效果。
![](http://dl.iteye.com/upload/attachment/616747/762c01f4-4dc1-3782-af2d-881bffae6923.jpg)
7. 纯CSS3实现的切换效果
该效果由Caleb Jacob开发,只使用CSS3,没有JavaScript。
![](http://dl.iteye.com/upload/attachment/616749/46fb19b9-804f-3102-9f6b-87a979fffe66.jpg)
8. CSS3实现的拍立得效果(白色边框)
使用强大的CSS2 和CSS3特性,将普通的照片转换成拍立得效果(照片周围有白色边框,并配以文字)。
![](http://dl.iteye.com/upload/attachment/616751/92740238-cd8f-3257-8e6a-0ab9caaebbcb.jpg)
9. 用CSS3创建一个奇特的图片画廊
鼠标悬停在图片上时,图片会以动画形式放大并在右侧突出显示。
![](http://dl.iteye.com/upload/attachment/616753/7ff87a07-cede-3ef5-82fa-f9d051b7b978.jpg)
10. 纯CSS实现的虚化效果
该技术包含少量的DIV和一些简单的CSS代码,但实现了有趣的效果。
![](http://dl.iteye.com/upload/attachment/616755/2b006b7a-ad60-3ae3-8bdc-aadeadf8ae3a.jpg)
11. 使用CSS3创建全功能的内容滑动效果
内容滑动效果可以使网站更具活力。通常情况下,需要使用JavaScript或jQuery来实现,但是CSS3的到来,让这一切变得更加简单。
![](http://dl.iteye.com/upload/attachment/616757/46461d1b-169d-383c-8db6-659285afa572.jpg)
12. 使用CSS3制作图片画廊
本教程使用HTML+CSS制作类似于fancybox的图片画廊效果。
![](http://dl.iteye.com/upload/attachment/616759/61f6b571-1932-3f2c-8f06-b9cdfec56674.jpg)
13. Slicebox
使用CSS3 3D转换,我们可以创建各式各样的3D效果。如果浏览器不支持3D转换,可以使用一个简单的滑动器作为后备。
![](http://dl.iteye.com/upload/attachment/616761/8bf0c554-90e1-3f09-9df8-7ecd4c23929f.jpg)
14. Flux Slider
Flux Slider是一个基于CSS3 animation的图像转换框架,部分灵感来自神奇的Nivo jQuery滑动插件。
![](http://dl.iteye.com/upload/attachment/616763/0f9a3946-6dc1-373e-89a4-f734800b943b.jpg)
15. CSS3照片堆叠效果
点击“NEXT”按钮,将向下切换到下一张图片。点击当前的图片,会放大突出显示。
![](http://dl.iteye.com/upload/attachment/616765/bd8a9ce2-1ebc-3969-8de3-9849abb5a3b4.jpg)
16. Flickr Photobar画廊
本教程的目的是创建一个容易整合到网站中的底部图片栏。初始是隐藏的,当点击按钮时显示出来。所有图片以缩略图形式显示,点击时会显示完整的图片。
![](http://dl.iteye.com/upload/attachment/616771/227f76ef-5655-3de5-8854-629fa5c885f9.jpg)
17. 使用CSS3中的Columns和Media Queries实现图片画廊
本教程使用CSS3中的Columns和Media Queries实现图片画廊效果,该效果可以根据浏览器窗口的大小来改变显示图片的个数。
![](http://dl.iteye.com/upload/attachment/616767/6a56d481-04dc-3057-9b2b-a27ee650c5ad.jpg)
18. 纯CSS创建的拍立得效果画廊
结合使用各种CSS属性,可以做出很多神奇的效果。本教程只使用CSS来创建拍立得照片效果。
![](http://dl.iteye.com/upload/attachment/616769/8c684ca6-e5ea-30cb-9315-10959a8c7774.jpg)
19. 图片画廊
CSS3图片画廊和3D悬停效果。
![](http://dl.iteye.com/upload/attachment/616773/f83bfc9a-4faa-3f9d-abaf-9514f80c3fa2.jpg)
20. 纯CSS3创建的动画图片画廊
非常神奇的动画效果,鼠标悬停时,图片将缩小并显示出描述文字。没有使用任何JavaScript。
![](http://dl.iteye.com/upload/attachment/616775/520ab86a-31fa-31b4-b7f7-e07f4ef26a56.jpg)