分享6个非常酷的图片特效(HTML5和jQuery)

tp_wire
 tp_wire
发布于 2012年06月28日
收藏 80

拥抱开源,微软做了哪些努力?一大波开源技术成果将亮相微软在线技术峰会>>>

在网页世界里,图片毋庸置疑扮演着非常重要的角色。然而我们平时看到的一些图片都只是静态的,或者是一些gif动画图片,今天我向大家分享6个超级震撼的网页图片特效,其中有基于jQuery的,也有基于HTML5的,效果非常的棒。

1、CSS3人物行走动画

这是一个完全用CSS3配合图片实现的人物行走动画,没有用一行JS代码,一起来看看吧,这个行走动画是不是很犀利呢?注意:请用版本比较高的Firefox和Chrome浏览器观看此动画。

2、CSS3机器猫

这是一个用纯CSS3画出来的机器猫,没有加一张图片。值得大家注意的是,这只CSS3机器猫的眼睛还是会动的哦。

3、jQuery乌鸦飞行动画

这是一个完全由jQuery控制的乌鸦飞行动画,通过对飞行参数的控制,乌鸦以不同的方式展翅飞翔,非常有爱。

4、HTML5像素图片动画特效

这是一个基于HTML5技术的图片动画特效,该动画将一张100*100像素的gif图片切合成一个个像素然后随着鼠标的点击,这一个个像素便会分散和聚合,很让人震撼。

5、HTML5绘制人脸特效

这是利用HTML5实现的人脸绘制程序,该人脸绘制程序使用方向键选择人脸的具体信息(上下键选择面部位置,左右键切换某个面部),由于是在Canvas画布上绘制,效果令人十分惊讶。

6、jQuery结合CSS实现的右上角翻页效果

曾经在QQ空间看到过一种广告的展现形式,那就是在页面右上角悬浮一个页角,等你鼠标移上去就像翻书一样把页面展开来,达到显示广告的目的,这种方式对用户来说比较友好,不用强制性去看广告。那么,这种翻页效果是如何实现的呢?今天我就要给大家分享如何实现这种翻页效果。

以上这些图片特效希望大家能喜欢。

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动共创开源社区。
转载请注明:文章转载自 OSCHINA 社区 [http://www.oschina.net]
本文标题:分享6个非常酷的图片特效(HTML5和jQuery)
加载中

最新评论(8

eechen
eechen

引用来自“树相马”的评论

卡得毛线!

HTML5和CSS3挺耗GPU和CPU的
yyliu
yyliu
树相马
树相马
卡得毛线!
gesuper
gesuper
像素级表演呐
首席xx师
首席xx师

引用来自“唐阳”的评论

马克

++
五杀联盟
五杀联盟
马克
星星爷
星星爷
哈哈 楼上:D
lef
lef
设计师比较感性,看到什么东西都要抒发一下自己的感情,他的感性基因注定做东西就要拖来托去就像是画画一样,因为只有这样才能把自己脑子里东西反应到屏幕上。
程序员比较理性,看到什么东西都要追根问底要搞清楚原因,他的理性基因注定做东西就要在在键盘敲来敲去,因为只有这样才能把自己脑子里的东西都反映到屏幕上。

我们现在看到的景象是,用画画代码,用代码写画。
这种感觉就像是穿着裤叉去XXO,办完事后,还要给别人说,看哥干的这活高级吧,你行吗?然后那女人还没有满足渴望的看着你,你这搞永远不可能到高潮的。
返回顶部
顶部