10款HTML5 Canvas图片马赛克模糊动画

1.HTML5 Canvas生成粒子效果的人物头像

前面我们分享过一个HTML5 Canvas实现的图像马赛克模糊效果,HTML5处理图片真的非常简单。今天我们要再利用HTML5 Canvas实现一个粒子效果的人物头像,你可以任意选择一张头像图片,接下来该图片会被打散成许多粒子,然后慢慢的重组成图片,鼠标滑过图片时粒子还会出现浮动的动画特效,看上去非常酷。

在线演示

源码下载

2.HTML5 Canvas图片马赛克模糊动画

经常可以在网上或者电视上看到被马赛克模糊的图片或者视频,今天我们要利用HTML5 Canvas技术来实现图片的马赛克模糊效果。在演示中我们可以拖动滑竿来设置马赛克模糊的程度,你可以在不同的值下观察图片被马赛克后的效果。HTML5的确非常强大。

在线演示

源码下载

3.HTML5+CSS3实现的鼠标悬停动画菜单按钮

今天要给给位分享一款基于CSS3的鼠标悬停动画菜单按钮,这款菜单是由一个个小按钮组成,当我们将鼠标滑过菜单项时,按钮上的图标将出现悬浮的动画特效,建议用户使用支持css3与HTML5效果较好的火狐或谷歌等浏览器预览本源码。

在线演示

源码下载

4.动漫网站基于jquery的横向手风琴特效

今天给大家分享一款动漫网站基于jquery的横向手风琴特效。

在线演示

源码下载

5.基于html5实现的愤怒的小鸟网页游戏

之前给大家分享一款基于html5 canvas和js实现的水果忍者网页版,今天给大家分享一款基于html5实现的愤怒的小鸟网页游戏。

在线演示

源码下载

6.来自 Codrops 的创新的拖放交互界面

Codrops 分享了一些界面拖放的交互设计想法。基本的思路是在拖动一个项目的时候,为特定的操作呈现出可投掷的区域。这节省了大量的界面空间 ,并给出了一个有趣的动态的互动。有很多应用场景,例如分类和组织内容(像 Pinterest 的面板),或在邮件应用程序或内容管理系统中执行一些操作。

在线演示

源码下载

7.ZOOM – 简单的 jQuery 相册插件

jQuery 最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些让人惊叹的图片切换效果。ZOOM 是一款全屏效果的 jQuery 图片切换展示插件,支持键盘前后按键切换,支持移动设备。

在线演示

源码下载

8.HTML5 Canvas图片马赛克模糊动画

经常可以在网上或者电视上看到被马赛克模糊的图片或者视频,今天我们要利用HTML5 Canvas技术来实现图片的马赛克模糊效果。在演示中我们可以拖动滑竿来设置马赛克模糊的程度,你可以在不同的值下观察图片被马赛克后的效果。HTML5的确非常强大。

在线演示

源码下载

9.tiltShift.js – CSS3 实现移轴镜头

tiltShift.js 是一款很棒的 jQuery 插件,使用 CSS3 图片滤镜来实现照片的移轴镜头效果。使用非常简单,使用 data 属性配置参数。温馨提示:为保证最佳的效果,请在 IE10+、Chrome、Firefox 和 Safari 等现代浏览器中浏览。

在线演示

源码下载

10.Titon Toolkit – 非常强大的用户界面组件

Titon Toolkit 是一个非常强大的用户界面组件,也是实现响应式,移动和现代网页的工具类的集合。每个组件封装了 HTML、CSS 以及为角色特定页面元素的 JavaScript 功能。Toolkit 使用了最新和最伟大的技术,包括 HTML5、CSS3、Sass、Gulp、包管理以及JavaScript的层强有力的新的浏览器的API 。

在线演示

源码下载

未经允许不得转载:爱前端网 » 10款HTML5 Canvas图片马赛克模糊动画

赞 (0) 打赏


觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