阅读更多

11顶
0踩

Web前端

原创新闻 20 个超酷的 HTML5/CSS3 应用及源码

2014-02-24 17:27 by 见习编辑 html5_dev 评论(5) 有32341人浏览
1、HTML5视频破碎重组特效,强大视觉冲击

HTML5视频播放器很多,但是HTML5视频特效还是很少见的,这款HTML5视频破碎重组特效非常刺激,给人强大的视觉冲击。点击视频任意地方,HTML5将会将这些区域击碎,过一段时间,这些被击碎的视频碎片又将自动重新组合。是一款非常不错的HTML5视频特效。



在线演示  /  源码下载

2、HTML5 3D Google搜索,小盒子大世界

HTML5真是能让人想象万千,居然动起了Google搜索的主意,它利用HTML5技术将Google搜索放到了一个小盒子里,弄起了3D搜索。随着鼠标移动,HTML5 3D搜索盒子也就转动,非常立体。点击搜索按钮,即可打开盒子进行Google搜索。



在线演示  /  源码下载

3、CSS3/jQuery创意盒子动画菜单

作为前端开发者,各种各样的jQuery菜单见过不少,这款jQuery/CSS3菜单却是别具一格,菜单项嵌入到九宫格中,像小盒子一样,加上温馨的背景,菜单整体外观十分可爱。点击菜单项,盒子就会展开,展示该菜单项具体的内容。该CSS3菜单在展开时也有不错的动画效果。



在线演示  /  源码下载

4、华丽的HTML5图表,可展示实时数据

HTML5在图表应用中也十分广泛,比起以前的网页图表,HTML5图表制作更便捷,功能更强大。这款HTML5图表插件外观十分华丽和专业,在数据展示方面也很有优势,图表不仅支持多维数据展示,而且支持区域选择数据功能,利用该HTML5图表可以更加方便地管理你的数据。



在线演示  /  源码下载

5、HTML5重力感应游戏,甩甩领导的头像

快过年了,工资没涨多少吧,年终奖没发吧,恨领导吧。现在利用这款HTML5重力感应游戏来尽情甩领导的头像吧。制作一些你憎恨的领导们的头像图片,利用该HTML5重力感应游戏插件来拖动鼠标甩动这些头像,叫你不加工资…叫你不加工资…



在线演示  /  源码下载

6、HTML5 3D立体图片旋转播放展示

自从HTML5技术的出现,我们可以在浏览器上看到越来越多的3D特效。这款HTML5 3D立体图片旋转播放展示工具就体现了强大的HTML5 3D功能。当然这需要支持HTML5 3D功能的浏览器才能观看这个3D图片演示。



在线演示  /  源码下载

7、HTML5中国象棋游戏,自定义象棋难度

棋类游戏在桌面游戏中已经非常成熟,中国象棋的版本也非常多。今天这款基于HTML5技术的中国象棋游戏非常有特色,我们不仅可以选择中国象棋的游戏难度,而且可以切换棋盘的样式。程序写累了,喝上一杯咖啡,和电脑对弈几把吧,相信这HTML5中国象棋游戏的实现算法你比较清楚,可以打开源码来研究一下这款HTML5中国象棋游戏。



在线演示  /  源码下载

8、HTML5播放器神话,卡带式古典播放器

这是一款样式非常古典,但又是非常时尚的HTML5播放器,说它是古典播放器,是因为这种卡带式的HTML5播放器比较古老,说它时尚,是因为现在的HTML5播放器很少有这种样式的,非常有创意。如果你想给你的个人主要添加一款个性化的播放器,那么这款HTML5卡带式古典播放器可以选择一下,个人认为这是HTML5播放器的神话,非常经典。



在线演示  /  源码下载

9、HTML5超级玛丽游戏重体验,HTML5游戏经典

还记得小时候一起玩过的超级玛丽冒险游戏吗?是的,那是我们小时候很火的一款游戏,今天老外利用HTML5技术让超级玛丽可以在网页上跑了,HTML5版的超级玛丽虽然没有原版的功能强大,但是如果你有兴趣,完全可以把它写完善了。HTML5真的很强大,HTML5游戏方面更是犀利。



