15个CSS3和jQuery的超棒页面过渡效果教程

怼烎@ 2021-11-29 05:58 393阅读 0赞

日期：2013-7-31  来源：[GBin1.com][]

[![15个CSS3和jQuery页面转换教程][15_CSS3_jQuery]][15_CSS3_jQuery_15_CSS3_jQuery]

[CSS3][]和[jQuery][]从根本上改变了网页设计和程序开发。通过[CSS3][]和[jQuery][]，设计员和开发者不需要太多的精力或编码，就可以创造出非常 美丽令人叹惊的效果，同时还可以令你快速完成任务。[CSS3][]和[jQuery][]最大的方便之处在于网上有大量的不同元素效果的展示教程，这一点使得学习新技巧 和创造一些很棒的内容更加轻松。网上有很多页面过渡效果展示教程，给页面转换添加漂亮的过渡效果。这些转换效果可以相当夸张和花俏，也可以非常简单朴实。 这些效果会使得你的网页更加漂亮醒目。本章我们将展示一些运用[CSS3][]和[jQuery][]制作出非常棒的页面转换效果，看看吧，选择自己最喜欢的加以运用，为 自己创造点什么吧。

## 1、全屏布局页转换[Download][]& [Demo][]    ##

一种简单响应的好看的页面转换。做法是首先显示四个项目然后加以扩展，给内置项添加进页面。

![15个CSS3和jQuery页面转换教程][15_CSS3_jQuery 1]

##  2、页面转换[Download ][Download 1]& [Demo][Demo 1]    ##

使用CSS动画达到网页过渡特效的展示图集。

![15个CSS3和jQuery页面转换教程][15_CSS3_jQuery 2]

## 3、Pesudo动画和过渡 [ Download][Download 2] & [Demo][Demo 2]    ##

一些创造性的案例运用Pesudo动画和过渡制作出有趣的效果。

![15个CSS3和jQuery页面转换教程][15_CSS3_jQuery 3]

## 4、CSS剪辑叠加效果 [ Download][Download 3]& [Demo1][]&[Demo2][]    ##

如何运用CSS的剪辑和过渡属性创建一个简单的叠加效果。

![15个CSS3和jQuery页面转换教程][15_CSS3_jQuery 4]

## 5、全屏翻页布局 [ Download][Download 4]& [Demo][Demo 3]    ##

运用BookBlock创建一个全屏翻页布局。像翻转书页一样显示目录，并通过工具栏菜单访问，从左侧滑出页面。

![15个CSS3和jQuery页面转换教程][15_CSS3_jQuery 5]

## 6、可响应的图片集：Gamma图集 [ Download][Download 5]&[ Demo][Demo 4]    ##

Gamma图集是一种尝试性的可响应图集画册，提供一个可调节的网格布局和全屏幻灯片视图。

![15个CSS3和jQuery页面转换教程][15_CSS3_jQuery 6]

## 7、CSS交互式的信息图表动画 [ Download][Download 6] & [Demo][Demo 5]    ##

了解如何使用SVG，CSS和JavaScript构建一个交互式的信息图表动画。

![15个CSS3和jQuery页面转换教程][15_CSS3_jQuery 7]

## 8、通过缩略图表扩展预览内容 [ Download ][Download 7]& [Demo][Demo 6]    ##

如何创建一个类似于谷歌图片上看到的效果与扩大图像预览缩略图表的教程。

![15个CSS3和jQuery页面转换教程][15_CSS3_jQuery 8]

## 9、运用jQuery and CSS过渡达到垂直展示效果 [ Download][Download 8]& [Demo][Demo 7]    ##

运用jQuery，CSS转换和多媒体元素，创建一个具有响应性往相反方向移动的适应屏幕布局的垂直滑块。

![15个CSS3和jQuery页面转换教程][15_CSS3_jQuery 9]

## 10、3D缩略图悬停效果 [ Download][Download 9] & [Demo1][Demo1 1]\-[Demo2][Demo2 1]\-[Demo3][]\-[Demo4][]\-[Demo5][]    ##

有关如何运用CSS 3D变换和jQuery创建3D缩略图悬停效果。

![15个CSS3和jQuery页面转换教程][15_CSS3_jQuery 10]

## 11、运用CSS3过渡效果模糊菜单键 [ Download][Download 10]&[Demo1][Demo1 2]\-[Demo2][Demo2 2]\-[Demo3][Demo3 1]\-[Demo4][Demo4 1]\-[Demo5][Demo5 1]    ##

如何运用文字阴影和过渡，以实现模糊菜单的效果，这将应用到菜单上的悬停元素。

![15个CSS3和jQuery页面转换教程][15_CSS3_jQuery 11]

