zoukankan      html  css  js  c++  java
  • 干货分享 9款精挑细选的HTML5应用

    对于前端开发者来说,分享一些优秀的HTML5应用可以直接拿来用,更重要的是可以激发创作的灵感。今天我们要分享9款精挑细选的HTML5应用,个个都是干货。

    1、HTML5/CSS3滑块动画菜单 图标动画很酷

    CSS3菜单我们之前已经分享很多了,有3D菜单、下拉菜单、Tab菜单等,具体大家可以移步至CSS3菜单栏目下查找。今天我们要分享的这款HTML5/CSS3滑块动画菜单非常酷,鼠标滑过菜单项时会有一个漂亮的遮罩移动过来,并且这款动画菜单还有非常酷的图标,菜单整体效果很大气。

    html5-css3-fluid-menu-with-icon

    在线演示        源码下载

    2、HTML5 Canvas头发飘逸动画 很酷的HTML5动画

    HTML5 Canvas动画非常炫酷,很多有创意的开发者可以利用HTML5的Canvas特性创造出很多不错的动画特效。今天我们要分享一款HTML5 Canvas头发飘逸动画,该动画模拟头发飘动的效果,加上可爱的人脸,可以说非常有技术含量,更富有创意。

    html5-hair-animation

    在线演示        源码下载

    3、HTML5/CSS3带日期区间的日期选择插件

    今天我们来分享一款实用的HTML5/CSS3日期选择插件,这款日期选择插件的外观还是挺清新简易的,但是整体来说还是挺漂亮的。另外,该日期选择插件还有一个最大的特点,那就是可以自定义日期的区间,我们可以快速的制定区间范围内的日期,非常方便。

    html5-date-range-picker

    在线演示        源码下载

    4、HTML5小车动画 很酷的HTML5吉普车

    有几天没有分享HTML5动画了,之前很多HTML5动画都是利用CSS3的一些特性和Canvas特性来完成,比如这个HTML5/CSS3实现蝙蝠侠人物动画就利用CSS3的动画特性,HTML5 Canvas模拟衣服撕扯动画就利用了HTML5 Canvas特性。今天我们要分享一款利用HTML5/CSS3实现的吉普车动画,小车可以水平滚动,非常逼真。

    html5-css3-car-animation

    在线演示        源码下载

    5、HTML5 Canvas画板画图工具 可定义笔刷和画布

    HTML5 Canvas还有一个比较实用的应用,那就是网络画板,这样我们就可以在网页上直接进行画图操作。今天要分享的这款HTML5 Canvas画图工具就可以简单实现网络画图的功能,我们可以自定义笔刷的类型、粗细、颜色,也可以定义画布的大小和背景颜色等。我们也可以对这款HTML5画图工具进行扩展,让它的画图功能更加完善。

    html5-canvas-draw

    在线演示        源码下载

    6、HTML5/CSS3 3D文字特效 文字外翻效果

    之前我们分享过一款CSS3 3D文字特效HTML5/CSS3文字投影特效,加上投影和渐变,效果还是非常不错。今天我们再来分享一款很酷的HTML5/CSS3 3D文字特效,该文字特效的效果是鼠标滑过文字就会出现3D外翻的效果,非常不错的一款文字特效。

    html5-3d-letter-text

    在线演示        源码下载

    7、CSS3波浪形菜单 结合背景超级绚丽

    我们分享过许多各种各样的CSS3菜单,应该说效果都比传统的CSS菜单强悍。这次要分享的这款CSS3菜单有点特别,菜单的整体形状类似波浪形,鼠标滑过菜单项时也会改变背景色表示该菜单项被激活。另外该CSS3菜单结合不错的背景图片效果更加震撼。

    css3-wave-menu

    在线演示        源码下载

    8、HTML5/CSS3时尚的圆盘时钟动画 带当前日期

    我们可以利用HTML5和CSS3来实现一些钟表动画特效,效果都还不错。今天我们要分享一款利用HTML5和CSS3的圆盘时钟动画,时钟外观非常时尚。更重要的功能是,该HTML5时钟动画还带有当前的日期,这是很多时钟所没有的功能。

    html5-css3-clock-with-date

    在线演示        源码下载

    9、CSS3带图标提示插件 多主题颜色

    在网页中,我们操作完耗时的操作,最好给用户一个提示,这个CSS3插件就实现这个提示功能。该CSS3提示功能有几种不同的颜色,并且每一个提示框都有一个指定的小图表。用户可以点击关闭按钮来关闭提示框,提示框出现淡出的CSS3效果。

    css3-notification

    在线演示        源码下载

    以上就是9款精挑细选的HTML5应用,很不错吧,欢迎收藏。

    本文由html5tricks收集整理,转载请务必保留原文链接
    http://www.html5tricks.com/9-picked-html5-apps.html

  • 相关阅读:
    单例模式
    HashSet、LinkedHashSet、SortedSet、TreeSet
    ArrayList、LinkedList、CopyOnWriteArrayList
    HashMap、Hashtable、LinkedHashMap
    andrew ng machine learning week8 非监督学习
    andrew ng machine learning week7 支持向量机
    andrew ng machine learning week6 机器学习算法理论
    andrew ng machine learning week5 神经网络
    andrew ng machine learning week4 神经网络
    vue组件监听属性变化watch方法报[Vue warn]: Method "watch" has type "object" in the component definition. Did you reference the function correctly?
  • 原文地址:https://www.cnblogs.com/html5tricks/p/3653527.html
Copyright © 2011-2022 走看看