svg配合css3动画_带有Adobe Illustrator，HTML和CSS的任何网站的SVG动画

最新推荐文章于 2023-08-14 19:30:32 发布

weixin_26732881

最新推荐文章于 2023-08-14 19:30:32 发布

阅读量377

点赞数

文章标签： css html svg js css3 ViewUI

原文链接：https://uxdesign.cc/svg-animation-for-any-website-with-adobe-illustrator-html-and-css-87acaf1a2044

版权

svg配合css3动画

A top trend in web design for 2020 is the increased use of SVG animations on web pages and in logo design. In this article, we will implement a simple and straight forward method to create relatively complex animation. We will use Adobe Illustrator, although a similar program capable of creating SVG files will suffice. On our web page we will use HTML and CSS to animate our SVG.

2020年网页设计的主要趋势是在网页和徽标设计中增加使用SVG动画。在本文中，我们将实现一种简单直接的方法来创建相对复杂的动画。我们将使用Adobe Illustrator，尽管能够创建SVG文件的类似程序就足够了。在我们的网页上，我们将使用HTML和CSS对SVG进行动画处理。

In this tutorial, we will create the IRIS WEB CORE logo.

在本教程中，我们将创建IRIS WEB CORE徽标。

So let’s begin.

因此，让我们开始吧。

Open Adobe Illustrator and hit “Create new…”, set the artboard width to 1300px and the height to 723px

打开Adobe Illustrator并单击“ Create new…”，将画板宽度设置为1300px，高度设置为723px

Type in some text and hit “ctrl + t” on your keyboard on PC or “Command + t” on Mac.

输入一些文字，然后在PC上的键盘上按“ ctrl + t”，在Mac上按“ Command + t”。

Set the font size to “72pt”, the letter tracking to “100” and the font family to “Helvetica”

将字体大小设置为“ 72pt”，字母跟踪设置为“ 100”，字体系列设置为“ Helvetica”

Hit “Document Setup” and select “Edit Artboards”. Move the edges of the art board closer to the edges of the text.

点击“文档设置”，然后选择“编辑画板”。将画板的边缘移到更靠近文本边缘的位置。

Select the text and set the Fill property to “None” and the Stroke property to “White” and “2pt”

选择文本并将“填充”属性设置为“无”，将“描边”属性设置为“白色”和“ 2pt”

Go to “File” and “Save As”. Choose the destination for the file and select from the “Save as type” dropdown list “SVG (*.SVG)” and hit “Save”

转到“文件”和“另存为”。选择文件的目标，然后从“另存为类型”下拉列表中选择“ SVG(* .SVG)”，然后单击“保存”

From the following menu on the Fonts group select from the “Type:” dropdown list “Convert to outline”. Hit the “SVG Code…” button. In the text editor that will open remove the first two lines of code before the <svg></svg> tag.

从“字体”组的以下菜单中，从“类型：”下拉列表中选择“转换为轮廓”。点击“ SVG Code…”按钮。在打开的文本编辑器中，删除<svg> </ svg>标记之前的前两行代码。

Go to the bottom of the file and remove the unnecessary <g></g> tags

转到文件底部，然后删除不必要的<g> </ g>标记

Copy the remaining code and paste it into your HTML document. Close Adobe Illustrator.

复制剩余的代码并将其粘贴到HTML文档中。关闭Adobe Illustrator。

Remove the <style></style> tag from your html document as we will do the styling in the .css file.

从html文档中删除<style> </ style>标记，因为我们将在.css文件中进行样式设置。

To control the size of the SVG Logo and to keep it responsive we set a “max-width: 35em;” on its parent container “.iris-logo-wide”.

为了控制SVG徽标的大小并使其保持响应状态，我们设置了“最大宽度：35em；” 在其父容器“ .iris-logo-wide”上。

To animate our SVG we are concerned with adjusting the following parts of the SVG in our CSS — the “.st0” class and the <path></path> tag.

要为SVG设置动画，我们需要调整CSS中SVG的以下部分-“ .st0”类和<path> </ path>标记。

