最新的Javascript和CSS应用技巧荟萃    
 

随着前端技术的发展,javascript和css在网站和web应用中展现出强大的统治力,特别是随着HTML5和CSS3的标准的成熟,我们可以使用javascript和css开发出你想都没有想到过的特效和动画,在今天的这篇文章中,我们将介绍一组相关CSS和javascript的强大教程和插件,希望大家喜欢!

CSS动画和过渡效果

随着CSS3标准的来到,CSS过渡效果和动画效果常常应用到互动的用户体验中,设计师可以通过CSS创建出令人惊叹的效果和体验,这里我们将挑选最棒的特效,希望大家能够从中受益。

 

使用jQuery和CSS3创建一个全屏幕幻灯效果

 

 

介绍一个使用jQuery实现的缩略图逼近效果。主要的想法是当鼠标接近缩略图后,当前的缩略图会放大,并且周围相邻的缩略图也会相应变大一些,当你移动鼠标时,会影响移动方向上的缩略图大小变化
 
 
 

互动的CSS3光线效果

使用3D变形,CSS梯度和Mask来来实现的光线效果,使用box-shadow和transform实现的阴影。

 

Interactive CSS3 Lighting Effects

CSS3 12面体

一个超棒的实验12面体,使用CSS变形和js脚本生成

 

CSS 3D 光线引擎

一个使用webkit对象实现的JavaScript类库可以添加简单的光线效果到DOM元素,同时你也可以添加其它引擎

 

3D Thumbnail Hover Effects With CSS

使用CSS3 3D变形生成的折叠效果,超棒并且整洁的动画效果

 

Slide In Image Boxes

当悬浮对象后创建滑进效果

 

CSS3 bitmap graphics

使用CSS生成的bitmap图形,没有图片,没有canvas,没有其他标签,使用CSS梯度来生成界面

Paperfold CSS

一个折叠效果的留言插件。

 

Beercamp: An Experiment With CSS 3D

一个帮助你了解SVG和CSS能够实现什么效果的文章。

 

Covers: A JS / CSS Experiment

使用CSS和javascript生成的音乐封面

 

Animation on Apple’s page

apple网站的iPhone 4S页面上应用的效果

 

Experimental animations for image transitions

一个3d图形过度效果,使用CSS3动画和jQuery

 

Maintaining CSS style states using “infinite” transition delays

这个演示允许你使用d-pad来移动角色,没有使用任何javascript。主要效果使用无限的过渡效果延迟。

 

CSS 3-D clouds

使用js和CSS3变形创建的3D云

 

动画弹出个人信息框

使用css过渡来实现的动画弹出profile菜单

 

CSS3 scrolling effects

各种滚动效果的类库,例如,curl,波浪,反转,飞行等等,使用CSS3和js实现。

 

Spin those icons with CSS3

一个简单的创建干净并且滚动的社交图标的文章

Scrolling the Z Axis with CSS 3D Transforms

如何创建z-scroll效果的文章

关联文档