資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 CSS 建立繪圖效果動畫
概述
層疊樣式表 (CSS) 動畫為頁面上的 HTML 元素提供了運動效果。為了實現繪圖效果動畫，我們需要預先了解 HTML svg 元素、path 元素，以及 CSS 中的動畫和關鍵幀屬性。由於 svg 元素提供了一個構建自定義影像的空間，可以使用 <path> 元素插入。因此，要製作繪圖動畫，我們應該掌握構建 svg 描邊的知識。
svg path 元素具有以下用於構建描邊的點資料：移動到 (M)、線條到 (L)、水平線條到 (H)、垂直線條到 (V)、曲線到 (C)、平滑曲線到 (S)、閉合路徑 (Z)、橢圓弧 (A)、二次貝塞爾曲線 (Q) 和平滑二次貝塞爾曲線 (T)。點資料名稱後面跟著括號名稱，該名稱將在“d”屬性中使用以構建 svg 繪圖。
方法 1：繪製形狀
演算法
步驟 1 - 在文字編輯器中建立一個 HTML 檔案，並將 HTML 基本結構新增到 HTML 檔案中。
步驟 2 - 現在在 body 標籤內建立一個 svg 元素框容器，向 svg 元素新增 viewbox 屬性。viewbox 元素接受 x 軸、y 軸、寬度和高度作為輸入值。
<svg viewBox="0 0 500 500"></svg>
步驟 3 - 現在為 svg 元素建立一個 path 元素，它將包含 svg 描邊線條的點資料。
<path class="path" fill="white" stroke="green"/>
步驟 4 - 現在建立 svg 點資料形狀，並將其新增到“d”屬性中。
<path class="path" fill="white" stroke="green" stroke-width="40"
d="M140 20C73 20 20 74 20 140c0 135 136 170 228 303 88-132 229-173 229-303 0-66-54-120-120-120-48 0-90 28-109 69-19-41-60-69-108-69z" />
步驟 5 - 您還可以新增一些屬性，如 stroke、stroke-width 和 fill。
步驟 6 - 現在將 style 標籤新增到 head 標籤中，並在必要時對佈局進行樣式設定。
<style>
h3 {
text-align: center;
color: green;
font-family: 'Segoe UI';
}
</style>
步驟 7 - 現在定位 path 元素，並設定 svg 的 stroke-dasharray 和 stroke-dash-offset，為繪圖動畫新增 animation 屬性。
<style>
.path {
stroke-dasharray: 3000;
stroke-dashoffset: 3000;
animation: drawing 5s linear forwards infinite;
}
</style>
步驟 8 - 現在為上面 path 元素建立的動畫名稱新增 @keyframe 屬性。
<style>
.path {
stroke-dasharray: 3000;
stroke-dashoffset: 3000;
animation: drawing 5s linear forwards infinite;
}
@keyframes drawing {
to {
stroke-dashoffset: 0;
}
}
</style>
步驟 9 - 開啟瀏覽器，繪圖效果成功建立。
示例
我們將使用 svg path 建立一個心形繪圖效果。因此，要構建它，請建立一個 svg 元素並在 svg 標籤內新增一個 path 標籤，path 標籤有一個“d”屬性，它將心形的點資料作為座標。建立完成後，我們將使用 animation 屬性透過設定 stroke-dashoffset 的值來為 path 元素設定動畫。
<html>
<head>
<style>
h3 {
text-align: center;
color: green;
font-family: 'Segoe UI';
}
.path {
stroke-dasharray: 3000;
stroke-dashoffset: 3000;
animation: drawing 5s linear forwards infinite;
}
@keyframes drawing {
to {
stroke-dashoffset: 0;
}
}
</style>
</head>
<body>
<h3>tutorialspoint.com</h3>
<svg viewBox="0 0 500 500" style="width:25%;display:block;margin:auto;">
<path class="path" fill="white" stroke="green" stroke-width="40"
d="M140 20C73 20 20 74 20 140c0 135 136 170 228 303 88-132 229-173 229-303 0-66-54-120-120-120-48 0-90 28-109 69-19-41-60-69-108-69z" />
</svg>
</body>
</html>
方法 2：繪製文字
演算法
步驟 1 - 在文字編輯器中建立一個 HTML 檔案，並將 HTML 基本結構新增到 HTML 檔案中。
步驟 2 - 建立一個父 div 容器，其中包含文字的字母。
<div class="drawing"></div>
步驟 3 - 現在在 body 標籤內建立一個 svg 元素框容器，向 svg 元素新增 viewbox 屬性。viewbox 元素接受 x 軸、y 軸、寬度和高度作為輸入值。
<svg viewBox="0 0 540 340"></svg>
步驟 4 - 現在為 svg 元素建立一個 path 元素，它將包含 svg 描邊線條的點資料。
<path class="path" fill="#0a0a0a" stroke="white" stroke-width="20"/>
步驟 5 - 現在建立 svg 點資料形狀，並將其新增到“d”屬性中。
<path class="path" fill="#0a0a0a" stroke="white" stroke-width="20"
d="m 300 300 v -256 h 95 v 114 h -94 h 94 v 140" />
步驟 6 - 您還可以新增一些屬性，如 stroke、stroke-width 和 fill。
步驟 7 - 要新增更多文字字母，請重複步驟 2、3、4、5。
步驟 8 - 現在將 style 標籤新增到 head 標籤中，並在必要時對佈局進行樣式設定。
<style>
h3 {
text-align: center;
color: white;
font-family: 'Segoe UI';
}
.drawing {
display: flex;
padding-top: 2rem;
}
</style>
步驟 9 - 現在定位 path 元素，並設定 svg 的 stroke-dasharray 和 stroke-dash-offset，為繪圖動畫新增 animation 屬性。
<style>
.path {
stroke-dasharray: 3000;
stroke-dashoffset: 3000;
animation: dash 5s linear forwards;
}
</style>
步驟 10 - 現在為上面 path 元素建立的動畫名稱新增 @keyframe 屬性。
<style>
.path {
stroke-dasharray: 3000;
stroke-dashoffset: 3000;
animation: dash 5s linear forwards;
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
</style>
步驟 11 - 現在開啟瀏覽器，繪圖效果成功建立。
示例
我們將使用文字名稱建立繪圖效果。為此，我們將逐個字母地將路徑新增到 path 元素中。
<html>
<head>
<style>
h3 {
text-align: center;
color: white;
font-family: 'Segoe UI';
}
.drawing {
display: flex;
padding-top: 2rem;
}
.path {
stroke-dasharray: 3000;
stroke-dashoffset: 3000;
animation: dash 5s linear forwards;
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
</style>
</head>
<body style="background-color: #0a0a0a;">
<h3>tutorialspoint.com</h3>
<div class="drawing">
<svg viewBox="0 0 540 340">
<path class="path" fill="#0a0a0a" stroke="white" stroke-width="20"
d="m 300 300 v -256 h 95 v 114 h -94 h 94 v 140" />
</svg>
<svg viewBox="0 0 540 340">
<path class="path" fill="#0a0a0a" stroke="white" stroke-width="20"
d="m 300 300 v -252 h 61 v 112 v -112 h 61 v 252" />
</svg>
<svg viewBox="0 0 540 340">
<path class="path" fill="#0a0a0a" stroke="white" stroke-width="20"
d="m 300 300 v -256 h 95 v 114 h -94 h 94 v 140" />
</svg>
<svg viewBox="0 0 540 340">
<path class="path" fill="#0a0a0a" stroke="white" stroke-width="20" d="m 300 300 v -256 l 90 256 v -256" />
</svg>
</div>
</body>
</html>
結論
如上例所示，我們使用了 stroke、stroke-width 和 fill 屬性，因此 stroke 屬性表示繪圖的顏色，我們可以透過向其中新增顏色值來自定義其顏色，stroke-width 表示繪圖的寬度，fill 屬性表示繪圖元件內部的顏色。此繪圖功能用作網頁設計的圖形元素。
587 次瀏覽
