svg配合css3动画_带有Adobe Illustrator，HTML和CSS的任何网站的SVG动画
svg配合css3動(dòng)畫
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年網(wǎng)頁(yè)設(shè)計(jì)的主要趨勢(shì)是在網(wǎng)頁(yè)和徽標(biāo)設(shè)計(jì)中增加使用SVG動(dòng)畫。 在本文中，我們將實(shí)現(xiàn)一種簡(jiǎn)單直接的方法來(lái)創(chuàng)建相對(duì)復(fù)雜的動(dòng)畫。 我們將使用Adobe Illustrator，盡管能夠創(chuàng)建SVG文件的類似程序就足夠了。 在我們的網(wǎng)頁(yè)上，我們將使用HTML和CSS對(duì)SVG進(jìn)行動(dòng)畫處理。
In this tutorial, we will create the IRIS WEB CORE logo.
在本教程中，我們將創(chuàng)建IRIS WEB CORE徽標(biāo)。
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…”，將畫板寬度設(shè)置為1300px，高度設(shè)置為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”
將字體大小設(shè)置為“ 72pt”，字母跟蹤設(shè)置為“ 100”，字體系列設(shè)置為“ Helvetica”
Hit “Document Setup” and select “Edit Artboards”. Move the edges of the art board closer to the edges of the text.
點(diǎn)擊“文檔設(shè)置”，然后選擇“編輯畫板”。 將畫板的邊緣移到更靠近文本邊緣的位置。
Select the text and set the Fill property to “None” and the Stroke property to “White” and “2pt”
選擇文本并將“填充”屬性設(shè)置為“無(wú)”，將“描邊”屬性設(shè)置為“白色”和“ 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”
轉(zhuǎn)到“文件”和“另存為”。 選擇文件的目標(biāo)，然后從“另存為類型”下拉列表中選擇“ 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.
從“字體”組的以下菜單中，從“類型：”下拉列表中選擇“轉(zhuǎn)換為輪廓”。 點(diǎn)擊“ SVG Code…”按鈕。 在打開的文本編輯器中，刪除<svg> </ svg>標(biāo)記之前的前兩行代碼。
Go to the bottom of the file and remove the unnecessary <g></g> tags
轉(zhuǎn)到文件底部，然后刪除不必要的<g> </ g>標(biāo)記
Copy the remaining code and paste it into your HTML document. Close Adobe Illustrator.
復(fù)制剩余的代碼并將其粘貼到HTML文檔中。 關(guān)閉Adobe Illustrator。
Remove the <style></style> tag from your html document as we will do the styling in the .css file.
從html文檔中刪除<style> </ style>標(biāo)記，因?yàn)槲覀儗⒃?css文件中進(jìn)行樣式設(shè)置。
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徽標(biāo)的大小并使其保持響應(yīng)狀態(tài)，我們?cè)O(shè)置了“最大寬度：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設(shè)置動(dòng)畫，我們需要調(diào)整CSS中SVG的以下部分-“ .st0”類和<path> </ path>標(biāo)記。
Copy and paste the following code into your CSS file.
將以下代碼復(fù)制并粘貼到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>標(biāo)記中設(shè)置筆劃和SVG填充的顏色。 我們將其設(shè)置為黑色＃000。 請(qǐng)注意，我們從白色#FFF筆劃開始，沒(méi)有填充顏色。 在Adobe Illustrator中。 這對(duì)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;”.
我們要設(shè)置<path> </ path>標(biāo)簽的動(dòng)畫，因此我們創(chuàng)建了動(dòng)畫“ @keyframes animate”。 在0％時(shí)，我們從“ opacity：0;”開始 “填充：無(wú)；” “ stroke-dashoffset：1800;” 并以100％的“不透明度：1”結(jié)束 “ fill：rgba(0,0,0,0);” “ stroke-dashoffset：0;”。
This is the result
這是結(jié)果
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/
您可以絕對(duì)自定義動(dòng)畫。 注意，我們?cè)谏厦媸褂昧巳畏截惾麪柷€動(dòng)畫。 這是自定義動(dòng)畫的好地方https://cubic-bezier.com/
Find the full code for our web page below
在下面找到我們網(wǎng)頁(yè)的完整代碼
HTML
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
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;
}
}
Get Adobe Illustrator from here https://www.adobe.com/products/illustrator.html
從這里https://www.adobe.com/products/illustrator.html獲取Adobe Illustrator
That is it my friends, if you liked this article visit our Facebook page and our website IRIS WEB CORE.
就是我的朋友們，如果您喜歡這篇文章，請(qǐng)?jiān)L問(wèn)我們的Facebook頁(yè)面和我們的網(wǎng)站IRIS WEB CORE 。
And as always have a great day!
一如既往的美好！
Find me on LinkedIn: https://www.linkedin.com/in/fabio-aleksiev-irsctx
在LinkedIn上找到我： https : //www.linkedin.com/in/fabio-aleksiev-irsctx
翻譯自: https://uxdesign.cc/svg-animation-for-any-website-with-adobe-illustrator-html-and-css-87acaf1a2044
svg配合css3動(dòng)畫
總結(jié)
以上是生活随笔為你收集整理的svg配合css3动画_带有Adobe Illustrator，HTML和CSS的任何网站的SVG动画的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Grasshopper Essentia
- 下一篇： 前端学习（148）:html和xhtml