10款效果惊艳的HTML5应用和源码

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

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

在线演示

源码下载

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

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

在线演示

源码下载

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

今天要分享一款UI界面非常出色HTML5视频播放器,播放器具备播放/暂停、音量调节、全拼播放等功能,应该也算是比较完善了的。我们也可以看看之前发布过的HTML5视频播放器,像HTML5播放器API集合 轻松学会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的折线图表,该款图片支持多条折线重叠在一起显示,可以方便地比较不同颜色折线的数据。另外图表还有一个特点,就是可以缩放和移动,这大大方便了用户浏览图表数据,非常人性化。更多图表应用,请移步至HTML5图表栏目。

在线演示

源码下载

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

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

在线演示

源码下载

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

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

在线演示

源码下载

本文固定链接: http://www.i7758.com/archives/1619.html

时间: 2024-11-05 14:03:01

10款效果惊艳的HTML5应用和源码的相关文章

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

1.HTML5 WebGL水面水波荡漾特效 之前已经向各位分享过一款很逼真的HTML5水波荡漾特效,效果还算不错.今天再向大家分享一款更加给力的HTML5水波动画,画面上是一个大水池,水池底部是一颗大石头,在水面上点击即可泛起水波,加上模拟光的照射,水波比上一款特效更加生动逼真.另外你也可以拖动石头让其在池底滚动,也可以拖动画面多视角观看该HTML5水波动画. 在线演示 源码下载 2.HTML5 Canvas 3D旋转物体动画 模糊发光特效 HTML5 3D动画应用非常广泛,今天要介绍的这款HT

7个惊艳的HTML5 Canvas动画效果及源码

HTML5非常强大,尤其是现在大部分浏览器都支持HTML5和CSS3,用HTML5制作的动画也多了起来.另外,Canvas上绘制图形非常简单,本文就分享了一些强大的HTML5 Cnavas动画,一起来看看. 1.HTML5 Canvas瀑布动画 超逼真 这是一个很逼真的HTML5瀑布动画,基于Canvas实现的,效果相当酷. 在线演示   /   源码下载 2.HTML5 Canvas彩色像素进度条动画 这也是一款基于HTML5 Canvas的动画特效,它是一个很有创意的HTML5进度条,大家可

10款让人惊叹的HTML5/jQuery图片动画特效

1.HTML5相册照片浏览器 可连接Flickr照片服务 以前我们经常会分享一些jQuery相册浏览插件,效果不错,实用性也很强.不过如果能利用HTML5来实现相册浏览器,那么相册浏览效果肯定会更加炫酷.今天分享的这款HTML5相册浏览器可以连接到Flickr获取照片,也可以连接到youtube获取视频,照片在初始化的时候有波浪般的效果. 在线演示 源码下载 2.CSS3图片模糊效果 今天我们来分享一款利用CSS3技术让图片模糊的效果,我们只需要将鼠标滑过图片,就可以让图片产生模糊的特效,利用C

分享10款激发灵感的最新HTML5/CSS3应用

1.HTML5/CSS3实现iOS Path菜单 菜单动画很酷 Path菜单相信大家都不陌生吧,它在iOS中非常流行,今天我们要分享的菜单就是利用HTML5和CSS3技术来模拟实现这款iOS Path菜单,点击按钮,即可弹出子菜单,子菜单弹出的动画非常炫酷.点击子菜单,即可打开相应功能. 在线演示 源码下载 2.HTML5环形音乐播放器 播放器外观非常酷 今天我要分享一款外观更酷的HTML5音乐播放器,该播放器是环形的,背景图片非常漂亮,可以控制播放.调整音量等播放器常用的功能. 在线演示 源码

10款经典创意jQuery应用插件及源码

1.jQuery带缩略图的宽屏焦点图插件 今天我们要来分享一款很不错的jQuery宽屏焦点图插件,这款焦点图插件相当大气,并且在图片上方列出了所有的缩略图,点击缩略图即可切换相应的图片.另外,我们也可以点击左右切换按钮来切换上一张和下一张图片. 在线演示 源码下载 2.HTML5 Canvas折线图表和柱形图表 之前我们已经分享过很多HTML5图表应用了,包括折线图.柱形图.饼图等,使用起来用户体验都很不错.今天要分享的一款HTML5 Canvas图表应用提供了折线图和柱形图两种,这款HTML5

惊艳的HTML5动画特效及源码

今天我们要来分享一些很酷的HTML5动画演示,HTML5的强大之处在于它可以利用canvas的特性来绘制很多普通网页无法完成的图形和动画,canvas就像一块超级画板,在上面不仅可以实现平面图形,而且一些3D动画也非常简单.很多HTML5动画也都基于canvas,一起来看看吧. HTML5/CSS3实现大风车旋转动画 作为今天首款HTML5动画,这款大风车旋转效果的确非常棒,它是用纯CSS3实现. 核心CSS代码: .wmd1{ -webkit-transform: scale(.6); pos

10款超炫的开源jquery的源码预览效果

1.Flat Surface Shader – 超炫的 3D 模拟照明效果 Flat Surface Shader 是一个超炫的 3D 模拟照明效果,可以配置使用基于 Canvas 的 2D 上下文或者基于 SVG 多边形数组绘制三角形.它还采用原生的 Float32Arrays 存储数字数据,进行高度优化的计算.可以调整颜色参数预览效果,而且可以导出图像. 在线演示 源码下载 2.Sidr – 创建侧栏和响应式菜单的最佳 jQuery 插件 侧栏隐藏菜单是一个很好的方式,使得用户可以在需要的时

css奇特用法之 IMG添加背景图片配合显示--效果惊艳

IMG标签本身是显示图片的,但通过CSS可以再为其设置背景图片,让其和自身的图片配合来显示,最终的效果会让你惊叹.当然,这个发现来自于老外,所以代码马上与大家分享.再此之前,我也从来没有想到过这个思路,我想这种思路可以应用的地方相当多了. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

10款web前端基于Jquery的动画源码

1.使用 CSS3 动感的图片标题动画效果 在网站中,有很多地方会需要在图片上显示图片标题.使用 CSS3 过渡和变换可以实现动感的鼠标悬停显示效果.没有使用 JavaScript,所以只能在支持 CSS3 动画的现代浏览器中才能正常工作.您可以查看网页的源代码,了解动画是如何工作的. 在线演示 源码下载 2.简单的轻量级的 jQuery 仪表板插件 sDashboard 是一个轻量的仪表板 jQuery 插件,转换一个对象数组到仪表板.数组中的每个对象将被呈现为一个仪表板组件,可以通过左右拖