zoukankan      html  css  js  c++  java
  • 10 个超酷的 HTML5/CSS3 应用及源码

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

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

    10 个超酷的 HTML5/CSS3 应用及源码 - 爱七七五八网 - 1

    在线演示

    源码下载

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

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

    10 个超酷的 HTML5/CSS3 应用及源码 - 爱七七五八网 - 2

    在线演示

    源码下载

    3、纯CSS3发光登录表单

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

    10 个超酷的 HTML5/CSS3 应用及源码 - 爱七七五八网 - 3

    在线演示

    源码下载

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

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

    10 个超酷的 HTML5/CSS3 应用及源码 - 爱七七五八网 - 4

    在线演示

    源码下载

    5、HTML5水波荡漾动画特效

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

    10 个超酷的 HTML5/CSS3 应用及源码 - 爱七七五八网 - 5

    在线演示

    源码下载

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

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

    10 个超酷的 HTML5/CSS3 应用及源码 - 爱七七五八网 - 6

    在线演示

    源码下载

    7、HTML5吃豆人游戏PCMAN

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

    10 个超酷的 HTML5/CSS3 应用及源码 - 爱七七五八网 - 7

    在线演示

    源码下载

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

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

    10 个超酷的 HTML5/CSS3 应用及源码 - 爱七七五八网 - 8

    在线演示

    源码下载

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

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

    10 个超酷的 HTML5/CSS3 应用及源码 - 爱七七五八网 - 9

    在线演示

    源码下载

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

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

    10 个超酷的 HTML5/CSS3 应用及源码 - 爱七七五八网 - 10

    在线演示

    源码下载

    本文固定链接: http://www.i7758.com/archives/1310.html

  • 相关阅读:
    Android内存优化5 了解java GC 垃圾回收机制3
    一起刑事案件法庭辩护 z
    辩护技巧总结——律师在刑事辩护中应注意的几个问题 z
    证据对抗、证据链标准 z
    里德九步审讯法 z
    WCF服务在高并发情况下报目标积极拒绝的异常处理 z
    C#EasyHook例子C# Hook 指定进程C#注入指定进程 z
    玄机论坛Socket类库源码 当前版本 2.6.3 更新日期:10-09/2015 z
    庭审全程文字实录 z
    庭审精彩语录整理 z
  • 原文地址:https://www.cnblogs.com/i7758/p/4440712.html
Copyright © 2011-2022 走看看