Copy and paste the following code into your CSS file.

将以下代码复制并粘贴到CSS文件中。

.st0{
  fill:#000;
  stroke:#000;
  stroke-width:2;
  stroke-miterlimit:10;
}path{
  stroke:#000;
  fill: #000;
  stroke-dasharray:1800;
  opacity: 10;
  animation: animate 3s cubic-bezier(0,0.23,1,.1);
}@keyframes animate{
  0%{
   opacity:0;
   fill:none;
   stroke-dashoffset:1800;
 }
 
  30%{
   opacity:1;
   fill:none;
   stroke-dashoffset:1800;
  }
 
  90%{
   fill:rgba(0,0,0,0);
  }
  100%{
   opacity: 1;
   fill:rgba(0,0,0,0);
   stroke-dashoffset:0;
  }
}

We can set up the colors of the stroke and fill of our SVG in the “.st0” class and the <path></path> tag. We have set them up here to black #000. Notice that we started with a white #FFF stroke and no fill color. in Adobe Illustrator. This is valid for all the properties of the SVG, they can be changed in our .css file.

我们可以在“ .st0”类和<path> </ path>标记中设置笔划和SVG填充的颜色。我们将其设置为黑色＃000。请注意，我们从白色#FFF笔划开始，没有填充颜色。在Adobe Illustrator中。这对SVG的所有属性均有效，可以在我们的.css文件中更改它们。

We want to animate the <path></path> tag so we create an animation “@keyframes animate”. At 0% we start with “opacity:0;” “fill:none;” “stroke-dashoffset:1800;” and at 100% we finish with “opacity: 1;” “fill:rgba(0,0,0,0);” “stroke-dashoffset:0;”.

我们要设置<path> </ path>标签的动画，因此我们创建了动画“ @keyframes animate”。在0％时，我们从“ opacity：0;”开始 “填充：无；” “ stroke-dashoffset：1800;” 并以100％的“不透明度：1”结束 “ fill：rgba(0,0,0,0);” “ stroke-dashoffset：0;”。

This is the result

这是结果

You can absolutely customise the animation. Notice that we have used a cubic-bezier animation above. Here is a good place to customize your animation https://cubic-bezier.com/

您可以绝对自定义动画。注意，我们在上面使用了三次方贝塞尔曲线动画。这是自定义动画的好地方https://cubic-bezier.com/

Find the full code for our web page below

在下面找到我们网页的完整代码

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0"><title>iris Web Core</title>
 
 
  <meta name="description" content="IRIS WEB CORE is a Website Design and Digital Marketing Agency experienced in delivering customers through attractive design, strategic SEO and Social Media management." /><meta name="author" content="COPYRIGHT 2020 IRIS WEB CORE LTD ALL RIGHTS RESERVED (developed with care by Fabio Aleksiev at irisWebCore)" />
    
  
 
<link href="site.css" rel="stylesheet" type="text/css">
  
