黔东南公司网站建设:如何使用SVG和CSS创建动画标志-极简慕枫

黔东南公司网站建设:如何使用SVG和CSS创建动画标志

2019-04-24

精心设计动画的选择性使用已经被证明可以改善用户体验,尽管网络是向HTML 5缓慢过渡对于网络动画来说,它的使用也会导致一些并发症.

可伸缩矢量图形(或SVGS)提供了一种可访问的替代方案,提供了一个很好的API以及许多其他优点,它们可以通过对级联样式表的一些创造性的使用而被动画化。

黔东南公司网站建设在本文的过程中,我们将深入探讨使用SVG的所有其他好处,并教您如何将它们与CSS结合起来创建动画标识。

为什么可缩放矢量图形如此酷

不管名称是什么,ScalableVectorGraphics不是一种图像文件格式;它是一种XML标记语言(很像XHTML或xoxo)。这种特定的标记语言用于创建基于矢量的二维图像,这些图像可以向上或向下缩放,而不会造成分辨率上的任何损失。

为了更好地理解这一点,让我们先看看一个简单SVG文件背后的代码,然后再讨论更多这种格式的属性。

下面的示例通过跟踪向量路径并使用填充属性使其着色。请使用您喜欢的文本编辑器(将其保存为.svg文件)复制它,然后在您的Web浏览器中打开它,以查看最终结果(注意徽标是如何无缝缩放的,正如我们前面所讨论的)。

<svg viewBox='0 0 105 93' xmlns='http://www.w3.org/2000/svg'></pre>
<path d='M66,0h39v93zM38,0h-38v93zM52,35l25,58h-16l-8-18h-18z' fill='#ED1C24'/>

</svg>
黔东南公司网站建设

SVG正在行动。

正如你可以想象的那样,在构建一个响应性的网站时,这是非常有用的。然而,由于图形是使用向量呈现的,因此当涉及到复杂图像时,它们往往会占用比所需的更多的数据。由于这一事实,SVG通常不会在图形之外使用,如徽标、信息图形或常规图表(尽管如此)。确实发生了).

除了响应性之外,可伸缩的矢量图形还具有一些内置的图形效果(例如过滤器或混合模式),并且具有非常容易访问的DOMAPI。事实上,如果您已经熟悉CSS和JavaScript(当然您熟悉CSS和JavaScript),那么您应该能够在没有太多麻烦的情况下操作SVG文件。例如,这种灵活性使您能够在服务器端创建SVG文件,并且可以轻松地修改它们,而不必使用专用工具(稍后我们将介绍)。

最后,SVG可以很容易地使用CSS动画,您可能已经从本文的标题(或我们对这一事实的重复引用)中推测到了这一点,我们将在稍后讲到这一点。但是首先,让我们来看看使用专用工具操作SVG的实际过程。

如何使用SVG

正如我们前面提到的,如果您喜欢的话,可以用自己的双手投入SVG。虽然它是一种完全有效的方法,但是有很好的工具可以直接创建和操作SVG,这使得除了简单的CSS样式或动画之外,其他任何东西的代码处理效率都很低。

AdobeIlluStrator, InkscapeMac草图是最受欢迎的选择。在IlluStrator的例子中,创建过程非常简单,只要准备好图像,然后使用存为‘SVG选项。在执行此操作时,您可能会注意到一个名为SVG剖面在下拉菜单上列出了几个选项,如SVG微型(更适合智能手机)和SVG BASIC(这是一个过时的配置文件,用于PDA),但我们将继续使用SVG1.1。

使用这些工具创建SVGS文件的一个不幸的副产品是,它们可以向底层代码中添加大量元数据,从而导致文件比所需的要大。当然,这是网页设计中的一个问题,因为你不想因为你端的优化不好而增加加载时间。然后,必须对可伸缩矢量图形进行优化(在大多数情况下),然后才能将它们合并到您的网站中。

让我们看一个SVG文件的示例,该文件描述了优化前后的Android徽标,以说明这一点:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 105"></pre>
<g fill="#97C024" stroke="#97C024" stroke-linejoin="round" stroke-linecap="round">

<path d="M14,40v24M81,40v24M38,68v24M57,68v24M28,42v31h39v-31z" stroke-width="12"/>

<path d="M32,5l5,10M64,5l-6,10 " stroke-width="2"/>

</g>

<path d="M22,35h51v10h-51zM22,33c0-31,51-31,51,0" fill="#97C024"/>

<g fill="#FFF">

<circle cx="36" cy="22" r="2"/>

<circle cx="59" cy="22" r="2"/>

</g>

</svg>

