整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
1）transform-origin 屬性：
transform-origin 屬性允許更改轉換元素在 X 軸、Y 軸、Z 軸上的位置。
其語法格式為：
transform-origin: x-axis y-axis z-axis;其屬性值的意義如下所示：
值 | 描述 |
x-axis | 定義視圖被置于 X 軸的何處。 |
y-axis | 定義視圖被置于 Y 軸的何處。 |
z-axis | 定義視圖被置于 Z 軸的何處。 |
注：margin和padding的區別，以下代碼用到
margin和padding的區別
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#father{
height:100px;
width:150px;
margin:20px;
border:5px solid rgb(124, 172, 217);
}
#child{
padding: 50px;
position:absolute;
border:5px solid rgb(122, 166, 207);
background-color:yellow;
transform:rotate(45deg);
transform-origin:80% 90% 1000px;
}
</style>
</head>
<body>
<div id="father">
<div id="child"></div>
</div>
</body>
</html>transform-origin 屬性用來轉換元素在 X 軸、Y 軸、Z 軸上的位置
（2）transform-style 屬性：
transform-style 屬性指定嵌套元素是怎樣在三維空間中呈現。
其語法格式如下所示：
transform-style: flat|preserve-3d;值 | 描述 |
flat | 表示所有子元素在 2D 平面呈現。 |
preserve-3d | 表示所有子元素在 3D 空間中呈現。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#item1{
position:relative;
height:200px;
width:200px;
margin:100px;
padding:10px;
border:1px solid rgb(136, 255, 0);
}
#item2{
padding:50px;
position:absolute;
border:10px solid rgb(48,96, 128);
background-color:rgb(6, 99, 39);
transform:rotateY(60deg);
transform-style: preserve-3d;
}
#item3{
padding:40px;
position:absolute;
border:10px solid rgb(68,13,105);
background-color:yellow;
transform:rotateY(-60deg);
}
</style>
</head>
<body>
<div id="item1">
<div id="item2">
<div id="item3"></div>
</div>
</div>
</body>
</html>（3）perspective 屬性：
perspective 屬性允許你改變 3D 元素查看透視圖的方式。在定義時它是一個元素的子元素透視圖，而不是元素本身。
其語法格式為：
perspective: number|none;值 | 描述 |
number | 元素距離視圖的距離，以像素計算。 |
none | 默認值。與 0 相同。不設置透視。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#item1{
position:relative;
height:150px;
width:150px;
margin:50px;
border:1px solid rgb(31,97,51);
perspective:150;
-webkit-perspective: 150;
}
#item2{
padding:50px;
position:absolute;
border:1px solid rgba(169, 226, 10, 0.959);
background-color:rgba(0, 255, 128, 0.082);
transform:rotateX(45deg);
}
</style>
</head>
<body>
<div id="item1">
<div id="item2">123</div>
</div>
</body>
</html>（4）perspective-origin 屬性：
perspective-origin 屬性定義基于的 X 軸和 Y 軸的 3D 元素。該屬性允許改變 3D 元素的底部位置。
其語法格式為：
perspective-origin: x-axis y-axis;其屬性值的意義如下所示：
值 | 描述 |
x-axis | 定義該視圖在 x 軸上的位置。默認值：50%。 |
y-axis | 定義該視圖在 y 軸上的位置。默認值：50%。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#item1{
position:relative;
height:150px;
width:150px;
margin:50px;
padding:10px;
border:1px solid rgb(13, 111, 124);
perspective:150;
perspective-origin:10% 10%;
-webkit-perspective:150;
-webkit-perspective-origin:10% 10%;
}
#item2{
padding:50px;
position:absolute;
border:1px solid rgb(43, 139, 64);
background-color:#327ceb;
transform:rotateX(45deg);
}
</style>
</head>
<body>
<div id="item1">
<div id="item2">王耶浪Web開發學習筆記</div>
</div>
</body>
</html>（5）練習一下：
完成代碼后，會看到如下效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img{
width:150;
height:250px;
border-radius:25px;
}
.img2:hover{
transform:scale(-1);
}
.img3:hover{
transform:scaleX(-1);
}
.img4:hover{
transform:rotateX(180deg);
transition: transform 1s;
}
</style>
</head>
<body>
<div>
<img src="https://labfile.oss.aliyuncs.com/courses/3429/aneta.jpg" alt="hello " class="img1">
<img src="https://labfile.oss.aliyuncs.com/courses/3429/aneta.jpg" alt="" class="img2">
<br/>
<img src="https://labfile.oss.aliyuncs.com/courses/3429/aneta.jpg" alt="" class="img3">
<img src="https://labfile.oss.aliyuncs.com/courses/3429/aneta.jpg" alt="" class="img4">
</div>
</body>
</html>圖四是漸變的效果
們都被移動的物體和不尋常的方向所吸引。動畫效果可用于改善用戶界面或吸引用戶注意項目的重要部分。
在這篇文章中，我將向您展示如何應用不同的轉換來改善您網站的可用性和設計。
您可以使用CSS屬性以多種不同方式對網站元素進行轉換，從而為網站元素添加效果 transform。此屬性允許您 使用各種變換函數旋轉，縮放，移動和傾斜元素。您還可以在鼠標懸停或鼠標單擊時觸發這些轉換。我將在以后的文章中介紹三維變換。
讓我們看看每個轉換屬性函數。
規模
該 scale 函數允許您增加或減少元素的大小，即按元素縮放元素。
例如，因子 2 會將元素的大小轉換為其原始大小的2倍。同樣，因子 0.4 會將其大小轉換為原始大小的0.4倍。
我們來拍攝尺寸為200 * 200的圖像。
HTML
<img src=“pic.jpg” class=“element” width=“200” height=“200” >
為圖像分配了一個名為“element”的類。
為了使圖像大1.5倍，我們將使用 屬性的 scale 功能 transform。
CSS
.element:hover {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
}
因為我們將1.5作為參數傳遞給scale 函數，所以上面的代碼會將圖像的寬度和高度都增加到原始圖像的1.5倍 。請注意，該 transform 屬性具有供應商前綴 -webkit-， -moz- 并且 -o-。這些是為了獲得所有瀏覽器的最佳支持。
要使轉換平滑，請使用該 transition 屬性。
CSS
.element{
-webkit-transition: transform .2s linear;
-moz-transition: transform .2s linear;
-o-transition: transform .2s linear;
transition: transform .2s linear;
}
.element:hover {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
}
這種轉換特性將使轉換線性發生0.2秒。將鼠標懸停在下圖中可查看此轉換的實時演示。
更具體地說，您可以使用 scaleX 和 scaleY 值分別縮放元素的寬度和高度。
HTML
<img src=“pic.jpg” class=“scale1” width=“200” height=“200” > <img src=“pic.jpg” class=“scale2” width=“200” height=“200” >
CSS
.scale1{
-webkit-transition: transform .2s linear;
-moz-transition: transform .2s linear;
-o-transition: transform .2s linear;
transition: transform .2s linear;
}
.scale1:hover {
-webkit-transform: scaleX(1.2);
-moz-transform: scaleX(1.2);
-o-transform: scaleX(1.2);
transform: scaleX(1.2);
}
.scale2{
-webkit-transition: transform .2s linear;
-moz-transition: transform .2s linear;
-o-transition: transform .2s linear;
transition: transform .2s linear;
}
.scale2:hover {
-webkit-transform: scaleY(.8);
-moz-transform: scaleY(.8);
-o-transform: scaleY(.8);
transform: scaleY(.8);
}
在懸停在各個圖像上時，具有類'scale1'的第一圖像的寬度將增加到其原始寬度的1.2倍，并且具有類'scale2'的第二圖像的高度將減小到其原始高度的0.8倍。嘗試將鼠標懸停在以下圖像上。
現在，考慮您希望將寬度增加到1.2倍并將高度同時降低到元素原始值的0.8倍的情況。為此，您必須為scale 以逗號分隔的函數提供兩個值 。第一個值將縮放其寬度，第二個值將縮放其高度。
CSS
.element{
-webkit-transition: transform .2s linear;
-moz-transition: transform .2s linear;
-o-transition: transform .2s linear;
transition: transform .2s linear;
}
.element:hover {
-webkit-transform: scale(1.2, .8);
-moz-transform: scale(1.2, .8);
-o-transform: scale(1.2, .8);
transform: scale(1.2, .8);
}
您還可以縮放其他CSS屬性，如 填充 和 字體大小。
回轉
這是該transform 物業的另一項功能 。使用此功能，您可以按任何方向旋轉元素，無論您想要哪個方向。正值將順時針旋轉元素，負值將逆時針旋轉。
讓我們嘗試將圖像旋轉一定角度，盡管您可以旋轉幾乎任何像 div，span，headings或paragraph這樣的東西。 您也可以嘗試旋轉整個html體。聽起來怪怪的？試一試吧。
HTML
<img src=“pic.jpg” class=“rotate1” > <img src=“pic.jpg” class=“rotate2” >
CSS
/* first image */
.rotate1{
-webkit-transition: transform .2s linear;
-moz-transition: transform .2s linear;
-o-transition: transform .2s linear;
transition: transform .2s linear;
}
.rotate1:hover {
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
-o-transform: rotate(40deg);
transform: rotate(40deg);
}
/* second image */
.rotate2{
-webkit-transition: transform .2s linear;
-moz-transition: transform .2s linear;
-o-transition: transform .2s linear;
transition: transform .2s linear;
}
.rotate2:hover {
-webkit-transform: rotate(-40deg);
-moz-transform: rotate(-40deg);
-o-transform: rotate(-40deg);
transform: rotate(-40deg);
}
默認情況下，該 rotate 函數沿Z軸旋轉元素。可以專門旋轉沿X，Y的元素，并使用Z軸的功能 rotateX， rotateY 和 rotateZ 分別。我們來看看如何。
HTML
<img src=“pic.jpg” class=“rotate1” > <img src=“pic.jpg” class=“rotate2” > <img src=“pic.jpg” class=“rotate3” >
CSS
/* first image */
.rotate1{
-webkit-transition: transform 1s linear;
-moz-transition: transform 1s linear;
-o-transition: transform 1s linear;
transition: transform 1s linear;
}
.rotate1:hover {
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
transform: rotateX(180deg);
}
/* second image */
.rotate2{
-webkit-transition: transform 1s linear;
-moz-transition: transform 1s linear;
-o-transition: transform 1s linear;
transition: transform 1s linear;
}
.rotate2:hover {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
/* third image */
.rotate3{
-webkit-transition: transform .2s linear;
-moz-transition: transform .2s linear;
-o-transition: transform .2s linear;
transition: transform .2s linear;
}
.rotate3:hover {
-webkit-transform: rotateZ(40deg);
-moz-transform: rotateZ(40deg);
-o-transform: rotateZ(40deg);
transform: rotateZ(40deg);
}
第一和第二表情分別沿X和Y軸旋轉180度。第三個笑臉沿Z軸旋轉40度，這也是默認的旋轉軸。
您可以通過組合這些轉換來創建許多新組合。現在，讓我們轉到另一個轉換函數。
翻譯
您可以使用該translate 功能在水平，垂直或任何其他方向上移動元素 。它只會改變應用它的元素的位置，而不會中斷文檔的正常流動。
translateX 用于水平移動元素。給出正值將使其向右移動并向左移動負值。 translateY 將在垂直方向移動您的元素。同樣，正值會將其向下移動并向上移動負值。
HTML
<img src=“pic.jpg” class=“translate1” > <img src=“pic.jpg” class=“translate2” >
CSS
/* first image */
.translate1{
-webkit-transition: transform .2s linear;
-moz-transition: transform .2s linear;
-o-transition: transform .2s linear;
transition: transform .2s linear;
}
.translate1:hover {
-webkit-transform: translateX(40px);
-moz-transform: translateX(40px);
-o-transform: translateX(40px);
transform: translateX(40px);
}
/* second image */
.rotate2{
-webkit-transition: transform .2s linear;
-moz-transition: transform .2s linear;
-o-transition: transform .2s linear;
transition: transform .2s linear;
}
.rotate2:hover {
-webkit-transform: translateY(20px);
-moz-transform: translateY(20px);
-o-transform: translateY(20px);
transform: translateY(20px);
}
使用該translateX 函數將第一圖像向右移動40px， 使用該translateY 值向下移動第二圖像20px 。您也可以同時水平和垂直移動相同的元素。為此，您必須將兩個參數傳遞translate 給以逗號分隔的 函數。第一個值將水平移動元素，而第二個值將垂直移動元素。
HTML
<img src=“pic.jpg” class=“translate1” >
CSS
.translate1{
-webkit-transition: transform .2s linear;
-moz-transition: transform .2s linear;
-o-transition: transform .2s linear;
transition: transform .2s linear;
}
.translate1:hover {
-webkit-transform: translate(40px,20px);
-moz-transform: translate(40px,20px);
-o-transform: translate(40px,20px);
transform: translate(40px,20px);
}
上圖是跟隨懸停的路徑，其中最終位置向右40px，低于初始位置20px。
瀏覽器支持
除google之外的所有瀏覽器都支持此屬性 。此外， IE 不支持 transform-style：preserve-3d 屬性，因此阻止了3D轉換元素的嵌套。
結論
如果適當應用，各種網站元素的位置和方向的微小動畫轉換可以為您的網站設計帶來生命。這只是關于不同類型轉換的介紹和基本用法的帖子。這些可用于創建非常驚人的效果和動畫，我將在以后的帖子中繼續介紹。
歡迎加評論區討論。整理不易，祝給我收藏關注的大佬發大財emmm。
之前的幾篇文章中，介紹了業界中比較火爆的圖片技術SVG(Scalable Vector Graphics),比如 Iconfont(矢量圖標)+iconmoon(圖標svg互轉)配合javascript來打造屬于自己的個性化社交分享系統 ,我們可以使用svg來打造精美炫酷的分享小圖標(icon)，這一次我們使用python來將普通的靜態的網站logo圖片轉換為帶路徑(path)的svg圖片，這樣就可以讓網站logo能夠變成動態的，作為一名不折騰不舒服斯基，一枚炫酷自帶動畫的網站logo自然能夠滿足我們的折騰欲，同時亦能擊中我們的虛榮心。
首先第一步，先要將靜態圖做一步轉換,以本站的logo作為例子，原理就是在普通的RGB圖像陣列中將其像素進行轉碼操作，并且輸出為svg特有的路徑屬性，當然了使用python進行圖像操作少不了會用到鼎鼎大名的pillow模塊
import sys
import os
from PIL import Image
def convertPixel(r, g, b, a=1):
color="#%02X%02X%02X" % (r, g, b)
opacity=a
return (color, opacity)
for r in sys.argv[1:]:
root, ext=os.path.splitext(r)
image=Image.open(r)
mode=image.mode
pixels=image.load()
width, height=image.size
print(image.mode)
if "RGB" in mode:
output="<svg width="%d" height="%d" viewBox="0 0 %d %d" xmlns="http://www.w3.org/2000/svg">" % (width, height, width, height)
for r in range(height):
for c in range(width):
color, opacity=convertPixel(*pixels[c, r])
output +="<rect x="%d" y="%d" width="1" height="1" fill="%s" fill-opacity="%s"/>" % (c, r, color, opacity)
output +="</svg>"
with open(root + ".svg", "w") as f:
f.write(output)寫好腳本，只需要執行該腳本，參數作為圖片名稱，就可以生成一個同名的svg圖片
python3 png_to_svg.py logo.png需要注意一點，這里有一個坑，在進行像素點矢量轉換的時候，圖片模式只支持RGB三色模式，以png為例子，如果是全彩的24位圖是支持的，但是8位的png圖顯然無法進行轉換，因為它的圖片模式是P模式，在這種情況下，使用python腳本對圖片進行轉換之前，建議用photoshop對圖片進行簡單的模式轉換
OK,我們轉換好圖片之后，可以用編輯器打開svg格式的圖片
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="255.000000pt" height="200.000000pt" viewBox="0 0 255.000000 200.000000"
preserveAspectRatio="xMidYMid meet">
<g class="v3u-icon-group" transform="translate(0.000000,200.000000) scale(0.100000,-0.100000)"
fill="#2b2b2b" stroke="none">
<path class="v3u-icon1" d="M1500 1950 c0 -27 -49 -39 -175 -45 -231 -10 -298 -27 -374 -91 -53
-44 -79 -119 -65 -190 l7 -35 31 29 c36 34 87 62 113 62 10 0 -4 -13 -32 -29
-69 -39 -191 -170 -222 -238 -55 -119 10 -194 193 -223 38 -6 72 -14 76 -18 3
-4 8 -20 10 -37 6 -61 143 -105 330 -105 181 0 238 22 238 93 0 32 -15 48
-132 145 -109 89 -157 105 -234 75 -10 -4 -12 0 -8 11 5 13 -2 16 -42 16 -35
0 -45 3 -34 10 21 14 100 13 100 -1 0 -7 12 -9 34 -5 48 9 103 -13 173 -67 33
-26 69 -47 80 -47 35 0 142 37 179 62 32 22 64 79 64 116 0 65 -53 147 -114
179 -108 56 -326 58 -436 4 l-25 -12 23 20 c84 73 382 68 478 -8 35 -28 47
-16 48 48 1 65 -25 100 -90 123 -65 23 -129 22 -298 -3 -137 -20 -208 -21
-228 -1 -6 6 9 7 39 5 26 -3 104 4 172 16 68 12 143 21 167 21 43 0 44 1 38
28 -11 43 -32 80 -53 92 -24 13 -31 13 -31 0z m-125 -784 c39 -17 45 -40 16
-56 -28 -15 -46 -13 -72 9 -23 19 -24 19 -5 40 23 25 18 24 61 7z"/>
<path class="v3u-icon1" d="M1340 1146 c0 -14 5 -26 10 -26 6 0 10 9 10 19 0 11 -4 23 -10 26 -6
4 -10 -5 -10 -19z"/>
<path class="v3u-icon1" d="M45 738 c-20 -50 -29 -108 -16 -108 8 0 11 -44 11 -140 l0 -140 128
0 127 0 80 140 c43 77 85 140 92 140 12 0 25 36 39 108 l7 33 -98 -3 -98 -3
-18 -65 c-10 -36 -14 -66 -9 -68 8 -3 -39 -115 -54 -130 -3 -3 -6 20 -6 51 0
34 5 61 14 69 12 13 46 112 46 137 0 7 -38 11 -116 11 l-115 0 -14 -32z"/>
<path class="v3u-icon1" d="M626 760 c-37 -12 -66 -38 -82 -77 -27 -64 -23 -68 62 -65 65 3 77 6
81 23 6 23 23 25 23 3 0 -29 -21 -54 -44 -54 -16 0 -26 -7 -30 -22 -9 -35 -8
-38 20 -38 21 0 24 -4 20 -20 -3 -11 -9 -29 -12 -40 -9 -33 -26 -24 -19 10 l7
30 -85 0 -86 0 -12 -53 c-21 -97 6 -117 164 -117 77 0 110 4 137 18 43 21 76
69 85 123 6 33 3 45 -14 63 l-21 23 23 12 c32 17 47 45 54 100 5 43 3 50 -22
69 -24 19 -40 22 -124 21 -53 0 -109 -5 -125 -9z"/>
<path class="v3u-icon1" d="M970 746 c-22 -59 -31 -109 -21 -115 7 -5 2 -37 -14 -96 -29 -104
-32 -157 -9 -176 27 -22 114 -23 156 -1 30 16 38 17 42 6 4 -10 27 -14 88 -14
l83 0 17 63 c10 39 12 64 6 68 -13 9 20 130 41 147 16 13 52 128 43 137 -3 3
-47 5 -98 5 -79 0 -95 -3 -102 -17 -5 -10 -24 -74 -42 -143 -32 -120 -44 -150
-55 -139 -2 3 13 68 34 145 21 76 36 142 34 147 -2 4 -47 7 -99 7 -90 0 -95
-1 -104 -24z"/>
<path class="v3u-icon1" d="M1705 751 c-55 -25 -69 -50 -110 -198 -55 -200 -42 -217 159 -211
109 3 124 5 155 27 32 23 61 75 75 134 l6 27 -89 0 -90 0 -11 -40 c-6 -22 -15
-40 -20 -40 -14 0 -13 0 16 112 15 54 31 98 37 98 9 0 7 -23 -9 -84 l-6 -26
89 0 89 0 27 95 c15 52 27 102 27 110 0 23 -115 21 -128 -1 -9 -16 -11 -16
-33 0 -32 22 -132 21 -184 -3z"/>
<path class="v3u-icon1" d="M2101 747 c-23 -60 -32 -110 -22 -116 14 -9 -22 -139 -43 -155 -11
-8 -46 -102 -46 -123 0 -2 42 -3 93 -3 l94 0 12 41 c9 31 10 44 1 49 -8 5 -8
14 0 36 14 36 24 21 35 -50 11 -79 6 -76 114 -76 l97 0 16 62 c10 35 13 65 8
68 -13 8 20 132 40 150 9 8 24 41 33 73 19 70 20 69 -88 65 l-79 -3 -12 -47
c-7 -29 -8 -48 -2 -50 11 -4 0 -58 -12 -58 -5 0 -12 21 -15 48 -4 26 -10 61
-14 77 l-7 30 -97 3 c-95 3 -97 2 -106 -21z"/>
<path class="v3u-icon1" d="M1377 473 c-3 -5 -10 -27 -17 -51 -6 -24 -14 -50 -17 -58 -4 -11 9
-14 74 -14 l79 0 14 53 c7 28 15 58 17 65 4 9 -14 12 -70 12 -42 0 -78 -3 -80
-7z"/>
<path class="v3u-icon1" d="M1258 204 c-9 -8 3 -44 13 -38 11 7 12 44 1 44 -5 0 -11 -3 -14 -6z"/>
<path d="M480 130 l0 -70 45 0 c33 0 45 4 45 15 0 9 -9 15 -25 15 -24 0 -25 3
-25 55 0 48 -2 55 -20 55 -18 0 -20 -7 -20 -70z"/>
<path d="M600 130 c0 -56 3 -70 15 -70 12 0 15 14 15 70 0 56 -3 70 -15 70
-12 0 -15 -14 -15 -70z"/>
<path d="M660 152 c0 -60 21 -92 60 -92 44 0 60 23 60 86 0 40 -4 54 -14 54
-11 0 -16 -15 -18 -52 -3 -45 -6 -53 -23 -53 -17 0 -20 8 -23 53 -3 44 -6 52
-23 52 -16 0 -19 -7 -19 -48z"/>
<path d="M834 156 c14 -25 26 -56 26 -70 0 -19 5 -26 19 -26 14 0 18 5 14 20
-3 11 6 39 21 64 14 25 26 47 26 50 0 16 -27 3 -46 -21 l-22 -28 -13 28 c-7
16 -20 27 -32 27 -18 0 -17 -3 7 -44z"/>
<path d="M970 147 c0 -61 19 -87 63 -87 41 0 57 24 57 86 0 40 -4 54 -14 54
-11 0 -16 -15 -18 -52 -3 -45 -6 -53 -23 -53 -17 0 -20 8 -23 53 -3 44 -6 52
-23 52 -16 0 -19 -7 -19 -53z"/>
<path d="M1120 130 l0 -70 55 0 c42 0 55 3 55 15 0 11 -11 15 -40 15 -22 0
-40 5 -40 10 0 6 11 10 25 10 31 0 34 27 3 32 -41 6 -32 28 11 28 30 0 41 4
41 15 0 12 -13 15 -55 15 l-55 0 0 -70z"/>
<path d="M1330 185 c-23 -28 -4 -56 55 -79 7 -2 7 -7 0 -14 -8 -8 -18 -7 -38
3 -25 13 -29 12 -34 -1 -8 -21 14 -34 58 -34 66 0 80 53 21 79 -40 18 -42 36
-3 28 20 -4 31 -2 34 8 11 26 -71 36 -93 10z"/>
<path d="M1520 130 l0 -70 49 0 c30 0 53 5 61 15 13 16 5 55 -13 55 -8 0 -8 3
1 12 16 16 15 23 -4 42 -9 9 -32 16 -55 16 l-39 0 0 -70z m70 30 c0 -5 -9 -10
-20 -10 -11 0 -20 5 -20 10 0 6 9 10 20 10 11 0 20 -4 20 -10z m8 -62 c-7 -20
-48 -23 -48 -4 0 11 9 16 26 16 16 0 24 -5 22 -12z"/>
<path d="M1660 130 l0 -70 51 0 c36 0 49 4 47 13 -3 6 -17 13 -31 15 -26 3
-27 6 -27 58 0 47 -2 54 -20 54 -18 0 -20 -7 -20 -70z"/>
<path d="M1791 174 c-12 -15 -21 -34 -21 -44 0 -10 9 -29 21 -44 41 -52 129
-23 129 44 0 67 -88 96 -129 44z m89 -24 c22 -40 -26 -80 -58 -48 -25 25 -6
68 30 68 9 0 22 -9 28 -20z"/>
<path d="M1970 180 c-43 -43 -11 -120 49 -120 49 0 61 9 61 46 0 30 -3 34 -25
34 -16 0 -25 -6 -25 -15 0 -8 5 -15 10 -15 6 0 10 -4 10 -10 0 -5 -11 -10 -25
-10 -32 0 -50 32 -34 61 9 17 17 20 45 16 36 -6 56 9 33 24 -25 16 -78 10 -99
-11z"/>
</g>
</svg>可以看到一個復雜的png位圖已經被我們分解成為了n個path路徑，這些路徑可以被隨意的加上選擇器，根據選擇器我們就可以動態的為其加上炫酷的動畫。
有的人說了，我不懂python，有沒有別的方法進行圖片轉換，答案是可以的，比如adobe旗下的Illustrator可以做手動勾勒一個圖片的路徑，然后進行轉換，還有一個在線轉換平臺：convertio.co,也可以做類似的操作。
圖片處理好之后，我們就可以發揮想象力給logo加上喜歡的動畫了，郭富城怎么唱的來著？動起來~~動起來~~
這里值得一提的是，svg的path標簽完全支持css3的transform動畫，二者結合起來簡直天衣無縫
利用transform屬性可以做一些小特效，比如我想讓logo懸停的時候改變顏色，并且發生縱向位移
.v3u-icon-group{
pointer-events: fill;
}
.v3u-icon1 {
transition: 600ms all;
}
.v3u-icon-group:hover .v3u-icon1 {
transform:translateY(-100px);
fill: #4099ff;
}效果是這樣的：
有沒有很炫酷的感覺，亦或者，你想讓它變瘦一點
.v3u-icon-group{
pointer-events: fill;
}
.v3u-icon1 {
transition: 600ms all;
}
.v3u-icon-group:hover .v3u-icon1 {
transform: rotateY(80deg);
fill: #4099ff;
}或者干脆想翻個跟頭
.v3u-icon-group{
pointer-events: fill;
}
.v3u-icon1 {
transition: 600ms all;
}
.v3u-icon-group:hover .v3u-icon1 {
fill: #4099ff;
transform:rotate(45deg);
}當然了，這些都是相對簡單的動畫，更加有意思的特效還需要進行組合和設計，這里只是拋磚引玉，值得一提的是，我們用到了一個很有意思的屬性：pointer-events
pointer-events是CSS和SVG同時都具有的屬性。它的初始值是auto，效果和沒有定義pointer-events屬性相同，鼠標不會穿透當前層。在SVG中，該值和visiblePainted的效果相同。在SVG2.0標準文檔中新添加了pointer-events的值為bounding-box這個屬性，當它的值為bounding-box時，在圍繞元素的矩形區域也能接收定義好的事件交互，不過瀏覽器支持還不是很好，到目前為止還只有chrome65以上才支持。當pointer-events的值為none，即表示元素不再是鼠標事件的目標，鼠標不再監聽當前層而去監聽下面的層中的元素。但是如果它的子元素設置了pointer-events為其它值，比如auto，鼠標還是會監聽這個子元素的，說白了，就是防止懸停元素觸發動畫時，在執行動畫運動過程中二次觸發，導致“抖動”的情況。
結語：使用python3結合svg，可以讓你的網站更加生動有趣，現在瀏覽器對SVG支持的越來越好，可以放心大膽的使用pointer-events，也可以很好的改善SVG的交互體驗。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
