使用html5 svg和css3制作神奇的图片hover效果

查看演示 下载地址

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

HTML结构:

我们要做的第一件事是什么呢？应该先用矢量软件制作一个矢量图形。可以用Adobe Illustrator或者Inkscape。每个图形都包含一条路径，我们需要使用它四个角的坐标来完成svg。这里我们将一个矩形转换为路径，如果你使用Inkscape，你可以将整个图形选中，然后选择Path > Object to Path，点的坐标可以在Edit > XML Editor中得到...，可以参考下面的截图：

html结构我们使用一个section，给它加上class grid，然后在其下放置a标签，并在a标签中放入figure，这里你也可以使用无序列表，但会多写一些代码。

figure中将包含一张图片、我们制作的图形和一个figcaption。

每个SVG将有自己的viewBox值，并将preserveAspectRatio设置为none。

这将使我们能够将形状调整和拉伸到我们想要的尺寸。我们将在样式表中定义它的宽度和高度。鼠标hover时图形的信息将保存在data-path-hover中。

CSS样式：

注意：下面的css没有包含各个厂商的前缀。

这些样式将被三种效果使用。首先写通用样式，然后在为每种效果写自己的样式。

先从grid开始，让它居中，并给它一个max-width和一个百分比的宽度，使它具有响应性。

.grid {
    margin: 40px auto 120px;
    max-width: 1000px;
    width: 90%;
}
                            

a元素要左浮动，我们给它一个最大宽度250px，并给它一个25%的实际宽度，这样一行能放4张图片，并且是响应式的。我们后面还要处理小屏幕（平板和手机）的问题。

.grid a {
    float: left;
    max-width: 250px;
    width: 25%;
    color: #333;
}
                            

为了给奇数的图片一些偏移，我们设置顶部的margin 30px，底部的amrgin -30px，这将做出一个很好看的网格，就像Christmas Experiments网站上的那样。

.grid a:nth-child(odd) {
    margin: 30px 0 -30px 0;
}                               
                            

figure要设置为相对定位，因为我们需要设置它的一些子元素为绝对定位。由于鼠标悬停效果可能会导致一些溢出，所以我们要设置overflow为“hidden”。

.grid figure {
    position: relative;
    overflow: hidden;
    margin: 5px;
    background: #333;
}                              
                            

图片要和它的父元素一样宽，透明度设置为0.7左右。当鼠标hover的时候我们希望透明度有所变化，所以加上个transition。

.grid figure img {
    position: relative;
    display: block;
    width: 100%;
    opacity: 0.7;
    transition: opacity 0.3s;
}
                            

figcaption需要绝对定位，并且宽度和高度都设置为100%。

.grid figcaption {
    position: absolute;
    top: 0;
    z-index: 11;
    padding: 10px;
    width: 100%;
    height: 100%;
    text-align: center;
}
                            

h2和p元素在鼠标hover时都会运动，所以我们分别给他们设置transitions。

.grid figcaption h2 {
    margin: 0 0 20px 0;
    color: #3498db;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 300;
    font-size: 130%;
    transition: transform 0.3s;
}

.grid figcaption p {
    padding: 0 20px;
    color: #aaa;
    font-weight: 300;
    transition: opacity 0.3s, transform 0.3s;
}

.grid figcaption h2,
.grid figcaption p {
    transform: translateY(50px);
}
                            

所有效果中的按钮样式都是一样的。按钮在hover时也有一些动画，所以添加一个transition来改变它的透明度和动画效果。

.grid figure button {
    position: absolute;
    padding: 4px 20px;
    border: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
    transition: opacity 0.3s, transform 0.3s;
}
                            

为了避免一些闪烁和抖动，我们需要将所有的动画元素和它们的父元素的backface-visibility设置为hidden。

.grid figcaption,
.grid figcaption h2,
.grid figcaption p,
.grid figure button {
    backface-visibility: hidden;
}
                            

SVG也应该是绝对定位的，并将它的宽和高设置为100%，在Firefox26.0中顶部定位会有一些偏差，所以我们给它的top设置为-1px来修补这个bug。

.grid svg {
    position: absolute;
    top: -1px; /* fixes rendering issue in FF */
    z-index: 10;
    width: 100%;
    height: 100%;
}
                            

使用白色来填充图形的路径。

.grid svg path {
    fill: #fff;
}
                            

通用的鼠标hover效果应该像下边这样:

.grid a:hover figure img {
    opacity: 1;
}

.grid a:hover figcaption h2,
.grid a:hover figcaption p {
    transform: translateY(0);
}

.grid a:hover figcaption p {
    opacity: 0;
}
                            

当标题上升到指定位置后，图片的透明度应该设置为1。

现在，让我们来为每种效果制作各自的样式。

在第一种效果中，我们希望按钮有白色的边并且居中。在最开始的时候它是隐藏和缩小的。我们使用transforms来定位它，并使它缩小，当鼠标hover的时候，我们将使按钮慢慢放大。

