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 tree视图 当页不弹窗显示方法

    <xpath expr="//tree" position="attributes"> <attribute name='editable'& ...

  2. 20155321 《网络攻防》 Exp1 PC平台逆向破解(5)M

    20155321 <网络攻防> Exp1 PC平台逆向破解(5)M 实践目标 本次实践的对象是linux的可执行文件 该程序正常执行流程是:main调用foo函数,foo函数会简单回显任何 ...

  3. Verilog中的有符号计算之认知补码

    Verilog中的有符号计数,一般是自己定义的而不是像C语言之类的定义一个有符号变量就好了.所以,要想在FPGA的世界里随心所欲的进行有符号运算,必须先对补码有一个很好的认知,然后再注意Verilog ...

  4. 阿里云Redis外网转发访问

    1.前提条件 如果您需要从本地 PC 端访问 Redis 实例进行数据操作,可以通过在 ECS 上配置端口映射或者端口转发实现.但必须符合以下前提条件: 若 Redis 实例属于专有网络(VPC),E ...

  5. [SHOI2015]聚变反应炉[树dp、贪心]

    题意 给定一棵 \(n\) 个点的树,每个点有一个启动能量 \(d\) 和传递能量 \(c\) ,如果一个点被启动了,就会向和他直接相连的点发送 \(c\) 的能量,初始所有节点能量为0,问最少多少能 ...

  6. SPA程序加载首界面eclipse卡顿解决笔记

    最近在开发SPA程序项目时遇到一个问题,因为是在开发阶段,所以直接就在eclipse中启动项目. 每次进入首界面时,eclipse就会长时间卡顿,前端界面也加载不出来,很影响开发效率. 在查找问题的时 ...

  7. Jmeter(八)-发送JDBC请求

    下午花了两个小时研究了一下Jmeter发送JDBC请求,现在把基本操作流程分享一下. 做JDBC请求,首先需要两个jar包:mysql驱动-mysql-connector-java-5.1.13-bi ...

  8. Python+opencv 图像拼接

    1.http://www.cnblogs.com/skyfsm/p/7411961.html ,给出了很好地拼接算法实现 2.由于不是Python的,所以简单做了一些翻译转成Python+opencv ...

  9. unity小地图制作___按比例尺图标布局

    1. 2.这里小地图显示的范围为整个空间区域,而不是单独的相机渲染区域 3. 4. 5. using System.Collections; using System.Collections.Gene ...

  10. unity中camera摄像头控制详解

    目录 1. 缘起 2. 开发 2.1. 建立项目 2.2. 旋转 2.2.1. 四元数 2.3. 移动 2.3.1. 向量操作 2.4. 镜头拉伸 2.5. 复位 2.6. 优化 1 缘起 我们的产品 ...