澳门新葡萄京官网首页 30

澳门新葡萄京官网首页10 个超酷的 HTML5/CSS3 应用及源码

今天向大家分享12款经典实用的jQuery/CSS3插件,欢迎分享收藏。

1、CSS3密码强度验证表单,码速表样式

1.HTML5 Canvas 3D波浪翻滚动画

之前我们分享过好几款基于HTML5 Canvas的波浪和水波纹动画,比如这款HTML5
3D波浪起伏动画特效和这款超酷无比的HTML5
WebGL水面水波荡漾特效。今天我们要介绍一款也是基于HTML5
Canvas的波浪翻滚动画,它同样有着3D立体的视觉效果,同时波浪在起伏时也伴随的浪花汹涌的动画特效,看上去非常炫酷。

澳门新葡萄京官网首页 1

在线演示

源码下载

1、jQuery三维动态柱形图表

这虽然是一款jQuery三维图表,但却没有利用任何CSS3的属性,主体的顶部、中间部分、底部三部分图片组成。

澳门新葡萄京官网首页 2

在线演示    /  
 源码下载

我们在网站上注册会员时,输入一个强大较大的密码会大大增加帐号安全性,那么什么样的密码才比较安全呢?这款CSS3密码强度验证表单插件可以提示你当前输入密码的安全级别,有意思的是该密码强度验证插件的样式酷似码速表,随着密码强度的加大,码速表指针就会顺时针旋转,当然旋转的特效是利用CSS3结合jQuery实现的。

2.jQuery实现Tooltip弹出样式的分享按钮

这是一款比较实用而美观的jQuery分享按钮插件,和前面分享又一波CSS3社会化分享图标
可旋转和悬停和一大波CSS3社会化分享图标按钮相比,这款分享按钮并没有提供大量的社交网站的按钮图标,但是它的特点是点击分享按钮时,会以Tooltip弹出框的样式显示分享按钮,并且在弹出时伴随着左右摇晃的动画特效。

澳门新葡萄京官网首页 3

在线演示

源码下载

2、纯CSS3实现3D牛奶样式按钮

这是一款基于纯CSS3实现的3D白色按钮,按钮的样式就像牛奶一样,3D效果非常突出。

澳门新葡萄京官网首页 4

在线演示    /  
 源码下载

澳门新葡萄京官网首页 5

3.超酷的jQuery带验证登录表单 注册登录可自由切换

今天我们要给大家带来一款非常实用的jQuery登录表单插件,这款jQuery登录表单的特点是可以对一些注册登录时常用的字段类型进行简单的验证,比如电子邮件格式和必填检查。另外还有一个特点是我们可以在同一个页面完整注册或者登录操作,方便用户在不跳转页面的情况下进行注册或者登录。

澳门新葡萄京官网首页 6

在线演示

源码下载

3、JS游戏人物跑步动画特效

用JS实现人物跑步动画其实比较简单,就是通过多张跑步图片组合起来形成跑步的动画特效。

澳门新葡萄京官网首页 7

在线演示    /  
 源码下载

在线演示

4.纯CSS3实现个性化笑脸表情开关切换按钮

很早以前,我给大家分享过很多比较有特色的自定义开关切换按钮,主要是用这些开关切换按钮来替换浏览器默认的单选框和复选框。这次我给大家带来另外一款基于纯CSS3的个性化开关切换按钮,这个“开关”是一个笑脸和哭脸切换的小图标表情,非常可爱。

澳门新葡萄京官网首页 8

在线演示

源码下载

4、jQuery/CSS3密码强度验证登录表单

这是一款很酷的密码强度验证登录表单,密码强度验证器类似速度表,随着密码强度的增强而旋转。

澳门新葡萄京官网首页 9

在线演示    /  
 源码下载

源码下载

5.HTML5 Canvas 3D线条凹凸人物头像

美术是一项神奇的技术,就像这款HTML5
Canvas头像一样,仅仅用线条的凹凸走向,就可以绘制出一个3D样式的人物头像。这款人物头像是在HTML5
Canvas画布上绘制而成,并且可以随着鼠标移动而呈现不同角度的观察效果。

