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按钮。希望可以给大家带来灵感和学习制作技巧。

在线演示

源码下载

10.教程:让你的表单升级到CSS3和HTML5客户端验证

今天我们一起来看看如何创建一个实用并且功能强大的表单,表单使用如今最热门的技术HTML5和css3来创建,并且可以通过HTML5进行客户端验证。

在线演示

源码下载

未经允许不得转载:爱前端网 » 10款web前端的特效及源码下载

赞 (1) 打赏


觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