Categories: SVG教程

SVG应用：粘稠效应

粘稠效应就是出发某个元素，会出发粘稠的效果，可以增强页面互动，接下来介绍5个不错的效果，一起了解下吧。

聊天效果：

<!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/gooey/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/gooey/menu.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/gooey/pagination.html" height="560px" width="600px"></iframe>
</body>
</html>

Loader效果：

<!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/gooey/send.html" height="560px" width="600px"></iframe>
</body>
</html>

Share[分享]效果：

<!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/gooey/share.html" height="560px" width="600px"></iframe>
</body>
</html>

terry

这个人很懒，什么都没有留下～