svg 加载动画

最新推荐文章于 2025-07-13 16:54:17 发布

原创

最新推荐文章于 2025-07-13 16:54:17 发布 · 824 阅读

1 ·

CC 4.0 BY-SA版权

这篇博客介绍了如何在HTML页面中使用SVG实现动态加载动画，通过JavaScript文件控制动画效果，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html 页面代码

<!DOCTYPE html>
<html lang="zh" class="no-js">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>| Goo Loader_jQuery</title>
	<script type="text/javascript" src="../static/js/greensock/minified/TweenMax.min.js"></script>
	<script type="text/javascript" src="../static/js/greensock/minified/plugins/DrawSVGPlugin.min.js"></script>
	<!--[if IE]>
		<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>
<body class="demo-1">
		
			<div id="container">
				<svg width="400" height="200" viewBox="0 0 400 200">
					<defs>
						<filter id="goo">
							<feGaussianBlur in="SourceGraphic" stdDeviation="7" result="blur" />
							<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 17 -7" result="cm" />
							<feComposite in="SourceGraphic" in2="cm">
						</filter>
						<filter id="f2" x="-200%" y="-40%" width="400%" height="200%">
							<feOffset in="SourceAlpha" dx="9" dy="3" />
							<feGaussianBlur result="blurOut" in="offOut" stdDeviation="0.51" />
							<feComponentTransfer>
								<feFuncA type="linear" slope="0.05" />
							</feComponentTransfer>
							<feMerge>
								<feMergeNode/>
								<feMergeNode in="SourceGraphic" />
							</feMerge>
						</filter>
					</defs>
					<g filter="url(#goo)" style="fill:#18cca0">
						<ellipse id="drop" cx="125" cy="90" rx="20" ry="20" fill-opacity="1" fill="#18cca0"/>
						<ellipse id="drop2"cx="125" cy="90" rx="20" ry="20" fill-opacity="1" fill="#18cca0"/>
					</g>
				</svg>
			</div>
		
	<!-- /container -->
	<script>
	(function() {
		var container = document.getElementById('container');
		var drop = document.getElementById('drop');
		var drop2 = document.getElementById('drop2');
		var outline = document.getElementById('outline');

		TweenMax.set(['svg'], {
			position: 'absolute',
			top: '50%',
			left: '50%',
			xPercent: -50,
			yPercent: -50
		})

		TweenMax.set([container], {
			position: 'absolute',
			top: '50%',
			left: '50%',
			xPercent: -50,
			yPercent: -50
		})

		TweenMax.set(drop, {
			transformOrigin: '50% 50%'
		})

		var tl = new TimelineMax({
			repeat: -1,
			paused: false,
			repeatDelay: 0,
			immediateRender: false
		});

		tl.timeScale(3);

		tl.to(drop, 4, {
			attr: {
				cx: 250,
				rx: '+=10',
				ry: '+=10'
			},
			ease: Back.easeInOut.config(3)
		})
		.to(drop2, 4, {
			attr: {
				cx: 250
			},
			ease: Power1.easeInOut
		}, '-=4')
		.to(drop, 4, {
			attr: {
				cx: 125,
				rx: '-=10',
				ry: '-=10'
			},
			ease: Back.easeInOut.config(3)
		})
		.to(drop2, 4, {
			attr: {
				cx: 125,
				rx: '-=10',
				ry: '-=10'
			},
			ease: Power1.easeInOut