澳门新葡萄京官网首页 10

在线演示

源码下载

5、jQuery购物车自动计算金额表单

这款基于jQuery的购物车自动结算插件非常不错,输入产品数量能非常快地计算所有产品的金额。

澳门新葡萄京官网首页 11

在线演示    /  
 源码下载

2、纯CSS3 Android Logo动画绘制,小手还会动

6.HTML5 Canvas 液体流动样式Loading加载动画

之前我们分享过很多基于jQuery和HTML5的Loading加载动画,比如这款HTML5
Canvas发光Loading动画就是基于Canvas的。今天我们要分享另外一款基于HTML5
Canvas的液体流动样式Loading加载动画,这款Loading动画在加载时会呈现液体流动的动画效果,并且由于和背景颜色的对比,也略微呈现发光的动画效果。

澳门新葡萄京官网首页 12

在线演示

源码下载

6、纯CSS3实现GIF图片进度加载效果

我们经常会用gif图片在做加载进度动画,如今我们可以用纯CSS3来实现相同的效果,CSS3实现加载动画可以节省图片加载时间。

澳门新葡萄京官网首页 13

在线演示    /  
 源码下载

利用CSS3可以绘制很多复杂的图案图标,今天就利用纯CSS3实现Android
Logo图标,该CSS3 Android
Logo主要利用了CSS3中的圆角等属性,绘制出来的Logo非常逼真,同时该Android
Logo还有动画效果,鼠标滑过Android小人的头和手时,小手还能够挥动。

7.纯CSS3实现会跳舞的动画树

之前我们分享过一款基于HTML5
SVG的跳舞花朵,非常的可爱。今天我们要介绍一款纯CSS3实现的会跳舞的动画树,首先我们用CSS3绘制树枝和树叶,注意树枝的画法是利用了二叉树原理,在树枝最末端绘制树叶。同时树枝可以任意方向摇摆,形成跳舞的动画效果。

澳门新葡萄京官网首页 14

在线演示

源码下载

7、CSS3定时提示动画特效

这款CSS3特效可以帮助你定时提示,中间每一个待提示的事件都会有进度条显示。

澳门新葡萄京官网首页 15

在线演示    /  
 源码下载

澳门新葡萄京官网首页 16

8.jQuery前端验证码插件 支持多种验证方式

目前有很多种形式的网页表单验证码,有相对传统的图片验证码、语音验证码,也有比较智能的云端验证码。今天我们要分享一款基于jQuery的前端验证码插件,这款插件支持大部分形式的验证码方式,有图片文字方式、滑块方式等,当然我们只要将验证码特征值保存在服务器上,就可以实现比较安全的表单提交验证了。

澳门新葡萄京官网首页 17

在线演示

源码下载

  • 本文固定链接: 

8、jQuery自动输入各大邮箱智能提示

这款基于jQuery的表单智能提示插件可以帮助你快速输入各大邮箱地址,邮箱地址可以自己定义,非常方便。

澳门新葡萄京官网首页 18

在线演示    /  
 源码下载

在线演示

9、jQuery自定义样式下拉列表

下拉菜单可以有很多样式和下拉方式,这款jQuery自定义下拉列表插件允许你轻松完成漂亮的下拉列表定制工作。

澳门新葡萄京官网首页 19

在线演示    /  
 源码下载

源码下载

10、jQuery/CSS3洗牌效果图片层叠动画

这是一款非常漂亮的jQuery图片特效插件,按住箭头按钮或者拖动滚动条即可展示图片洗牌特效。

澳门新葡萄京官网首页 20

在线演示    /  
 源码下载

3、纯CSS3发光登录表单

11、jQuery倒数计时插件

每倒数一秒,伴随数字下落动画,非常酷的jQuery倒数计时插件。

澳门新葡萄京官网首页 21

在线演示    /  
 源码下载

我们见过很多CSS3表单,制作都非常精美,今天介绍的这款CSS3表单不但外观华丽,而且伴有颜色发光动画。当鼠标激活表单时,表单周围就会出现颜色渐变的发光动画,配合黑色的背景,整个CSS3表单显得格外亮丽。更重要的是,这个CSS3发光表单基本用CSS3实现,很少的JS代码,在CSS3引擎上优化非常明显。

