2012年即将过去，在这一年里，很多流行的前端效果都被展现了出来，我们最常见的打开一个网站，瀑布流映入眼前，动画延迟加载也被很好的发挥，良好的title工具提示也有大的使用，等等，还有很多影响着前端界面的新技术被应用，因此年底有必要对12年使用到的新技术进行汇总

我已经把我个人最喜欢的教程进行了收集，这些教程主要集中在网络技术，如动态横幅，导航菜单，照片幻灯片，以及表单输入的影响，如果本文章对你有帮助，请推荐一下，让更多的开发者受益

你是否也在寻找

在本教程中我们要使用单选按钮执行一些简单的 内容标签：

 

 

 

这个教程使用CSS3动画来增添我们的网页横幅广告，广告或任何内容

这个教程告诉你如何创建一些简单的动​​画工具提示使用  transitions 和伪类 :before and :after，目前很流行的前端设计，值得推荐

在本教程中，我们将创建逼真的开关按钮，使用伪元素和复选框。

在本教程中，将告诉你只用一个锚标记如何创建与扭曲的按钮

这个教程我向您展示如何创建一个具有响应性，的内容导航样式

一个jQuery插件将下拉列表中选择输入转化成一些简单的扩大效果。值得推荐

在过去的几年里，我们已经看到了很多的单页网站，他们中的大多数使用的一些过渡效果。好了，这个教程教你如何使用CSSTransitions 和 the :target property属性来执行CSS3过度效果

有关如何创建一个简单的实时显示的位置，游客在互动地图上使用Node.js和HTML5地理定位API的应用程序的一个教程。

在本教程中，我们将使用了一些有趣的CSS技术和HTML5技术创建一些现代性和创造性登录表单。

让我们创建一些有趣的和现代风格的block quotes。我们将使用不同的技术来创造独特的外观。

在本教程中，我们将创建一个非常简单的和敏感产品的网上商店或组合滑块

这个教程向您展示如何创建一些巧妙的滑动图像只用CSS面板。我们的想法是，当点击标签时会使用面板的背景图片和动画

使用隐藏的输入和标签，我们将创建一个CSS手风琴

 

　Baraja 是一个简单易用的 jQuery 插件，它能让你实现像摆放扑克牌一样来显示图片以及洗牌式的切换效果。此插件基于 CSS3 的变换效果而实现。它可让你设置图片展开的速度，顺时针或逆时针展开，切换效果(淡入淡出等)等等。

个教程如何创建一个实验性的CSS只带3D效果的时间表。

快速提示有关如何创建一些简单的定时与CSS动画的通知。我们的想法是与一个特定的时间的进度条显示通知，然后让它消失

使用CSS过渡和3D旋转圆有关如何创建不同的有趣的悬停效果的一个教程

在本教程中，我们将创建一个图像手风琴，使用sibling选择符和一个嵌套的结构，我们可以控制项目/幻灯片的单选按钮。

在本教程中，我们将创建一个幻灯片使用了CSS3属性的视差效果。

如何创建一些自定义的下拉列表中的教程。我们会告诉你5个不同的下拉菜单，并列出各种用途的例子。

一个教程：如何创建一个全屏幕幻灯片打开当前幻灯片时，导航到下一个或上一个。使用jQuery和CSS动画的内容元素，我们可以创造出独特的幻灯片切换效果。

创建一个CSS唯一的全屏背景图片的幻灯片。我们将创建不同的图像转换，也使用CSS动画创建标题。

使用它可以创建动态的类似书本翻页效果的幻灯。希望大家喜欢!

如何创建一个100％的宽度和高度平滑滚动使用单选按钮，导航和选择符，我们会触发相应的内容面板，创建一个“平滑滚动”的效果。

有关如何创建一个组件，它可以让你打开和旋转的样本我们将使用CSS转换和过渡，创建一个简单的jQuery插件。

在本教程中，我们将介绍一些基本的D3.js，并创建一个信息图表与多个区域图以及上下文工具进行缩放和平移的数据。

一个3D菜单概念餐厅网站。我们的想法是一个折叠的传单，将其展开，以显示菜单项。

一个教程如何创建一个三板的jQuery图像滑块具有3D外观和图像转换效果。

在本教程中，将告诉你如何使一些有创意的CSS只加载动画。

在今天的教程中，我们将向您展示如何创建一些可爱的照片带

使用BigVideo.js有关如何创建一个类似幻灯片的全屏视频背景的

如何创建一个叠加效应的项目或图像

这个jQuery插件，可以自动分组缩略图，点击缩略图将调转到具有共同属性的一组数据

 

 

 

123