阅读更多

8顶
0踩

Web前端

原创新闻 12 款实用的 HTML5 干货分享

2014-04-30 11:25 by 见习编辑 html5_dev 评论(5) 有8077人浏览
今天我们要来分享12款实用的HTML5应用插件,内容涉及到按钮、表单、进度条、图片等,大家一起来看看这些干货吧。

1、漂亮的CSS3动画进度条,可自定义进度条颜色

今天我们要再来分享一款很漂亮的CSS3动画进度条,我们可以用它来显示每一项数据的所占的比例,效果很不错。



在线演示  /  源码下载

2、CSS3垂直图标菜单,带Tooltip提示框

今天我们要来分享一款CSS3菜单,菜单外观很漂亮,是垂直排列的小图标,鼠标滑过菜单项时,菜单项的背景会填充渐变的颜色,另外还会弹出该菜单项描述的Tooltip提示框。



在线演示  /  源码下载

3、纯CSS3背景渐变按钮,按钮图标淡入淡出动画

今天我们要再来分享一款纯CSS3实现的按钮动画,这款按钮动画有以下特点:当鼠标滑过按钮时,按钮上的小图标便会以爆炸的方式淡出按钮,取代它的时相应的文字,当鼠标离开按钮时,小图标又会以爆炸的方式淡入按钮中。



在线演示  /  源码下载

4、HTML5 3D立方体旋转动画

今天我们再来分享一款绚丽的HTML5 3D立方体旋转动画,这款立方体的色彩看上去非常艳丽,旋转起来的动画效果也十分流畅。是一款很不错的HTML5 3D动画效果。



在线演示  /  源码下载

5、动感的CSS3 Loading文字特效

这是一款非常帅的CSS3 Loading加载动画,尽管看上去只有Loading这几个字母,但是利用CSS3特性,可以把这几个字母渲染得非常动感。



在线演示  /  源码下载

6、CSS3多样式小图标按钮,带分享按钮

今天我们要来分享一款样式非常丰富的CSS3按钮特效,这些按钮的外观有点仿谷歌的风格,而且每一个按钮带有个性的小图标。另外按钮有一个特点,还可以定制出不错的分享按钮。



在线演示  /  源码下载

7、纯CSS3实现滑杆开关切换按钮动画

今天我们要再来分享一款纯CSS3实现滑杆开关切换按钮动画,这个按钮是一个摇杆,杆子推上推下来切换开关状态,不同的开关状态也有不同颜色的指示灯。



在线演示  /  源码下载

8、HTML5/CSS3牙刷动画,模拟真实刷牙效果

今天我们再要来分享一款不错的HTML5/CSS3动画效果,你一个可爱的牙刷,牙刷外观是利用纯CSS3绘制出来的,也比较简单。另外是刷牙动画,看起来非常搞笑,像真的刷牙一样,左刷刷,右刷刷,非常可爱的牙刷动画。



在线演示  /  源码下载

9、CSS3可视化网页编辑器,基于tinymce编辑器

今天我们要来分享一款基于tinymce的CSS3可视化网页编辑器,编辑器功能相当完善,可以对文本进行各种操作,也可以添加链接和对齐文本。是一款功能更加强大网页编辑器。



在线演示  /  源码下载

10、CSS3实现一款联系表单,输入框带小图标

今天我们再来分享一款外观还不错的CSS3联系表单,这款CSS3联系表单的输入框带有小图标,并且在提交信息时能校验输入的信息。



在线演示  /  源码下载

11、HTML5/CSS3多颜色柱状图表,带基准数据线

这次要分享的HTML5柱状图表也非常不错,它有多种颜色来表示不同的数据。最大的特点是这款HTML5带有基准数据线,可以直观地看到每个数据项相对基准值的偏差。



在线演示  /  源码下载

12、HTML5/CSS3图片描述效果,文字描述浮动在图片上

今天要分享一款基于HTML5和CSS3的图片特效,该图片特效非常实用,可以让你网页上的图片在鼠标滑过时在图片上方浮现一些描述文字,该描述文字在展现出来的时候有淡入淡出的动画效果,同时描述文字的样式也可以自定义多样化,是一款非常不错的HTML5图片特效。



在线演示  /  源码下载

本文由html5tricks收集整理,原文链接:http://www.html5tricks.com/12-html5-gan-huo.html
  • 大小: 30.4 KB
  • 大小: 7.9 KB
  • 大小: 48 KB
  • 大小: 54.3 KB
  • 大小: 15.4 KB
  • 大小: 21.3 KB
  • 大小: 12.3 KB
  • 大小: 9.3 KB
  • 大小: 23 KB
  • 大小: 21.4 KB
  • 大小: 17.3 KB
  • 大小: 34.2 KB
