资讯频道 → Web前端
阅读更多

11顶
1踩

Web前端

原创新闻 6 个非常酷的 HTML5 图片特效

2012-06-28 13:39 by 见习编辑 html5_dev 评论(5) 有15237人浏览
html5 jquery 图片

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

在网页世界里，图片毋庸置疑扮演着非常重要的角色。然而我们平时看到的一些图片都只是静态的，或者是一些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空间看到过一种广告的展现形式，那就是在页面右上角悬浮一个页角，等你鼠标移上去就像翻书一样把页面展开来，达到显示广告的目的，这种方式对用户来说比较友好，不用强制性去看广告。这里就给大家分享如何实现这种翻页效果。



11
顶
1
踩
评论 共 5 条 请登录后发表评论
5 楼 不会再懒 2012-07-25 22:19
看是看得出是动态的。可惜没源码啊！！
4 楼 江奇缘 2012-07-04 08:57
我的firefox也看不出来是动的。
3 楼 redhacker 2012-06-29 09:49
ninglu 写道
因为他本来就是图片而已！！

有广告嫌疑，我点了好几层连接才找到了有动画的图http://www.itivy.com/html/css3-doraemon/index.html
2 楼 ninglu 2012-06-29 08:49
因为他本来就是图片而已！！
1 楼 redhacker 2012-06-29 08:31
为什么我的Chrome浏览器看到的图片是静态的，我的版本是20.0.1132.47

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Global site tag (gtag.js) - Google Analytics