html 图片选中效果,使用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为“hidd