html5 svg和css3超神奇图片鼠标hover动画效果

当前位置:主页 > Html5库 > HTML5动画 > html5 svg和css3超神奇图片鼠标hover动画效果
html5 svg和css3超神奇图片鼠标hover动画效果
分享:

    插件介绍

    html5 svg和css3合力打造的一款鼠标hover动画效果,共有3种效果,构思奇特,一起来见证奇迹吧!

    浏览器兼容性

    浏览器兼容性
    时间:2014-10-19
    阅读:

简要教程

本教程将大家一起研究一种在Christmas Experiments网站上的另类图片hover效果。我们将使用svg来创建图形,使用Snap.svg使它运动起来。

如果你曾经访问过新版的Christmas Experiments网站,那么你一定被网站上的日历效果所吸引。今天我们将和大家一起来研究如何使用SVG和Snap.svg来实现这种效果。思路是用svg创建一个带标题的背景,然后在鼠标hover的时候使它变形为另一种形状。有很多可行的方案来制作它,今天我们将创建三种不同的效果。利用SVG的好处是,我们可以任意调整它在父容器中的大小,将它们做成流式布局。

更详细的教程请参看使用HTML5 SVG和CSS3制作神奇的图片HOVER效果