在线演示  /  源码下载

10、浪漫程序员 HTML5爱心表白动画

我们程序员在追求爱情方面也是非常浪漫的,下面是一个HTML5爱心表白动画,画面非常温馨甜蜜,这样的创意很容易打动女孩,如果你是单身的程序员,也赶紧来制作自己的爱心表白动画吧。



在线演示  /  源码下载

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

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



在线演示  /  源码下载

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

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



在线演示  /  源码下载

13、纯CSS3发光登录表单

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



在线演示  /  源码下载

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

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



在线演示  /  源码下载

15、HTML5水波荡漾动画特效

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



在线演示  /  源码下载

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

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



在线演示  /  源码下载

17、HTML5吃豆人游戏PCMAN

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



在线演示  /  源码下载

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

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



在线演示  /  源码下载

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

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



在线演示  /  源码下载

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

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



在线演示  /  源码下载

关注ITeye官方微博 @ITeye官微,获得更多更新资讯。
  • 大小: 47.2 KB
  • 大小: 59.5 KB
  • 大小: 16.7 KB
  • 大小: 38.2 KB
  • 大小: 32.4 KB
  • 大小: 29.2 KB
  • 大小: 63.5 KB
  • 大小: 69.7 KB
  • 大小: 94.2 KB
  • 大小: 45.1 KB
  • 大小: 33 KB
  • 大小: 16.2 KB
  • 大小: 11.8 KB
  • 大小: 13.5 KB
  • 大小: 23.9 KB
  • 大小: 7 KB
  • 大小: 52.3 KB
  • 大小: 36.7 KB
  • 大小: 64.9 KB
  • 大小: 44 KB
来自: html5tricks
11
0
评论 共 5 条 请登录后发表评论
5 楼 futhead 2014-02-27 12:59
cool
4 楼 dsjt 2014-02-26 18:00
破碎的那个太牛逼了。
碎成渣了,每个碎片还在播放。
3 楼 _花间一壶酒_ 2014-02-26 16:12
2 楼 刘凯宁 2014-02-24 20:19
   太炫啦
