使用 SVG 轻松打造具有科幻元素的用户界面

1,559 阅读3分钟
原文链接: svgtrick.com

在浏览器越来越先进的今天,我们可以充分发挥想象力来使用代码来打造非常漂亮舒畅的用户界面,比如今天这篇文章就介绍使用SVG来实现具有科幻效果的用户界面。

首先来看看效果,如下图所示:

第一步创建基本的形状元素

首先使用矢量设计软件设计一个六边形的形状元素。如下图所示:

首先打开打开设计软件,这里是使用Illustrator来设计的,这里就省略了,在Illustrator中对应的形状工具,可以很轻松的使用钢笔工具来设计出六边形。

需要注意的一点是,在从Illustrator导出SVG前,要在菜单中把六边形转换为复合路径。如果不转换成复合路径的话,那导出的SVG将会是polygons元素,而polygons元素不能作为剪裁路径使用,所以要把六边形转换为复合路径。

如下图所示,现在文档中,选中你要转换为复合路径的形状,然后在菜单栏中的对象选项中选择复合路径,点击建立就可以了:

剪裁元素

导出优化后的SVG代码后,编写如下代码所示:

<svg xmlns="http://www.w3.org/2000/svg" id="moon-nav" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500">
    <path fill="#FFFFFF" stroke="#231F20" d="M127.9,458.6L5.5,246.7l122.4-212h244.8l122.4,212l-122.4,212 H127.9z" />
    <image width="500" height="500" id="hexagon-pattern" xlink:href="orange-hexagon.png" >
    </image>
    <image width="500" height="500" id="luna" xlink:href="luna.png" >
    </image>
</svg>

要创建如下图所示的效果:

我们需要把导出的路径作为剪裁路径使用clipPath元素包裹起来,来剪裁图片,就可以实现你想要的效果。而且还可以添加文字,使用X和Y值来定好文字的位置。很轻松的就可以实现上图的效果,如下图所示:

<svg xmlns="http://www.w3.org/2000/svg" id="moon-nav" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500">
    <a xlink:href="http://www.google.com/moon/" title="Luna">
        <clipPath id="moon">
            <path fill="#FFFFFF" stroke="#231F20" d="M127.9,458.6L5.5,246.7l122.4-212h244.8l122.4,212l-122.4,212 H127.9z" />
        </clipPath>
        <image width="500" height="500" clip-path="url(#moon)" id="hexagon-pattern" xlink:href="orange-hexagon.png" >
        </image>
        <image width="500" height="500" clip-path="url(#moon)" id="luna" xlink:href="luna.png" >
        </image>
        <text x="150" y="250" id="lune">LUNA</text>
    </a>
</svg>

添加CSS代码

现在图片还没交户效果。添加一点点CSS代码就可以实现鼠标滑过的交互效果:

svg#moon-nav image {
    opacity: 0;
    transition: 1s opacity;
}
svg#moon-nav a:hover image { 
    opacity: 1;
}
svg#moon-nav a text {
    font-family: Verdana, sans-serif;
    font-size: 65px; fill: #fff;
}

上面的代码,主要就是实现了鼠标滑板形状显示图片的效果。

把SVG代码插入到页面中

最后一步就是把SVG代码插入到HTML中,最终就实现了文章开头所述的效果。

具体代码可以去这里查看

效果主要是来自于这篇文章