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,如若转载,请注明出处:https://www.web176.com/svgtag/1483.html

(0)
打赏 支付宝 支付宝 微信 微信
terryterry
上一篇 2021年1月8日 下午4:51
下一篇 2021年1月8日 下午5:31

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注