1 楼 sxwgf001 2014-02-24 19:31
看上去很酷哦

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 分享9款最新超酷HTML5/CSS3应用插件

    新的一周开始了,小编继续要为大家分享实用超酷的HTML5应用,今天分享的这9款最新HTML5/CSS3应用你一定会很喜欢,一起来看看。 1、HTML5 Canvas模拟衣服撕扯动画 超级逼真 今天又要来推荐一款HTML5 Canvas动画,是一...

  • 12个经典大气的HTML5/CSS3应用动画

    2、HTML5/CSS3发光搜索表单 超酷CSS3表单 之前我们分享过一款纯CSS3实现的发光登录表单,发光特效非常不错。今天我们要再来分享一款放光表单,是一款CSS3发光搜索表单,表单整体是黑色的风格,搜索框被激活时,...

  • html5 css动画效果代码,超酷震撼 8个HTML5/CSS3动画应用及源码

    原标题:超酷震撼 8个HTML5/CSS3动画应用及源码HTML5可以制作非常华丽的动画效果,这点通过之前的分享学习我们已经有深刻的了解了,今天我们主要来分享一些HTML5结合CSS3形成的超炫震撼的动画应用以及它们的源代码,...

  • 7个最新jQuery/HTML5应用及源码下载

    这是一款基于jQuery和CSS3的动画Tab菜单,这款Tab菜单是以单选框Radio为原型的,通过CSS3样式特性对radio的渲染,形成了一个外观看上去像tab菜单的样子。另外特别的是,tab菜单在切换时内容页还会出现淡入淡出的动画...

  • 10 个超酷的 HTML5/CSS3 应用及源码

    1、CSS3密码强度验证表单,码速表样式 我们在网站上注册会员时,输入一个强大较大的密码会大大增加帐号安全性,那么什么样的密码才比较安全呢?这款CSS3密码强度验证表单插件可以... 在线演示 源码下载 ...2、纯CSS3

  • 分享8款最新超酷HTML5/CSS3特效及源码

    这次我们整理了8款最新的HTML5/CSS3特效及源码,这些特效包括HTML5文字特效、HTML5焦点图特效、CSS3/HTML5进度条特效等类型,一起来看看吧。 1、CSS3/jQuery全屏立体焦点图 时尚大气 jQuery是一个非常流行的...

  • 分享10 个超酷的 HTML5/CSS3 应用及源码

    1、HTML5视频破碎重组特效,强大视觉冲击 HTML5视频播放器很多,但是HTML5视频特效还是很少见的,这款HTML5视频破碎重组特效非常刺激,给人强大的视觉冲击。点击视频任意地方,HTML5将会将这些区域击碎,过一段时间...

  • 8款最新超酷HTML5/CSS3特效及源码

    这次我们整理了8款最新的HTML5/CSS3特效及源码,这些特效包括HTML5文字特效、HTML5焦点图特效、CSS3/HTML5进度条特效等类型,一起来看看吧。1、CSS3/jQuery全屏立体焦点图 时尚大气jQuery是一个非常流行的Javascript...

  • HTML5/CSS3超酷进度条 不同进度多种颜色

    这是一款线条状的CSS3进度条,这款进度条有两个特点:一是随着进度条的进度更新,都会有数字百分比实时显示,让数据更加直观;二是在不同的进度阶段,进度条的颜色会有所变化,这样能更好的反应当前的进度状态。加上...

  • html5+css3实现的超酷雪花飘落特效源码.zip

    html5+css3实现的超酷雪花飘落特效源码.zip

  • 精选10款超酷的html5 css3菜单,精选10款超酷的HTML5/CSS3菜单

    今天向大家精选了10款超酷的HTML5/CSS3菜单,给你的网页添加不一样的精彩,一起来围观一下吧。1、CSS3手风琴菜单 下拉展开带弹性动画利用CSS3技术可以实现各种各样的网页菜单,我们之前也在CSS3菜单栏目中分享了许多...

  • 风光储直流微电网Simulink仿真模型:光伏发电、风力发电与混合储能系统的协同运作及并网逆变器VSR的研究,风光储直流微电网Simulink仿真模型:MPPT控制、混合储能系统、VSR并网逆变器的设

    风光储直流微电网Simulink仿真模型:光伏发电、风力发电与混合储能系统的协同运作及并网逆变器VSR的研究,风光储直流微电网Simulink仿真模型:MPPT控制、混合储能系统、VSR并网逆变器的设计与实现,风光储、风光储并网直流微电网simulink仿真模型。 系统由光伏发电系统、风力发电系统、混合储能系统(可单独储能系统)、逆变器VSR?大电网构成。 光伏系统采用扰动观察法实现mppt控制,经过boost电路并入母线; 风机采用最佳叶尖速比实现mppt控制,风力发电系统中pmsg采用零d轴控制实现功率输出,通过三相电压型pwm变器整流并入母线; 混合储能由蓄电池和超级电容构成,通过双向DCDC变器并入母线,并采用低通滤波器实现功率分配,超级电容响应高频功率分量,蓄电池响应低频功率分量,有限抑制系统中功率波动,且符合储能的各自特性。 并网逆变器VSR采用PQ控制实现功率入网。 ,风光储; 直流微电网; simulink仿真模型; 光伏发电系统; 最佳叶尖速比控制; MPPT控制; Boost电路; 三相电压型PWM变换器;

  • 以下是针对初学者的 **51单片机入门教程**,内容涵盖基础概念、开发环境搭建、编程实践及常见应用示例,帮助你快速上手

    以下是针对初学者的 **51单片机入门教程**,内容涵盖基础概念、开发环境搭建、编程实践及常见应用示例,帮助你快速上手。

  • 【Python毕设】根据你提供的课程代码,自动排出可行课表,适用于西工大选课_pgj.zip

    【Python毕设】根据你提供的课程代码,自动排出可行课表,适用于西工大选课_pgj

  • 【毕业设计】[零食商贩]-基于vue全家桶+koa2+sequelize+mysql搭建的移动商城应用.zip

    【毕业设计】[零食商贩]-基于vue全家桶+koa2+sequelize+mysql搭建的移动商城应用

  • 电动汽车充电背景下的微电网谐波抑制策略与风力发电系统仿真研究,电动汽车充电微电网的谐波抑制策略与风力发电系统仿真研究,基于电动汽车充电的微电网谐波抑制策略研究,包括电动汽车充电负 载模型,风电模型,光

    电动汽车充电背景下的微电网谐波抑制策略与风力发电系统仿真研究,电动汽车充电微电网的谐波抑制策略与风力发电系统仿真研究,基于电动汽车充电的微电网谐波抑制策略研究,包括电动汽车充电负 载模型,风电模型,光伏发现系统,储能系统,以及谐波处理模块 风力发电系统仿真 ,电动汽车充电负载模型; 风电模型; 光伏发现系统; 储能系统; 谐波处理模块; 风力发电系统仿真,电动汽车充电微电网的谐波抑制策略研究:整合负载模型、风电模型与光伏储能系统

  • Vscode部署本地Deepseek的continue插件windows版本

    Vscode部署本地Deepseek的continue插件windows版本

  • 模拟电子学中滤波器的F0和Q参数详解及各类滤波器的设计方法

    内容概要:本文详细介绍了滤波器的两个关键参数——截止频率(F0)和品质因素(Q),并探讨了不同类型的滤波器(包括低通、高通、带通和带阻滤波器)的设计方法及其特性。文章首先明确了F0和Q的基本概念及其在滤波器性能中的作用,接着通过数学推导和图形展示的方式,解释了不同Q值对滤波器频率响应的影响。文中特别指出,通过调整Q值可以控制滤波器的峰谷效果和滚降速度,进而优化系统的滤波性能。此外,还讨论了不同类型滤波器的具体应用场景,如低通滤波器适用于消除高频噪声,高通滤波器用于去除直流分量和低频干扰,而带通滤波器和带阻滤波器分别用于选取特定频段信号和排除不需要的频段。最后,通过对具体案例的解析,帮助读者更好地理解和应用相关理论。 适合人群:电子工程及相关领域的技术人员、研究人员以及高校学生,特别是那些需要深入了解滤波器设计原理的人群。 使用场景及目标:适用于从事模拟电路设计的专业人士,尤其是希望掌握滤波器设计细节和技术的应用场合。目标是让读者能够灵活运用Q值和F0来优化滤波器设计,提升系统的信噪比和选择性,确保信号的纯净性和完整性。

  • QUARTEUSⅡ在EDA技术中的应用: CPLD/FPGA电路设计全流程解析与实例展示

    内容概要:本文主要讲述了利用QUARTUSⅡ进行电子设计自动化的具体步骤和实例操作,详细介绍了如何利用EDA技术在QUARTUSⅡ环境中设计并模拟下降沿D触发器的工作过程,重点探讨了系统规格设计、功能描述、设计处理、器件编译和测试四个步骤及相关的设计验证流程,如功能仿真、逻辑综合及时序仿真等内容,并通过具体的操作指南展示了电路设计的实际操作方法。此外还强调了QUARTUSⅡ作为一款集成了多种功能的综合平台的优势及其对于提高工作效率的重要性。 适用人群:电子工程、自动化等相关专业的学生或者工程师,尤其适用于初次接触EDA技术和QuartusⅡ的用户。 使用场景及目标:旨在帮助用户理解和掌握使用QUARTUSⅡ这一先进的EDA工具软件进行从概念设计到最后成品制作整个电路设计过程的方法和技巧。目标是在实际工作中能够熟练运用QUARTUSⅡ完成各类复杂电子系统的高效设计。 其他说明:文中通过具体的案例让读者更直观理解EDA设计理念和技术特点的同时也为进一步探索EDA领域的前沿课题打下了良好基础。此外它还提到了未来可能的发展方向,比如EDA工具的功能增强趋势等。

Global site tag (gtag.js) - Google Analytics