html svg 浮动位置,使用SVG完成悬浮时形状样式变化的效果

在这篇教程里，我们将重新创建一个类似The Christmas Experiments网站中看到的hover样式。我们将通过SVG制作出形状，然后使用Snap.svg做出hover时的动画效果。

如果你已经访问过The Christmas Experiments最新版本的网站，你可能会注意到其中Christmas calendar很酷的三角状的hover效果。那个形状其实是一个带边框的三角形。今天我会向您展示，如何使用SVG和Snap.svg做出同样的效果。我们的想法是，使用一条路径创建一个SVG，用它来表示caption的形状背景，然后在hover时改变这个路径。完成这一任务有很多种创作的可能性，今天我们将做出三个不同的示例。使用SVG的好处是，我们可以根据父容器的大小调整形状的大小，使一切都成为流动的。

那么，现在开始吧！

标记

首先我们要做的，是在类似Adobe Illustrator 或 Inkscape的矢量图编辑器中绘制两个形状。每个形状将包括一条路径，完成之后，复制路径的各个点，这些点将在标记中使用。注意我们已经将一个多边形装换成了一条路径。如果你使用的是Inkscape，你可以通过这样的步骤实现：选择对象，Path>Object to Path。路径的点可以通过Edit>XML Editor…获取到。这将会打开如下面截图中看到的视图：

“d”(路径数据)值就是你需要的。

对于这个标记，我们将有一个class为“grid”的区域，其中包括被包在锚点中的figure。你也可以在这儿使用一个列表，这样将会需要一些额外的标记。

这个figure将包含图象、最初可见的形状和一个figcaption：

Crystalline

Soko radicchio bunya nuts gram dulse.

View

对于每个图象，SVG都会有其相应的viewBox值，并且设置属性preserveAspectRatio的值为“none”。这将允许我们缩放和伸展形状到我们想要的尺寸，即100%。我们将在样式表中定义宽度和高度。hover路径的信息将会存储在锚点的数据属性data-path-hover中。

CSS

注意CSS将不会包括任何vendor prefixes(-webkit、-moz等)，但你可以在文件中找到它们。

我们将看到的样式是为全部三个示例而写的。首先，我们将查看公共样式，然后为不同demo分别设置样式。

让我们从grid开始吧。我们需要使它居中，然后设置一个max-width和一个百分比表示的width，让其成为流体的：

.grid {

margin: 40px auto 120px;

max-width: 1000px;

width: 90%;

}

锚点应该向左浮动，由于我们想让它们成为流式的，并且一行显示4个项，我们需要为它们设置一个250px的max-width，并且有一个值为25%的width。稍后我们将会为更小尺寸的屏幕定义样式：

.grid a {

float: left;

max-width: 250px;

width: 25%;