现在,我们黔东南公司网站建设将通过删除空格、默认属性、样式和其他非必要数据来实现一些优化魔术,我们得到:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 105"><g style="fill:#97C024;stroke-linejoin:round;stroke:#97C024"><path d="M14 40v24M81 40v24M38 68v24M57 68v24M28 42v31h39v-31z"stroke-width="10"/><path d="M32 5l5 10M64 5l-6 10" stroke-width="2"/></g><path d="M22 35h51v10h-51zM22 33c0-31 51-31 51 0" fill="#97C024"/><g fill="#FFF"><circle cx="36" cy="22" r="2"/><circlecx="59" cy="22" r="2"/></g></svg>

虽然最初的SVG文件非常紧凑(0.5kB),但优化过程可以将其文件大小减少12.5%(达到0.4kB)。在更复杂的图片上,当SVG被实现到您的网站时,您会注意到文件大小的极大减少和加载时间的改进。

为了简单起见,我们建议使用诸如联机之类的工具SVG优化器由Peter CollingridorSVGO,一个基于Node.js的开源应用程序。

现在我们已经了解了如何使SVG如此有用,以及如何实际使用它们,让我们看看如何使用CSS来动画使用这种标记语言创建的图形。

用SVG和CSS创建动画标志

正如我们在讨论SVG如此酷的原因时提到的,它们附带了一些内置的图形效果,其中包括动画功能。实际上,SVG有一个仅用于动画的本机语法,称为亚细亚(同步多媒体集成语言),它使您能够在XML标记中直接动画图形的属性。

然而,InternetExplorer从未引入对SMIL的支持Chrome开发者已经讨论过删除对此语法的支持支持CSS和网络动画。与SMIL或JavaScript相比,使用CSS动画SVG也有一个非常简单的优点(尽管有一些库,例如卡扣速度,目的是简化这一过程)。

现在,虽然可伸缩的矢量图形可以作为嵌入式图像、CSS背景或内联图形集成到网站中,但是您只能在最后一个选项中使用CSS动画。这意味着我们只能动画SVG标记,这是直接在我们的HTML代码。

让我们来看看一些例子。还记得我们早些时候看过的SVGAdobe徽标吗?我们将使用一个简单的悬停动画和过渡效果,以改变它的颜色。我们首先为向量路径指定一个类(我们将帮助命名它)。Adobe-徽标),然后将效果添加到样式文件中的该类中。下面是HTML的样子:

<!DOCTYPE html></pre>
<html>

<head>

<title>SVG Transitions</title>

<link rel="stylesheet" href="css/style.css">

</head>

<body>

<!-- The Adobe Logo recreated using SVG -->

<svg viewBox='0 0 105 93' xmlns='http://www.w3.org/2000/svg'>

<path class="adobe-logo" d='M66,0h39v93zM38,0h-38v93zM52,35l25,58h-16l-8-18h-18z' fill='#ED1C24'/>

</svg>

</body>

</html>

现在我们转移到电笔档案:

/* --------------------------

Here we add a little padding and specify a width.

--------------------------- */

body {

padding-top: 5em;

}

svg {

width: 33.32%;

float: left;

}

/* --------------------------

Now we add the actual animation.

--------------------------- */

.adobe-logo {

transition: .3s ease-out;

}

.adobe-logo:hover {

fill: #3881cc;

}

看起来是这样的:

An animation showing the transition between colors using the hover CSS effect.

如果要向同一SVG图形添加填充和笔画效果,而不是悬停动画,代码如下:

/* --------------------------

Fill and strokes.

--------------------------- */

.adobe-logo {

stroke: #fee16e;

}

.adobe-logo:hover {

fill: #feae6e;

stroke-width: 8;

}

.adobe-logo {

transition: .3s ease-out;

}

当一切就绪后,如下所示:

An animation showing the fill and stroke CSS effects in action.

在使用CSS动画SVG图形时,这些只是几个简单的例子,但是如果您想要获得一些真正的灵感,让我们来看看一个使用其他技术(例如分组、转换、旋转、缩放,甚至CSS关键帧)可以完成什么任务的示例:

最后,应该指出CSS动画确实有一些局限性。例如,它不允许您更改元素的实际形状;为此,您需要使用JavaScript动画。有关此主题的进一步阅读,请参阅8个JavaScript库来动画SVG.

结语

如果使用得当,动画可以提高用户体验和网站的总体设计。虽然SVG与CSS相结合提供了一种实现这些功能的优雅方法,但也有很多其他方法可以尝试,直到找到最能满足您需要的方法为止。

如果您确实选择使用支持SVG的CSS动画,请记住遵循上面的建议:

  1. 选择一个兼容的图形编辑器工具。
  2. 记住始终优化SVG代码。
  3. 请记住,您只能使用此技术实现“简单”动画。

如果您想看一下设计人员使用CSS与可伸缩矢量图形结合使用的一些了不起的效果,请查看我们上面列出的额外资源。谁知道呢?你可能会在那里找到一些灵感。