8
0
评论 共 5 条 请登录后发表评论
5 楼 9809121 2014-06-28 10:11
mark下,觉得真不错啊
4 楼 slfujie312 2014-05-05 13:56
mark mark mark
3 楼 lileihefei 2014-05-05 10:18
   mark
2 楼 boyliuxi 2014-05-04 11:55
mark~~~~~
1 楼 sxwgf0003 2014-04-30 12:55
mark 

发表评论

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

相关推荐

  • 12款实用的HTML5干货分享.zip

    CSS3多样式小图标按钮 带分享按钮.rar CSS3实现一款联系表单 输入框带小图标.rar HTML5 3D立方体旋转动画.rar HTML5_CSS3图片描述效果 文字描述浮动在图片上.rar HTML5_CSS3多颜色柱状图表 带基准数据线.rar ...

  • 12款实用的HTML5干货分享.7z

    12个超酷H5源码,【32赞HTM5响应式系列之右侧多级滑动式】仿Slideby触屏版html5响应式手机wap网站模板 等12套,供大家一起共同分享学习,大神必备神器,导入即用!

  • 12款实用的HTML5干货分享

    包含12款实用的HTML5实例源码:解压密码:icloudedu.org CSS3垂直图标菜单-带Tooltip提示框 CSS3多样式小图标按钮-带分享按钮 CSS3可视化网页编辑器-基于tinymce编辑器 ...12款实用的HTML5干货分享.rar

  • html5学习资源,【干货】分享7个实用的HTML5学习资源

    原标题:【干货】分享7个实用的HTML5学习资源虽然HTML5还是很新,没有被所有主要浏览器支持,但现在还是有许多设计师和开发人员使用。毫无疑问,几年下来,HTML5将对web开发起着很重要的作用。我注意到很多人都在...

  • python实用工具_干货分享!5款超级实用的Python工具库

    在之前文章中我已多次分享过一些实用的工具,今天我再分享 5 款非常实用的工具:1、BlackBlack 是一款非常棒的Python代码美化/格式化库。使用它,你完全可以放弃手工格式化的操作。Black 可让你的代码快速美化,同时...

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

    今天我们就接着来分享第二波干货,也是基于HTML5和CSS3的动画应用,将涉及到HTML5表单、HTML5图片特效以及HTML5图表等应用领域,希望大家会喜欢。 1、HTML5/CSS3自定义下拉框 3D卡片折叠动画 之前我们分享过一款CSS3...

  • 干货分享!5款超级实用的Python工具库!

    在之前文章中我已多次分享过一些实用的工具,今天我再分享 5 款非常实用的工具: 1、Black Black 是一款非常棒的Python代码美化/格式化库。使用它,你完全可以放弃手工格式化的操作。Black 可让你的代码快速美化,...

  • 干货分享 9款精挑细选的HTML5应用

    今天我们要分享9款精挑细选的HTML5应用,个个都是干货。 1、HTML5/CSS3滑块动画菜单 图标动画很酷 CSS3菜单我们之前已经分享很多了,有3D菜单、下拉菜单、Tab菜单等,具体大家可以移步至CSS3菜单栏目下查找。...

  • jquery模版大全(javaweb论坛模块源码 网站模版HTML 精挑细选的HTML5应用 jsp实例 ).zip

    12款实用的HTML5干货分享 9款精挑细选的HTML5应用 Html5_3D相册 二十多套后台后管理系统网站模版HTML,经典实用 网站模板100例在线客服模版 淘宝模版 网站后台模版 超市库存系统 chaoshikucun_a5 cwbbs2 cwbbs2.4_...

  • 与html语言有关的动画,9个超级实用的html5动画

    HTML5被公认为下一代的Web语言。它被喻为终将改变移动...分享之前还是要推荐下我的前端学习群:524262608,不管你是小白还是大牛,我都欢迎,不定期分享干货,包括我自己整理的一份2017最新的前端资料和0基础入门教...

  • 15款HTML5/CSS3案例展示,导航,日历,钟表。

    对于前端开发者来说,分享一些优秀的HTML5应用可以直接拿来用,更重要的是可以激发创作的灵感。今天我们要分享9款精挑细选的HTML5应用,个个都是干货。 1、HTML5/CSS3滑块动画菜单 图标动画...

  • 【干货分享】我个人觉得适合软件计算机专业大学生使用的几个实用网站!

    今天来分享一下我自己(本科软件工程在读)常用的一些适合计算机和软件专业大学生使用的网站。 1.软件目录 https://mp.weixin.qq.com/s/zeq1sTmaPsKt7Bsok0Ldrg vs,python,pychar,IDEA,SQL SERVER,MySQL等等...

  • 干货分享:实用/高效/有逼格的Android Studio 常用配置/插件推荐

    最近一些刚踏上Android开发这条路的童鞋问了一些Android Studio使用...方法类注释模板怎么设置,代码风格主题怎么换等等问题,这里就基于自己平时开发习惯整理下解决办法,以及分享一些好用的配置及提高android stud

  • 干货!几个灰常实用的React实践技巧(收藏)

    背景Hooks 自推出以来就很火, 它改变了我们编写React 代码的方式, 有助于我们写更简洁的代码。今天这边文章不是说Hooks的,Hooks之外, 还有很多实用的技巧可以帮助我们便...

  • polylearn-0.1.dev0-cp35-cp35m-win32.whl.rar

    python whl离线安装包 pip安装失败可以尝试使用whl离线安装包安装 第一步 下载whl文件,注意需要与python版本配套 python版本号、32位64位、arm或amd64均有区别 第二步 使用pip install XXXXX.whl 命令安装,如果whl路径不在cmd窗口当前目录下,需要带上路径 WHL文件是以Wheel格式保存的Python安装包, Wheel是Python发行版的标准内置包格式。 在本质上是一个压缩包,WHL文件中包含了Python安装的py文件和元数据,以及经过编译的pyd文件, 这样就使得它可以在不具备编译环境的条件下,安装适合自己python版本的库文件。 如果要查看WHL文件的内容,可以把.whl后缀名改成.zip,使用解压软件(如WinRAR、WinZIP)解压打开即可查看。 为什么会用到whl文件来安装python库文件呢? 在python的使用过程中,我们免不了要经常通过pip来安装自己所需要的包, 大部分的包基本都能正常安装,但是总会遇到有那么一些包因为各种各样的问题导致安装不了的。 这时我们就可以通过尝试去Python安装包大全中(whl包下载)下载whl包来安装解决问题。

  • 基于Simulink的语音信号降噪与增强.docx

    基于Simulink的语音信号降噪与增强.docx

  • java资源Java条形码生成库 Barcode4J

    java资源Java条形码生成库 Barcode4J提取方式是百度网盘分享地址

  • pgmagick-0.7.5-cp27-cp27m-win32.whl.rar

    python whl离线安装包 pip安装失败可以尝试使用whl离线安装包安装 第一步 下载whl文件,注意需要与python版本配套 python版本号、32位64位、arm或amd64均有区别 第二步 使用pip install XXXXX.whl 命令安装,如果whl路径不在cmd窗口当前目录下,需要带上路径 WHL文件是以Wheel格式保存的Python安装包, Wheel是Python发行版的标准内置包格式。 在本质上是一个压缩包,WHL文件中包含了Python安装的py文件和元数据,以及经过编译的pyd文件, 这样就使得它可以在不具备编译环境的条件下,安装适合自己python版本的库文件。 如果要查看WHL文件的内容,可以把.whl后缀名改成.zip,使用解压软件(如WinRAR、WinZIP)解压打开即可查看。 为什么会用到whl文件来安装python库文件呢? 在python的使用过程中,我们免不了要经常通过pip来安装自己所需要的包, 大部分的包基本都能正常安装,但是总会遇到有那么一些包因为各种各样的问题导致安装不了的。 这时我们就可以通过尝试去Python安装包大全中(whl包下载)下载whl包来安装解决问题。

  • pendulum-2.1.2-cp310-cp310-win32.whl.rar

    python whl离线安装包 pip安装失败可以尝试使用whl离线安装包安装 第一步 下载whl文件,注意需要与python版本配套 python版本号、32位64位、arm或amd64均有区别 第二步 使用pip install XXXXX.whl 命令安装,如果whl路径不在cmd窗口当前目录下,需要带上路径 WHL文件是以Wheel格式保存的Python安装包, Wheel是Python发行版的标准内置包格式。 在本质上是一个压缩包,WHL文件中包含了Python安装的py文件和元数据,以及经过编译的pyd文件, 这样就使得它可以在不具备编译环境的条件下,安装适合自己python版本的库文件。 如果要查看WHL文件的内容,可以把.whl后缀名改成.zip,使用解压软件(如WinRAR、WinZIP)解压打开即可查看。 为什么会用到whl文件来安装python库文件呢? 在python的使用过程中,我们免不了要经常通过pip来安装自己所需要的包, 大部分的包基本都能正常安装,但是总会遇到有那么一些包因为各种各样的问题导致安装不了的。 这时我们就可以通过尝试去Python安装包大全中(whl包下载)下载whl包来安装解决问题。

Global site tag (gtag.js) - Google Analytics