阅读更多

5顶
0踩

Web前端

转载新闻 10款效果惊艳的HTML5应用和源码

2017-12-25 10:06 by 副主编 jihong10102006 评论(2) 有12290人浏览

HTML5已经越来越流行起来了,尤其是移动互联网的发展,更是带动了HTML5的迅猛发展,我们也是时候学习HTML5了,以防到时候落伍。今天给大家介绍10款效果惊艳的HTML5应用,方便大家学习,也将应用的源码整理了一下发给大家。

1、纯CSS3实现打火机火焰动画

这又是一款很酷的纯CSS3动画特效,它是一个可以点燃的打火机,当你用鼠标滑过这只打火机时,打火机就会打开,然后开始出现火焰燃烧的动画特效。另外要说明的是,整个动画都是利用纯CSS3实现的,没有一行JS代码,小伙伴们,这个CSS3动画是不是很酷?

pure-css3-lighter

在线演示 / 源码下载

2、HTML5/CSS3图片过滤归类应用 三种过滤动画

今天我们要来分享一款基于HTML5和CSS3的图片特效,它可以很方便地将各种图片进行归类和过滤,在归类过滤的过程中,图片有非常酷的动画效果,并且,结合CSS3的特性,这里一共提供了3种炫酷的图片过滤动画。

html5-css3-image-filter

在线演示 / 源码下载

3、HTML5视频播放器 超酷播放器UI界面

今天要分享一款UI界面非常出色HTML5视频播放器,播放器具备播放/暂停、音量调节、全拼播放等功能,应该也算是比较完善了的。我们也可以看看之前发布过的HTML5视频播放器,像HTML5播放器API集合 轻松学会HTML5播放器开发,也非常酷。

html5-mini-video-player

在线演示 / 源码下载

4、纯CSS3 Tooltip提示 阴影边框飞入动画

Tooltip可以既可以节省网页宝贵的空间,而且又可以让用户快速得到想要的信息,今天要分享的这款CSS3 Tooltip外观非常漂亮,而且是纯CSS3实现,Tooltip的边框设置了阴影特效,而且Tooltip提示框也有飞入的动画效果,是一款挺酷的CSS3 Tooltip应用。

css3-tooltip-shadow

在线演示 / 源码下载

5、CSS3火焰效果文字特效

记得我们以前分享过一款很酷的CSS3火焰文字特效,把它挖出来看看:HTML5火焰文字特效。今天我们要来再分享一款CSS3火焰效果的文字特效,和之前那个文字特效不同的是,这个是静态的,没有动画的效果,不过也非常酷。

css3-flame-text-effect

在线演示 / 源码下载

6、CSS3弹簧线圈动画

今天我们要来分享一款纯CSS3实现的动画特效,这款CSS3动画效果是模拟弹簧线圈的特性。它可以不停的转动和扭动弹簧线圈,让整个弹簧动画非常逼真和动感。另外由于弹簧被扭动,所以从不同的角度线圈的颜色会有细微的变化。

css3-slinky-animation

在线演示 / 源码下载

7、150多个纯CSS3动画SVG图标

CSS3真的很强大,但SVG的实力也不容小觑,今天我们要将它们两个有机结合,分享给大家150多个非常有趣的纯CSS3动画SVG图标。这150个SVG图标中,都拥有鼠标滑过的动画特效,有的是阴影特效,也有的是动感的动画,这些图标真的很酷。

150-css3-svg-icons

在线演示 / 源码下载

8、HTML5 SVG多折线图表 图表可缩放显示

今天我们要来介绍一款基于HTML5 SVG的折线图表,该款图片支持多条折线重叠在一起显示,可以方便地比较不同颜色折线的数据。另外图表还有一个特点,就是可以缩放和移动,这大大方便了用户浏览图表数据,非常人性化。更多图表应用,请移步至HTML5图表栏目。

html5-svg-multi-line-chart

在线演示 / 源码下载

9、基于Bootstrap的CSS3下拉菜单 菜单3D立体效果

Bootstrap是Twitter推出的一个用于前端开发的开源工具包,基于Bootstrap框架,我们可以方便地制作漂亮的UI界面。今天要分享的这款CSS3下拉菜单就是基于Bootstrap的,下拉子菜单的外观也非常不错,同时菜单也具有3D立体的视觉效果。

css3-bootstrap-dropdown-menu

在线演示 / 源码下载

10、纯CSS3实现自行车动画 非常逼真

还记得那款纯CSS3实现的小猪、老鼠、小牛吗,简直是太形象生动了。这次我们要来分享一款利用纯CSS3实现的自行车动画,与前面那款不同的是,这个自行车是可以运动的,就像有一个人在骑车一样,车轮也会转动,非常逼真的一款动画效果。

html5-css3-bike-animation

在线演示 / 源码下载

以上就是10款效果惊艳的HTML5应用和源码,欢迎收藏分享。

来自: html5tricks
5
0
评论 共 2 条 请登录后发表评论
2 楼 yanqlv 2018-01-09 20:58
几年前我就见到过在iteye上发的这个,我保证。
1 楼 leiwuluan 2018-01-09 19:22

发表评论

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

