分享6个非常酷的图片特效(HTML5和jQuery)
jopen 12年前
<p>在网页世界里,图片毋庸置疑扮演着非常重要的角色。然而我们平时看到的一些图片都只是静态的,或者是一些gif动画图片,今天我向大家分享6个超级震撼的网页图片特效,其中有基于jQuery的,也有基于HTML5的,效果非常的棒。</p> <p>1、<a href="/misc/goto?guid=4958346161841977641" target="_blank">CSS3人物行走动画</a></p> <p>这是一个完全用CSS3配合图片实现的人物行走动画,没有用一行JS代码,一起来看看吧,这个行走动画是不是很犀利呢?注意:请用版本比较高的Firefox和Chrome浏览器观看此动画。</p> <p><a href="/misc/goto?guid=4958346161841977641" target="_blank"><img style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" alt="分享6个非常酷的图片特效(HTML5和jQuery)" src="https://simg.open-open.com/show/b9589e4a6f79306753ef9014ba823a29.png" width="560" height="568" /></a></p> <p>2、<a href="/misc/goto?guid=4958346163394715149" target="_blank">CSS3机器猫</a></p> <p>这是一个用纯CSS3画出来的机器猫,没有加一张图片。值得大家注意的是,这只CSS3机器猫的眼睛还是会动的哦。</p> <p><a href="/misc/goto?guid=4958346163394715149" target="_blank"><img style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" alt="分享6个非常酷的图片特效(HTML5和jQuery)" src="https://simg.open-open.com/show/e733172df931a9c335279bf1015dc7e6.jpg" width="418" height="505" /></a></p> <p>3、<a href="/misc/goto?guid=4958346164935688042" target="_blank">jQuery乌鸦飞行动画</a></p> <p>这是一个完全由jQuery控制的乌鸦飞行动画,通过对飞行参数的控制,乌鸦以不同的方式展翅飞翔,非常有爱。</p> <p><a href="/misc/goto?guid=4958346164935688042" target="_blank"><img style="border-bottom:medium none;border-left:medium none;width:562px;height:231px;border-top:medium none;border-right:medium none;" alt="分享6个非常酷的图片特效(HTML5和jQuery)" src="https://simg.open-open.com/show/be1601e4ca3cd56f6053c13565e480fd.jpg" width="947" height="337" /></a></p> <p>4、<a href="/misc/goto?guid=4958346166460371490" target="_blank">HTML5像素图片动画特效</a></p> <p>这是一个基于HTML5技术的图片动画特效,该动画将一张100*100像素的gif图片切合成一个个像素然后随着鼠标的点击,这一个个像素便会分散和聚合,很让人震撼。</p> <p><a href="/misc/goto?guid=4958346166460371490" target="_blank"><img style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" alt="分享6个非常酷的图片特效(HTML5和jQuery)" src="https://simg.open-open.com/show/2b8509891b2c31cec268ecd4e886ddaa.jpg" width="294" height="457" /></a></p> <p>5、<a href="/misc/goto?guid=4958346168014937179" target="_blank">HTML5绘制人脸特效</a></p> <p>这是利用HTML5实现的人脸绘制程序,该人脸绘制程序使用方向键选择人脸的具体信息(上下键选择面部位置,左右键切换某个面部),由于是在Canvas画布上绘制,效果令人十分惊讶。</p> <p><a href="/misc/goto?guid=4958346168014937179" target="_blank"><img style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" alt="分享6个非常酷的图片特效(HTML5和jQuery)" src="https://simg.open-open.com/show/092692e35d6f34c2d65bcff2c4c7f370.jpg" width="452" height="397" /></a></p> <p>6、<a href="/misc/goto?guid=4958346169534417113" target="_blank">jQuery结合CSS实现的右上角翻页效果</a></p> <p>曾经在QQ空间看到过一种广告的展现形式,那就是在页面右上角悬浮一个页角,等你鼠标移上去就像翻书一样把页面展开来,达到显示广告的目的,这种方式对用户来说比较友好,不用强制性去看广告。那么,这种翻页效果是如何实现的呢?今天我就要给大家分享如何实现这种翻页效果。</p> <p><a href="/misc/goto?guid=4958346169534417113" target="_blank"><img style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" alt="分享6个非常酷的图片特效(HTML5和jQuery)" src="https://simg.open-open.com/show/c8560336e9d729bdc239c7ebd1bed6b3.jpg" width="311" height="327" /></a></p> <p>以上这些图片特效希望大家能喜欢。<br /> <br /> 载自: <a href="/misc/goto?guid=4958346171076191723" rel="nofollow" target="_blank">http://blog.csdn.net/html5_dev/article/details/7698507</a> </p>