## 12、CSS3过渡和从无到有变换 [Tutorial][] & [Demo][Demo 8]    ##

如何创建一些基本的CSS3过渡效果。

![15个CSS3和jQuery页面转换教程][15_CSS3_jQuery 12]

## 13、CSS3过渡教程 [Tutorial][Tutorial 1]    ##

本教程帮助你了解动画元素CSS3过渡。

![15个CSS3和jQuery页面转换教程][15_CSS3_jQuery 13]

## 14、CSS页面层叠 [Tutorial][Tutorial 2] & [Demo][Demo 9]    ##

CSS页面层叠给人性感的外观和好看形状的折叠纸张过渡。

![15个CSS3和jQuery页面转换教程][15_CSS3_jQuery 14]

## 15、CSS3过渡，建立一个组合 [Tutorial][Tutorial 3] & [Demo][Demo 10]    ##

建立一个时尚的，交互式的组合，使用CSS3过渡方法用Andrew Markham-Davies替代jQuery动画和HTML5标记。

![15个CSS3和jQuery页面转换教程][15_CSS3_jQuery]

via [ 极客社区 ][Link 1]

### 来源：[15个CSS3和jQuery的超棒页面过渡效果教程][GBin1.com] ###

[GBin1.com]: http://www.gbin1.com/technology/jquery/20130731-css3-jquery-transition-tutorials/
[15_CSS3_jQuery]: http://www.gbin1.com/technology/jquery/20130731-css3-jquery-transition-tutorials/title.jpg
[15_CSS3_jQuery_15_CSS3_jQuery]: http://www.gbin1.com/technology/jquery/20130731-css3-jquery-transition-tutorials/index.html
[CSS3]: http://www.gbin1.com/bloghome.html?tag=css3
[jQuery]: http://www.gbin1.com/bloghome.html?tag=jquery
[Download]: http://www.gbtags.com/gb/share/1534.htm
[Demo]: http://www.gbtags.com/gb/demoviewer/1534/20f5bddc-e12f-43c2-a3a2-26b1c68709b1/index.html.htm
[15_CSS3_jQuery 1]: http://www.gbin1.com/technology/jquery/20130731-css3-jquery-transition-tutorials/1.jpg
[Download 1]: http://www.gbtags.com/gb/share/1535.htm
[Demo 1]: http://www.gbtags.com/gb/demoviewer/1535/94c7aaee-7298-4095-972c-68f99b1e0bb9/PageTransitions%7Cindex.html.htm
[15_CSS3_jQuery 2]: http://www.gbin1.com/technology/jquery/20130731-css3-jquery-transition-tutorials/2.jpg
[Download 2]: http://www.gbtags.com/gb/share/1536.htm
[Demo 2]: http://www.gbtags.com/gb/demoviewer/1536/cfe7af5a-fae6-4e09-b372-aa48223a2a01/PseudoElementsAnimationsTransitions%7Cindex.html.htm
[15_CSS3_jQuery 3]: http://www.gbin1.com/technology/jquery/20130731-css3-jquery-transition-tutorials/3.jpg
[Download 3]: http://www.gbtags.com/gb/share/1537.htm
[Demo1]: http://www.gbtags.com/gb/demoviewer/1537/2525019a-7966-4f08-a8d5-2a4d4120b290/ExpandingOverlayEffect%7Cindex.html.htm
[Demo2]: http://www.gbtags.com/gb/demoviewer/1537/2525019a-7966-4f08-a8d5-2a4d4120b290/ExpandingOverlayEffect%7Cindex2.html.htm
[15_CSS3_jQuery 4]: http://www.gbin1.com/technology/jquery/20130731-css3-jquery-transition-tutorials/4.jpg
[Download 4]: http://www.gbtags.com/gb/share/1538.htm
[Demo 3]: http://www.gbtags.com/gb/demoviewer/1538/3a61482c-f687-4051-9031-7067333c3474/FullscreenBookBlock%7Cindex.html.htm
[15_CSS3_jQuery 5]: http://www.gbin1.com/technology/jquery/20130731-css3-jquery-transition-tutorials/5.jpg
[Download 5]: http://www.gbtags.com/gb/share/1539.htm
[Demo 4]: http://www.gbtags.com/gb/demoviewer/1539/7b20c9fb-9d8b-4f29-b1d9-b5837388b9ed/GammaGallery%7Cindex.html.htm
[15_CSS3_jQuery 6]: http://www.gbin1.com/technology/jquery/20130731-css3-jquery-transition-tutorials/6.jpg
[Download 6]: http://www.gbtags.com/gb/share/1540.htm
[Demo 5]: http://www.gbtags.com/gb/demoviewer/1540/644a67fa-bddc-42af-936f-dfb2d12c1b5f/InteractiveSVG%7Cindex.html.htm
[15_CSS3_jQuery 7]: http://www.gbin1.com/technology/jquery/20130731-css3-jquery-transition-tutorials/7.jpg
[Download 7]: http://www.gbtags.com/gb/share/1541.htm
[Demo 6]: http://www.gbtags.com/gb/demoviewer/1541/7ceaf8d4-3168-46c7-a3b7-9efc93e6db93/ThumbnailGridExpandingPreview%7Cadd.html.htm
[15_CSS3_jQuery 8]: http://www.gbin1.com/technology/jquery/20130731-css3-jquery-transition-tutorials/8.jpg
[Download 8]: http://www.gbtags.com/gb/share/1542.htm
[Demo 7]: http://www.gbtags.com/gb/demoviewer/1542/dcaa3af5-b74c-4704-a5dd-0fba82d0308e/VerticalShowcaseSlider%7Cindex.html.htm
[15_CSS3_jQuery 9]: http://www.gbin1.com/technology/jquery/20130731-css3-jquery-transition-tutorials/9.jpg
[Download 9]: http://www.gbtags.com/gb/share/1543.htm
[Demo1 1]: http://www.gbtags.com/gb/demoviewer/1543/6d88fbc5-77bd-4b7c-be7e-c7cd45145ebe/index.html.htm
[Demo2 1]: http://www.gbtags.com/gb/demoviewer/1543/6d88fbc5-77bd-4b7c-be7e-c7cd45145ebe/index2.html.htm
[Demo3]: http://www.gbtags.com/gb/demoviewer/1543/6d88fbc5-77bd-4b7c-be7e-c7cd45145ebe/index3.html.htm
[Demo4]: http://www.gbtags.com/gb/demoviewer/1543/6d88fbc5-77bd-4b7c-be7e-c7cd45145ebe/index4.html.htm
[Demo5]: http://www.gbtags.com/gb/demoviewer/1543/6d88fbc5-77bd-4b7c-be7e-c7cd45145ebe/index5.html.htm
[15_CSS3_jQuery 10]: http://www.gbin1.com/technology/jquery/20130731-css3-jquery-transition-tutorials/10.jpg
[Download 10]: http://www.gbtags.com/gb/share/1544.htm
[Demo1 2]: http://www.gbtags.com/gb/demoviewer/1544/085de33e-8888-4487-b64f-13d55e3bc6e5/index7.html.htm
[Demo2 2]: http://www.gbtags.com/gb/demoviewer/1544/085de33e-8888-4487-b64f-13d55e3bc6e5/index.html.htm
[Demo3 1]: http://www.gbtags.com/gb/demoviewer/1544/085de33e-8888-4487-b64f-13d55e3bc6e5/index2.html.htm
[Demo4 1]: http://www.gbtags.com/gb/demoviewer/1544/085de33e-8888-4487-b64f-13d55e3bc6e5/index3.html.htm
[Demo5 1]: http://www.gbtags.com/gb/demoviewer/1544/085de33e-8888-4487-b64f-13d55e3bc6e5/index4.html.htm
[15_CSS3_jQuery 11]: http://www.gbin1.com/technology/jquery/20130731-css3-jquery-transition-tutorials/11.jpg
[Tutorial]: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/css3-transitions-and-transforms-from-scratch/
[Demo 8]: http://webdesigntutsplus.s3.amazonaws.com/articles/042_css_animation_intro/demo.html/index.html
[15_CSS3_jQuery 12]: http://www.gbin1.com/technology/jquery/20130731-css3-jquery-transition-tutorials/12.jpg
[Tutorial 1]: http://geebart.com/blog/easy-css3-transitions-tutorial
[15_CSS3_jQuery 13]: http://www.gbin1.com/technology/jquery/20130731-css3-jquery-transition-tutorials/13.jpg
[Tutorial 2]: http://www.gbtags.com/gb/editpost.htm?postid=1505#developer.mozilla.org/en-US/demos/detail/paperfold-css
[Demo 9]: http://www.gbtags.com/gb/editpost.htm?postid=1505#developer.mozilla.org/en-US/demos/detail/paperfold-css/launch
[15_CSS3_jQuery 14]: http://www.gbin1.com/technology/jquery/20130731-css3-jquery-transition-tutorials/14.jpg
[Tutorial 3]: http://www.netmagazine.com/tutorials/build-portfolio-css3-transitions
[Demo 10]: http://www.netmagazine.com/files/tutorials/demos/2013/03/build-a-portfolio-with-css3-transitions/demo/demo.html
[Link 1]: http://www.gbtags.com/gb/share/1505.htm