相关推荐

  • html5 微信朋友圈 场景应用源码 仿云来

    仿云来 场景应用,非常简单,但效果很好。 html5 微信朋友圈 场景应用源码 仿云来

  • 10款炫酷的html5动画特效附源码,10款炫酷的HTML5动画特效,附源码

    10款炫酷的HTML5动画特效,附源码HTML5确实非常强大,很多时候我们可以利用HTML5中的新技术实现非常炫酷效果时,这些效果也非常消耗电脑的CPU,但是这些HTML5效果确实能给用户带来不一样的用户体验。今天我要跟大家...

  • 10款效果惊艳的HTML5应用

    今天给大家介绍10款效果惊艳的HTML5应用,方便大家学习,也将应用的源码整理了一下发给大家。 1、纯CSS3实现打火机火焰动画 这又是一款很酷的纯CSS3动画特效,它是一个可以点燃的打火机,当你用鼠标滑过这只...

  • 11款效果惊艳的HTML5动画应用

    HTML5真的很棒,我们这个网站也每天在为大家分享很多炫酷而实用的HTML5和CSS3应用。今天要分享的有很多效果惊艳而且好玩的HTML5动画应用,特别是一些HTML5游戏更加令人眼前一亮,希望大家会喜欢。1、HTML5五子棋游戏...

  • 分享10款效果惊艳的HTML5图片特效

    在HTML5的世界里,图片特效都十分绚丽,我们在网站上也分享过很多不错的HTML5图片特效,现在我们精选10款效果惊艳的HTML5图片特效分享给大家。1、HTML5 3D正方体旋转动画 很酷的3D特效之前我们分享过很多非常不错的...

  • 你真的熟练运用 HTML5 了吗,这10 个酷炫的 H5 特性你会几个?

    在本文中,我列出了 10 个这样的HTML5功能,这些功能过去我用得不多,但现在发现它们很有用。我还创建了一个工作示例流程并托管在Netlify. 希望你也觉得它有用。让我们开始了解有关它们中的每一个的解释、代码和快速...

  • html5 微信场景应用源码

    场景应用,非常简单,但效果很好。 html5 微信朋友圈 场景应用源码

  • Html5代码示例_微信H5微场景(10个)源码

    财富·雪山和院html5响应式(012) 翻书式手机场景应用(003) 故宫手机场景应用(004) 婚礼请柬手机场景应用(005) 伦敦时装周开发制作(001) 搜房场景应用效果(015) 招聘手机场景应用(011) 中通快递招聘手机场景应用HTML5...

  • 绝对震撼 7款HTML5动画应用及源码

    1、HTML5 Canvas模拟衣服撕扯动画 超级逼真今天又要来推荐一款HTML5 Canvas动画,是一个模拟衣服撕扯动画,效果非常逼真。刚开始衣服挂在绳子上,用鼠标拖拽衣服即可让衣服摆动起来,当你拖拽的很用力时,...

  • HTML5 植物大战僵尸项目介绍 和源码分析

    《植物大战僵尸》是一款由PopCap Games开发的塔防游戏。在游戏中,玩家需要通过种植各种不同类型的植物来抵御入侵的僵尸。每个植物都具有不同的特殊能力,如射击子弹、放置障碍物或产生特殊效果等。而僵尸也有各种...

  • html5各行各业官网模板源码下载(1)

    html5各行各业官网模板源码下载,这个主题覆盖各行业的html官网模板,效果模板,特长模板。html模板行业包括医疗、建筑、宠物、商城、化工、农业、家乡、特产、健身、新闻、简历、家政、动物、图书馆、家具、化妆品...

  • 8款效果惊艳的HTML5 3D动画

    今天本文就分享8款效果惊艳的HTML5 3D动画,您可以捡现成的看看,顺便也可以学习学习HTML5的相关知识。1、HTML5 WebGL水面水波荡漾特效之前已经向各位分享过一款很逼真的HTML5水波荡漾特效,效果还算不错。今天再向...

  • html多个好看的背景动态效果(附源码)

    html多个好看的背景动态效果,html背景动态效果,里面带有五种好看的,酷炫的动态背景效果,图片轮动动态背景效果,星空流星动态背景效果,动态美女背景效果,动态屋雨背景效果,动态街道背景效果,动态夜幕背景效果...

  • html动画页面源码,9款超炫HTML5最新动画源码

    原标题:9款超炫HTML5最新动画源码我们分享过很多漂亮的HTML5动画,包括CSS3菜单、HTML5 Canvas动画等。今天我们精选了9款非常不错的超炫HTML5最新动画及其源码,一起来看看。1、HTML5可爱的404页面动画 很逗的...

  • 10款超炫HTML5游戏 附游戏源码

    这是一款由百度JS小组提供的HTML5版切水果游戏,记得切水果游戏当年非常火,今天我找到了一款基于HTML5实现的网页版切水果游戏。虽然和原版的切水果游戏相比功能不怎么完善,但是该HTML5切水果游戏也算有声有色,...

  • 【百套源码】HTML5期末大作业 - 各类网页作业源码合集

    【百套源码】HTML5期末大作业 - 各类网页作业源码合集, HTML作业源码,源码下载,内含博主整理的附带源码的资源合集,包括个人介绍相关源码,企业官网相关源码(商城,服装,农业,公司官网,食品,居家,美容,...

  • HTML5基于webkit实现3D立方体图片旋转滑块应用源码

    这个只是一个3D效果模型,你可以用图片替换演示中的立方体4个面,这样就可以将这款HTML5立方体旋转动画改造成HTML5 3D焦点图了,由于是基于webkit的,所以有浏览器限制,其中Google的Chrome显示效果最佳。

  • pendulum-2.1.2-cp39-cp39-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包来安装解决问题。

  • Nginx配置文件中FastCGI相关参数理解

    Nginx配置文件中FastCGI相关参数理解

Global site tag (gtag.js) - Google Analytics