页面转换效果基于snap.svg-min.js，svgLoader.js和classie.js起作用。示例示例如下所示。
HTML
x
11
11
1
2
<html lang="en">3
<head>4
<meta charset="UTF-8">5
<meta name="viewport" content="width=device-width, initial-scale=1.0">6
<title>SVG-转换效果</title>7
</head>8
<body>9
<iframe scrolling="no" class="result" src="/demo/svg/src/transformation/index.html" height="560px" width="600px"></iframe>10
</body>11
</html>循环效应：
HTML
xxxxxxxxxx1
11
11
1
2
<html lang="en">3
<head>4
<meta charset="UTF-8">5
<meta name="viewport" content="width=device-width, initial-scale=1.0">6
<title>SVG-转换效果</title>7
</head>8
<body>9
<iframe scrolling="no" class="result" src="/demo/svg/src/transformation/index2.html" height="560px" width="600px"></iframe>10
</body>11
</html>溢出效应：
HTML
xxxxxxxxxx1
11
11
1
2
<html lang="en">3
<head>4
<meta charset="UTF-8">5
<meta name="viewport" content="width=device-width, initial-scale=1.0">6
<title>SVG-转换效果</title>7
</head>8
<body>9
<iframe scrolling="no" class="result" src="/demo/svg/src/transformation/index3.html" height="560px" width="600px"></iframe>10
</body>11
</html>构图效果：
HTML
xxxxxxxxxx1
11
11
1
2
<html lang="en">3
<head>4
<meta charset="UTF-8">5
<meta name="viewport" content="width=device-width, initial-scale=1.0">6
<title>SVG-转换效果</title>7
</head>8
<body>9
<iframe scrolling="no" class="result" src="/demo/svg/src/transformation/index4.html" height="560px" width="600px"></iframe>10
</body>11
</html>阅读剩余 51%
作者：terry，如若转载，请注明出处：https://www.web176.com/svgtag/1470.html
支付宝 
微信 