10款web前端的特效及源码下载-爱前端网

1.JQUERY实现自适应缩略图桩效应与自动分组

这是用一个实验性的jQuery插件，将一组缩略图根据共享数据属性组合（下文将会讲到）堆在一起，当点击其中的一个缩略图组合时，属于这个组合里面的缩略图将会通过CSS转换扩散到一个网格布局里。

在线演示

源码下载

2.HTML5+CSS3城市场景动画

今天就为大家分享一个用HTML5+CSS3制作的城市场景动画，动画包含了白天到夜晚的渐变动画以及太阳、云朵、气球等动画效果；除此之外，页面的视觉效果采用了插画的设计风格，希望大家会喜欢。

在线演示

源码下载

3.创意CSS3头像展示

今天就为大家分享一个非常有创意的CSS3头像展示效果，交互性强，是一个基于css3和js来实现的，代码量不多，但是最终的效果却很让人赞叹，所以特别推荐给大家。其中关于本示例的一些css样式呈现，个人认为还有很大的发挥空间，例如鼠标经过的时候而不是切换成一个背景色和文字，而是替换成其他的相关图片（例如改为人物的其他表情），这将会是非常的有意思的。

在线演示

源码下载

4.盛开的CSS3梦幻荷花

这是一个利用css3制作的动画，众所周知，用css3制作动画可以用Animation和transform属性来实现。我们通过官方的介绍，都大概的了解这两个属性，但展示出来的动画示例大都是比较简单的。

在线演示

源码下载

5.CSS3闪烁跳跃的进度条

今天为大家带来另一款更具个性化的进度条：CSS3闪烁跳跃的进度条。

在线演示

源码下载

6.CSS3动画条纹边框

今天也同样为大家分享一篇用css3制作的动画条纹边框，效果还是蛮有趣的，推荐大家用一用、玩一玩。

在线演示

源码下载

7.纯CSS3打造精致时钟

今天为大家分享一个纯CSS3打造的精致时钟，没有用到任何的图片和 js 。该时钟有时针、分针以及秒针，在时钟的圆盘内，都有详细的刻度标记，在时间中央还有数字时钟显示，功能可谓十分强大，界面十分精致。在css3的渲染下，拥有华丽的视觉界面，这个纯css3精致时钟，你值得拥有！

在线演示

源码下载

8.3D多角度翻转圆形幻灯片

今天就为大家分享一个简单而有趣的3D多角度翻转圆形幻灯片，这是一个实验性的小插件，会根据你鼠标在圆圈内的位置（顶部、中部和底部），出现相对应的导航箭头，当点击导航箭头时，圆圈内的图片会出现3D翻转效果，而翻转角度会随着你点击的位置而不同。这个插件的效果非常的酷和有趣，希望可以运用到我们的项目中。

在线演示

源码下载

9.多种颜色和形状的CSS按钮

随着css技术的发展，如今我们可以很轻易的通过设置渐变、阴影、圆角等特效来制作一个新颖而漂亮的按钮。用css制作按钮一般都离不开几个属性：border-raidus、text-shadow、box-shadow、gradient、font-face等等，当然还可以结合伪类（:before、:after）和动画（animation）属性来进行创新和交互。对于前端人员来说，这是一个必不可少的研究范围，当然还得需要我们的设计灵感。虽然说现在的css技术可以代替图片实现一些很优秀的按钮效果，但是我们还是得拿起我们手中的画笔和Photoshop，静下心来默默的绘制我们心中的按钮。今天就为大家分享一套拥有多种颜色和形状的css按钮。希望可以给大家带来灵感和学习制作技巧。