</head><body><div class="hero"><div class="iris-logo-wide">
   
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  viewBox="0 0 640 72" style="enable-background:new 0 0 640 72;" xml:space="preserve"><g>
 <path class="st0" d="M7.1,9.9h7.1v51.6H7.1V9.9z"/>
 <path class="st0" d="M33.5,9.9h23.9c3.9,0,7.2,0.6,9.7,1.7c4.9,2.2,7.3,6.3,7.3,12.2c0,3.1-0.6,5.6-1.9,7.6c-1.3,2-3.1,3.6-5.4,4.7
  c2,0.8,3.5,1.9,4.6,3.2s1.6,3.5,1.7,6.5l0.2,6.9c0.1,2,0.2,3.4,0.5,4.4c0.4,1.6,1.2,2.7,2.3,3.2v1.2h-8.6c-0.2-0.4-0.4-1-0.6-1.7
  s-0.3-2.1-0.4-4.1l-0.4-8.6c-0.2-3.4-1.4-5.6-3.8-6.8c-1.3-0.6-3.4-0.9-6.3-0.9H40.5v22.1h-7V9.9z M56.7,33.5c3.3,0,5.9-0.7,7.8-2
  c1.9-1.3,2.9-3.7,2.9-7.1c0-3.7-1.3-6.2-4-7.5c-1.4-0.7-3.3-1.1-5.7-1.1H40.5v17.6H56.7z"/>
 <path class="st0" d="M93.5,9.9h7.1v51.6h-7.1V9.9z"/>
 <path class="st0" d="M123.7,44.8c0.2,2.9,0.9,5.3,2.1,7.1c2.3,3.4,6.4,5.1,12.3,5.1c2.6,0,5-0.4,7.2-1.1c4.2-1.5,6.3-4.1,6.3-7.8
  c0-2.8-0.9-4.8-2.6-6c-1.8-1.2-4.6-2.2-8.4-3.1l-7-1.6c-4.6-1-7.8-2.2-9.7-3.4c-3.3-2.2-4.9-5.4-4.9-9.7c0-4.6,1.6-8.4,4.8-11.4
  c3.2-3,7.8-4.5,13.6-4.5c5.4,0,10,1.3,13.8,3.9c3.8,2.6,5.7,6.8,5.7,12.5h-6.6c-0.4-2.8-1.1-4.9-2.3-6.4c-2.1-2.7-5.8-4-10.9-4
  c-4.1,0-7.1,0.9-8.9,2.6c-1.8,1.7-2.7,3.8-2.7,6c0,2.5,1.1,4.4,3.2,5.6c1.4,0.8,4.5,1.7,9.4,2.8l7.2,1.7c3.5,0.8,6.2,1.9,8.1,3.3
  c3.3,2.4,4.9,5.9,4.9,10.5c0,5.7-2.1,9.8-6.2,12.3s-9,3.7-14.5,3.7c-6.4,0-11.4-1.6-15.1-4.9c-3.6-3.3-5.4-7.7-5.3-13.3H123.7z"/>
 <path class="st0" d="M204.9,9.9l9.7,42l11.7-42h7.6l11.7,42l9.7-42h7.7l-13.6,51.6h-7.3l-11.9-42.8l-12,42.8h-7.3L197.3,9.9H204.9z
  "/>
 <path class="st0" d="M277.3,9.9H315v6.3h-30.8v15.7h28.5v6h-28.5v17.5h31.4v6.2h-38.2V9.9z"/>
 <path class="st0" d="M331.7,9.9h22.2c6,0,10.3,1.8,12.9,5.4c1.5,2.1,2.3,4.6,2.3,7.4c0,3.3-0.9,5.9-2.8,8c-1,1.1-2.3,2.1-4.1,3
  c2.6,1,4.6,2.1,5.9,3.4c2.3,2.3,3.5,5.4,3.5,9.3c0,3.3-1,6.3-3.1,9c-3.1,4-8.1,6-14.9,6h-21.8V9.9z M351.3,31.7
  c3,0,5.3-0.4,6.9-1.2c2.6-1.3,3.9-3.6,3.9-7c0-3.4-1.4-5.6-4.1-6.8c-1.5-0.7-3.8-1-6.9-1h-12.5v16H351.3z M353.7,55.5
  c4.3,0,7.3-1.2,9.2-3.7c1.1-1.6,1.7-3.5,1.7-5.7c0-3.7-1.7-6.3-5-7.7c-1.8-0.7-4.1-1.1-7.1-1.1h-13.9v18.2H353.7z"/>
 <path class="st0" d="M451.3,13.6c3.6,3.4,5.6,7.4,6,11.7h-6.8c-0.8-3.3-2.3-6-4.6-7.9c-2.3-1.9-5.5-2.9-9.7-2.9
  c-5.1,0-9.2,1.8-12.3,5.4c-3.1,3.6-4.7,9.1-4.7,16.4c0,6,1.4,11,4.2,14.7s7,5.6,12.6,5.6c5.2,0,9.1-2,11.8-5.9
  c1.4-2.1,2.5-4.8,3.2-8.2h6.8c-0.6,5.4-2.6,10-6,13.7c-4.1,4.4-9.6,6.6-16.6,6.6c-6,0-11-1.8-15.1-5.4c-5.4-4.8-8.1-12.2-8.1-22.3
  c0-7.6,2-13.9,6-18.7c4.4-5.3,10.4-7.9,18-7.9C442.6,8.4,447.7,10.2,451.3,13.6z"/>
 <path class="st0" d="M516.1,17.2c3.4,4.6,5.1,10.4,5.1,17.5c0,7.7-2,14.1-5.9,19.2c-4.6,6-11.1,9-19.7,9c-7.9,0-14.2-2.6-18.7-7.9
  c-4.1-5.1-6.1-11.5-6.1-19.2c0-7,1.7-13,5.2-17.9c4.5-6.4,11-9.6,19.8-9.6C504.9,8.4,511.7,11.4,516.1,17.2z M509.9,50.1
  c2.8-4.4,4.1-9.5,4.1-15.2c0-6.1-1.6-11-4.8-14.7c-3.2-3.7-7.5-5.6-13-5.6c-5.3,0-9.7,1.8-13.1,5.5c-3.4,3.7-5.1,9.1-5.1,16.2
  c0,5.7,1.4,10.5,4.3,14.5c2.9,3.9,7.6,5.9,14.1,5.9C502.7,56.8,507.1,54.5,509.9,50.1z"/>
 <path class="st0" d="M537.6,9.9h23.9c3.9,0,7.2,0.6,9.7,1.7c4.9,2.2,7.3,6.3,7.3,12.2c0,3.1-0.6,5.6-1.9,7.6s-3.1,3.6-5.4,4.7
  c2,0.8,3.5,1.9,4.6,3.2s1.6,3.5,1.7,6.5l0.2,6.9c0.1,2,0.2,3.4,0.5,4.4c0.4,1.6,1.2,2.7,2.3,3.2v1.2h-8.6c-0.2-0.4-0.4-1-0.6-1.7
  s-0.3-2.1-0.4-4.1l-0.4-8.6c-0.2-3.4-1.4-5.6-3.8-6.8c-1.3-0.6-3.4-0.9-6.3-0.9h-15.9v22.1h-7V9.9z M560.7,33.5
  c3.3,0,5.9-0.7,7.8-2c1.9-1.3,2.9-3.7,2.9-7.1c0-3.7-1.3-6.2-4-7.5c-1.4-0.7-3.3-1.1-5.7-1.1h-17.1v17.6H560.7z"/>
 <path class="st0" d="M596.6,9.9h37.7v6.3h-30.8v15.7h28.5v6h-28.5v17.5h31.4v6.2h-38.2V9.9z"/>
</g>
</svg></div></div></body></html>

CSS

@charset "UTF-8";
/* CSS Document */html, 
html * {
 padding: 0;
 margin: 0 auto;
 box-sizing: border-box;
 max-width: 1300px;
}.iris-logo-wide {
 margin: 0 auto;
 max-width: 35em;}body {
 
 padding: 1em;
 height: 100em;
 background-image: url("https://s3.wasabisys.com/core/Model_G_@80.jpg");
 background-repeat: no-repeat;
  background-position: top;
 background-size: cover;
 
}.st0{
 fill:#000;
 stroke:#000;
 stroke-width:2;
 stroke-miterlimit:10;
}path{
 stroke:#000;
 fill: #000;
 stroke-dasharray:1800;
 opacity: 10;
 animation: animate 3s cubic-bezier(0,0.23,1,.1);
}@keyframes animate{
 0%{
  opacity:0;
  fill:none;
  stroke-dashoffset:1800;
 }
 
 30%{
  opacity:1;
  fill:none;
  stroke-dashoffset:1800;
 }
 
 90%{
  fill:rgba(0,0,0,0);
 }
 100%{
  opacity: 1;
  fill:rgba(0,0,0,0);
  stroke-dashoffset:0;
 }
}