资讯频道 → Web前端
阅读更多

11顶
0踩

Web前端

原创新闻 10 款效果惊艳的 HTML5 应用和源码

2014-06-11 10:43 by 见习编辑 html5_dev 评论(2) 有16331人浏览
HTML5 CSS 前端

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

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

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

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



在线演示  /  源码下载

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

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



在线演示  /  源码下载

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

今天要分享一款UI界面非常出色HTML5视频播放器，播放器具备播放/暂停、音量调节、全拼播放等功能，应该也算是比较完善了的。



在线演示  /  源码下载

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

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



在线演示  /  源码下载

5、CSS3火焰效果文字特效

今天我们要来再分享一款CSS3火焰效果的文字特效，和之前那个文字特效不同的是，这个是静态的，没有动画的效果，不过也非常酷。



在线演示  /  源码下载

6、CSS3弹簧线圈动画

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



在线演示  /  源码下载

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

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



在线演示  /  源码下载

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

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



在线演示  /  源码下载

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

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



在线演示  /   源码下载

10、纯CSS3实现自行车动画

这次我们要来分享一款利用纯CSS3实现的自行车动画，与前面那款不同的是，这个自行车是可以运动的，就像有一个人在骑车一样，车轮也会转动，非常逼真的一款动画效果。



在线演示  /  源码下载

以上就是10款效果惊艳的HTML5应用和源码，欢迎收藏分享。
  • 大小: 12.4 KB
  • 大小: 76.3 KB
  • 大小: 16.1 KB
  • 大小: 9.3 KB
  • 大小: 20.4 KB
  • 大小: 39.5 KB
  • 大小: 22.5 KB
  • 大小: 44.8 KB
  • 大小: 31.5 KB
  • 大小: 27.3 KB
11
顶
0
踩
评论 共 2 条 请登录后发表评论
2 楼 huoquan 2014-08-21 13:44
点这里 看看这里吧
1 楼 qiansheng1987 2014-06-18 12:32

发表评论

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

