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