.demo-1 body {
    background: #3498db;
}

.demo-1 .grid figure button,
.demo-3 .grid figure button {
    top: 50%;
    left: 50%;
    border: 3px solid #fff;
    background: transparent;
    color: #fff;
    opacity: 0;
    transform: translateY(-50%) translateX(-50%) scale(0.25);
}

.demo-1 .grid a:hover figure button,
.demo-3 .grid a:hover figure button {
    opacity: 1;
    transform: translateY(-50%) translateX(-50%) scale(1);
}
                            

在第二种效果中，我们定义了其它一些颜色来使按钮隐藏在figure下面。我们设置它的bottom为0,然后translate它到100%，当鼠标hover的时候，我们将它的上升效果设置为“ease-out”。

.demo-2 body {
    background: #e74c3c;
}

.demo-2 .grid figcaption h2 {
    color: #e74c3c;
}

.demo-2 .grid figcaption p {
    transition-delay: 0.05s;
}

.demo-2 .grid figure button {
    bottom: 0;
    left: 0;
    padding: 15px;
    width: 100%;
    background: #fff;
    color: #333;
    font-weight: 300;
    transform: translateY(100%);
}

.demo-2 .grid a:hover figure button {
    transition-timing-function: ease-out;
    transform: translateY(0);
}
                            

第二和第三种效果的标题和段落设置一种“cubic-bezier”效果，这将有助于模拟弹性过渡，当鼠标悬停的时候我们设置段落的延时为0，这将能确保党SVG图形到达顶部时段落能很快的消失。

.demo-2 .grid figcaption h2, 
.demo-2 .grid figcaption p,
.demo-3 .grid figcaption h2,
.demo-3 .grid figcaption p {
    timing-function: cubic-bezier(0.250, 0.250, 0.115, 1.445);
}

.demo-2 .grid a:hover figcaption p,
.demo-3 .grid a:hover figcaption p {
    transition-delay: 0s;
    transition-duration: 0.1s;
}
                            

第三种效果我们将改变一些颜色，在鼠标hover时将标题translate一点，而不是设为0。

.demo-3 body {
    background: #52be7f;
}

.demo-3 .grid figcaption h2 {
    color: #52be7f;
}

.demo-3 .grid a:hover figcaption h2 {
    transform: translateY(5px);
}
                            

对于小屏幕，我们要改变每行显示的图片数量，我们将重置宽度和奇数子元素的margin，第2、5、8、11个a元素要设置一个margin，可以通过nth-child(3n-1)来实现。

小提示：如果你想快速的找到某种序列的表达式，你可以到WolframAlpha去输入你的序列，它能很快的计算出该序列的表达式。

对于更小尺寸的屏幕，我们将通过设置max-width和标题的margins来控制它。

@media screen and (max-width: 58em) {
    .grid a {
        width: 33.333%;
    }

    .grid a:nth-child(odd) {
        margin: 0;
    }

    .grid a:nth-child(3n-1) {
        margin: 30px 0 -30px 0;
    }
}

@media screen and (max-width: 45em) {
    .grid {
        max-width: 500px;
    }

    .grid a {
        width: 50%;
    }

    .grid a:nth-child(3n-1) {
        margin: 0;
    }

    .grid a:nth-child(even) {
        margin: 30px 0 -30px 0;
    }


    .grid figcaption h2 {
        margin-bottom: 0px;
        transform: translateY(30px);
    }

    .grid figcaption p {
        margin: 0;
        padding: 0 10px;
    }
}

@media screen and (max-width: 27em) {
    .grid {
        max-width: 250px;
    }

    .grid a {
        width: 100%;
    }

    .grid a:nth-child(even) {
        margin: 0;
    }
}
                            

JAVASCRIPT

我们将使用Snap.svg，它是一个很棒的SVGs库，要想知道它是如何工作的，请先看一下它的文档和入门教程。

我们先设置speed和easing的值，然后创建一个变量来保存路径上的信息和悬停的路径。当鼠标悬停的时候，我们将动画路径转变为“to”状态，鼠标离开时，将动画转变为“form”状态。

(function() {
    
    function init() {
        var speed = 250,
            easing = mina.easeinout;

        [].slice.call ( document.querySelectorAll( '#grid > a' ) ).forEach( function( el ) {
            var s = Snap( el.querySelector( 'svg' ) ), path = s.select( 'path' ),
                pathConfig = {
                    from : path.attr( 'd' ),
                    to : el.getAttribute( 'data-path-hover' )
                };

            el.addEventListener( 'mouseenter', function() {
                path.animate( { 'path' : pathConfig.to }, speed, easing );
            } );

            el.addEventListener( 'mouseleave', function() {
                path.animate( { 'path' : pathConfig.from }, speed, easing );
            } );
        } );
    }

    init();

})();
                            

教程就到这里，我们展示了三种效果，你可以发挥想象，制作更多的神奇效果！

查看演示 下载地址