12、jQuery 3D 图片播放焦点图插件Adaptor

这是一款基于jQuery的焦点图插件,它可以选择多种切换方式,如果你的浏览器支持3D功能,焦点图就能3D切换图片。

澳门新葡萄京官网首页 22

在线演示    /  
 源码下载

以上就是12款经典实用的jQuery/CSS3插件,特效均来自网络,由网页素材大全网站整理发布,转载请注明原文链接:

澳门新葡萄京官网首页 23

在线演示

源码下载

4、CSS3 3D进度条按钮 18款精美样式

我们在网页上提交数据的时候经常会看到进度条,不过大部分进度条都是在网页其他地方显示,比如弹出一个窗口。这款CSS3实现的进度条是显示在按钮上的,可以更直观的体现出用户提交的进度情况,该CSS3进度条按钮样式非常漂亮,在支持3D的浏览器上还能有3D立体的效果,而且进度条展现形式很多,一共18种样式。

澳门新葡萄京官网首页 24

在线演示

源码下载

5、HTML5水波荡漾动画特效

在现实生活中,我们经常可以看到水波的效果,雨滴落到小河中,河里必定泛起了水波。今天我们用HTML5模拟了水波荡漾效果,点击河水的图片,即可从点击处开始泛起水波,并向远处伸展。这个利用HTML5模拟出来的水波效果非常逼真,不过有点耗CPU。

澳门新葡萄京官网首页 25

在线演示

源码下载

6、HTML5雨点下落动画,让雨点飞起来

利用HTML5实现雨点下落需要注意一下几点:1、雨点的大小和形状;2、雨点下落的速度控制,注意应该是加速下落。这个演示动画就很生动的模拟了雨点下落动画。当鼠标移上去时,就会形成3个雨点并向下掉落。HTML5技术真的非常方便。

澳门新葡萄京官网首页 26

在线演示

源码下载

7、HTML5吃豆人游戏PCMAN

今天又要介绍一款不错的HTML5游戏,HTML5吃豆人游戏,画面上有一个吃豆人和一群怪物,你需要控制吃豆人移动吃掉路上的小豆子,一旦吃豆人遇到怪物被吃掉的时候,你就GAME
OVER了。这款HTML5游戏还有一点没完善,就是吃豆人碰到怪物的时候不能被怪物吃掉,有兴趣的同学可以继续把它完善。HTML5游戏开发不仅需要技术,也需要创意。

澳门新葡萄京官网首页 27

在线演示

源码下载

8、HTML5像素粉碎图片动画,图片洒落一地

这款HTML5图片动画特效你绝对想不到,它将一张图片粉碎成许多像素颗粒,点击图片后,这些像素颗粒边掉落在地上,继续点击,粉碎的像素图片颗粒又会重新组合成完整的图片。用HTML5技术实现这种图片粉碎效果还是挺简单的,有兴趣的同学可以下载源码来学习。

澳门新葡萄京官网首页 28

在线演示

源码下载

9、HTML5太空战机游戏,有声有色

这又是一款制作精良的HTML5游戏,该HTML5游戏的主角是一架英勇威武的太空战机,进入游戏后按”Z”键发射子弹,消灭敌机。该HTML5战机游戏的特点是:1、游戏画面非常华丽逼真,并且加入声音元素,让游戏更加迷人;2、游戏元素很多,敌机类型和发射子弹类型也很多,让玩家不会枯燥。

澳门新葡萄京官网首页 29

在线演示

源码下载

10、HTML5动画图片播放器,高端大气

我们见过很多图片播放插件(焦点图),很多都基于jQuery。今天介绍的HTML5图片播放器很特别,它不仅在图片间切换有过渡动画效果,而且在切换时图片中的元素也将出现动画效果,比如图中的文字移动、打散、重新组合等。这款HTML5动画图片播放器算得上是高端大气上档次。

澳门新葡萄京官网首页 30

在线演示

源码下载

本文固定链接: 

发表评论

电子邮件地址不会被公开。 必填项已用*标注