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-http://www.jyz521.com/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
  
  在线演示 http://www.jyz521.com// 源码下载
  
  9、基于Bootstrap的CSS3下拉菜单 菜单3D立体效果
  
  Bootstrap是Twitter推出的一个用于前端开发的开源工具包,基于Bootstrap框架,我们可以方便地制作漂亮的UI界面。今天要分享的这款CSS3下拉菜单就是基于Bootstrap的,下拉子菜单的外观也非常不错,同时菜单也具有3D立体的视觉效果。
  
  css3-bootstrap-http://feishenbo.cn/ dropdown-menu
  
  在线演示 / 源码下载
  
  10、纯CSS3实现自行车动画 非常逼真
  
  还记得那款纯CSS3实现的小猪、老鼠、小牛吗,简直是太形象生动了。这次我们要来分享一款利用纯CSS3实现的自行车动画,与前面那款不同的是,这个自行车是可以运动的,就像有一个人在骑车一样,车轮也会转动,非常逼真的一款动画效果。

纯CSS3实现打火机火焰动画的更多相关文章

  1. 纯css3 加载loading动画特效

    最近项目中要实现当页面还没有加载完给用户提示正在加载的loading,本来是想做个图片提示的,但是图片如果放大电脑的分辨率就会感觉到很虚,体验效果很不好.于是就采用css3+js实现这个loading ...

  2. 一款简洁的纯css3代码实现的动画导航

    之前为大家介绍了好多导航菜单,今天给大家分享一款简洁的纯css3代码实现的动画导航.鼠标经过的时候以背景色以菱形渐变为长方形.效果图如下: 在线预览   源码下载 实现的代码. html代码: < ...

  3. 2014圣诞节一款纯css3实现的雪人动画特效

    在2014年的圣诞节,爱编程小编给大家分分享一款纯css3实现的雪人动画特效.该实例实现一个雪人跳动的特效,效果图如下: 在线预览   源码下载 实现的代码. html代码: <span cla ...

  4. 纯CSS3制作皮卡丘动画壁纸

    前言 明天就放假了,趁着今晚的空挡时间来写这篇博客——这是我昨晚实现的一个简单的CSS3动画效果.话说还得缘起我逛了一下站酷网,然后不小心看到了一张皮卡丘的手机壁纸,觉得很可爱,然后觉得这种效果是可以 ...

  5. 使用纯CSS3实现一个日食动画

    日食现象是月亮挡在了地球和太阳之间,也就是月亮遮挡住了太阳. 所以要构造日食,我们须要2个对象:一个代表月亮,一个代表太阳. <div class="eclipse sun" ...

  6. 纯CSS3实现GIF图片动画效果

    在线演示 本地下载

  7. 纯CSS3绘制神奇宝贝伊布动画特效

    在线演示       本地下载

  8. 纯CSS3实现多层云彩变换飞行动画

    查看效果:http://hovertree.com/texiao/css3/4/效果2 效果图: 代码如下: <!doctype html> <html lang="zh& ...

  9. 8个超炫酷的纯CSS3动画及源码分享

    在现代网页中,我们已经越来越习惯使用大量的CSS3元素,而现在的浏览器也基本都支持CSS3,所以很多时候我们不妨思考一下是否可以用纯CSS3制作一些有趣或者实用的网页.本文要分享8个超炫酷的纯CSS3 ...

随机推荐

  1. odoo之可选择多个内容显示问题

    <field name="partner_id" widget="many2many_tags" options="{'no_create': ...

  2. 类加载, 静态变量初始化, String不可变, 泛型使用, 内部类

    1.java变量类型 java变量类型分:基本数据类型变量和Object数据类型变量,变量也是占用者内存的 例如: int i = 3; i这个变量保存的就是整形3, 占32位 Object a = ...

  3. 原创zynq文章整理(MiZ702教程+例程)

    MiZ702教程+例程  网盘链接:  http://pan.baidu.com/s/1sj23yxv 不时会跟新版本,增加勘误之类的,请关注--

  4. mybatis源码-解析配置文件(二)之解析的流程

    目录 1. 简介 2. 配置文件解析流程分析 2.1 调用 2.2 解析的目的 2.3 XML 解析流程 2.3.1 build(parser) 2.3.2 new XMLConfigBuilder( ...

  5. 一步一步来熟悉Akka.Net(一)

    一步一步来熟悉Akka.Net(一) 标签(空格分隔): .netcore 分布式 一.不利flag   好久没写过文章了,翻开前几年写的博客,看到有两个目标"代码生成器"和&qu ...

  6. AndroidPN环境建立

    AndroidPN环境 AndroidPN实现了从服务器到android移动平台的文本消息推送.这里先简单说一下androidPN的安装过程. 下载androidpn-client-0.5.0.zip ...

  7. 290. Word Pattern【LeetCode by java】

    今天发现LintCode页面刷新不出来了,所以就转战LeetCode.还是像以前一样,做题顺序:难度从低到高,每天至少一题. Given a pattern and a string str, fin ...

  8. 【转载】python %s %d %f

    %s 字符串 string="hello" #%s打印时结果是hello print "string=%s" % string      # output: s ...

  9. 机器学习中几种优化算法的比较(SGD、Momentum、RMSProp、Adam)

    有关各种优化算法的详细算法流程和公式可以参考[这篇blog],讲解比较清晰,这里说一下自己对他们之间关系的理解. BGD 与 SGD 首先,最简单的 BGD 以整个训练集的梯度和作为更新方向,缺点是速 ...

  10. JWT总结

    Json web token (JWT) 什么是JWT? Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准((RFC 7519).该toke ...