相关推荐

  • No trusted certificate found解决方案

    1.求No trusted certificate found解决方案 Copy to clipboard Posted by: zijingshanke Posted on: 2009-12-03 10:42 调用交通银行支付接口查询 String srcUrl = ...

  • httpclient请求报No trusted certificate found, peer not authenticated 解决方案

    在使用httpclient进行https 请求... javax.net.ssl.SSLHandshakeException: sun.security.validator.ValidatorException: No trusted certificate found javax.net.ssl.SSLPeerUnverifiedException: peer not au...

  • 关于 No trusted certificate found 异常

    碰到了一个 No trusted certificate found 异常，Google了一下有不少解决方案。摘录几个比较好的链接。希望有一些帮助。...

  • Linux 报错Certificate verification failed: The certificate is NOT trusted.

    Linux 报错Certificate verification failed: The certificate is NOT trusted. 起因 在虚拟机里安装完ubuntu后更换清华源然后执行apt update发现报错，大致意思就是证书验证错误，主要原因就是清华源的地址是https...

  • 微信支付证书使用问题踩坑解决方案

    解决方法(PYTHON): 微信支付退款接口链接: 申请退款 1. 问题: 使用官方建议的apiclient.p12证书失败 我们是python版本,所以一直尝试使用apiclient.p12证书,发现一直报错,于是我去看了python request包的源码,下面是...

  • 解决wget错误：ERROR: The certificate of ‘xxx’ is not trusted.

    解决wget错误：ERROR: The certificate of ‘xxx’ is not trusted.

  • java自签名证书_java – Keytool创建一个受信任的自签名证书

    我正在尝试使用(java)keytool创建自签名证书,但是当我尝试使用它时,我得到以下异常(请参阅底部的整个...Caused by: sun.security.validator.ValidatorException: No trusted certificate foundat sun.security.vali...

  • 关于Ubuntu安装Jenkins遇到gpg: no valid OpenPGP data found.

    【代码】关于Ubuntu安装Jenkins遇到gpg: no valid OpenPGP data found.

  • 【Java Web 安全】常见安全漏洞及解决方案

    大名鼎鼎，对于Java而言，通过SQL预处理轻松解决。 2 存储型XSS 保存数据时未检测包含js或html代码，照成数据被读取并加载到页面时，会触发执行js或html代码。 样例： <a id='attacker'>点击就送百元现金...

  • unable to find valid certification path to requested target或Certificate chaining error的解决办法

    当我们通过客户端java程序访问一个运行HTTPS/SSL... unable to find valid certification path to requested target 或者 The certificate issued by ... is not trusted; internal cause is:java.security.cert.Ce

  • ubuntu18.04内核升级中遇到的问题及解决方案

    本文主要介绍了ububtu18.04在内核升级时遇到的一些问题及解决方案，仅供参考。

  • Puppeteer开发过程中遇到的问题及解决方案

    工欲善其事必先利其器，请先检查本机是否安装NodeJS环境以及查阅API： ...version=v12.0.1&...解决方案：建议大家去搜索对应的解决方案，Puppeteer并无此类解决方案。 问题：某些网站做了JS防爬检测

  • 编译Linux内核kernel时遇到的问题与解决方案

    文章目录编译Linux内核kernel时遇到的问题与解决方案问题1：scripts/sign-file.c:25:10: fatal error: openss1/opensslv.h: No such file or directory解决方法：问题2：/bin/sh: 1: flex: not found解决方法问题3：...

  • Ubuntu18.04 Bochs环境配置问题解决方案

    bochs下载安装 ...linux系统用.tar.gz 安装大体可以看这篇文章： ...bochs配置问题解决 问题1及解决 nasm安装失败。大体报错Certificate verification failed: The certificate is ...解决方案： sudo vim /etc/apt/sources.

  • python遇到ValueError: check_hostname requires server_hostname解决方案

    No matching distribution found for urllib3==1.25.11 可以使用 pip install urllib3==1.25.11 -i http://pypi.douban.com/simple --trusted-host pypi.douban.com 意思是通过国内的源来安装，速度快并且不会出现...

  • pip国内下载镜像问题最优雅的解决方案

    none) ERROR: No matching distribution found for matplotlib>=3.2.2 这令我很苦恼，我在网上找了很多方法都不尽如人意 后来，找到一个新型方法 如果想要永久修改pip源，可按照如下操作： Windows： 找到系统盘下C...

  • python urllib3 post ssl,python post https报错解决方案

    - skipping Could not find a version that satisfies the requirement nltk (from versions: ) No matching distribution found for nltk 报了上面的错，下面的语句解决. pip –trusted-host pypi.python.org ...

  • 『2000年』爱情是什么

    昨晚梦见了以前喜欢的那个女孩。那个梦有点怪怪的。我今天打了电话回家，顺便打了电话去她家，她放假不回家，玩去了。她好象跟你一样喜欢到处走。  ：） 在梦里，她坐在我旁边，光着脚。好象是穿着淡蓝色的衣裳，好象是睡衣。呵呵，我发现她的一只脚的大脚趾侧面有一处伤口，小小的圆圆的伤口，这伤口处的皮肤已经不在，能清楚的看见皮下的肌肉的淡色。我有点关注的感觉。然后她抚着脚趾说：这可能要植皮了。 然后我低头看了看

  • 『2000年』安妮宝贝

    暖暖，也是我看的第一部安妮的小说。 我看文章，一般不大注意作者是谁。而且，在读第一遍的时候，一般不留意它的文字如何，只是试图去感受作者的感受，去理解文章的内容。 在看完暖暖之后我忽然想起来要再看看作者是谁。后来经朋友介绍再到她的网站(http://www.rain1977.com/annbaby/)去看一系列的她的文章。网站的题头是“她比烟花寂寞”。这一句话，写出了我看过她这么多作品后最深的体会。

  • 『2001年』北京游

    (应正板主之邀请，也写写北京的感受，我不是北京人，却也正好在北京住过一段时间，所以也来凑凑热闹，聊以填充填充版面) 在北京呆了几年，像样的旅游可以说得上是“难以计数”。不是因为次数多而不好计数，而是次数实在是太少以致想不起来几次。 :(     我不是一个喜欢到处逛的人，性格有点内向，平常都很懒得与人交往。这可能也是我喜欢网络这东西的缘故吧，相互不认识不了解也可以随便侃侃，一时想不到词儿吧也不担心

Global site tag (gtag.js) - Google Analytics