SVG

使用SVG完成悬浮时形状样式变化的效果

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

页面

返回顶部