640 (1).gif源代码：
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>纸飞机</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<link rel="stylesheet" href="./22-纸飞机.css">
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" viewBox='0 100 2100 1000'>
<g fill='none' stroke='#674C99' stroke-width='15' stroke-linecap='round'>
<line class="line" stroke-dashoffset="5208.54" stroke-dasharray="0 500 150 1150 200 604.27" x1="2723"
y1="-83" x2="816.3" y2="1690.9" />
<line class="line" stroke-dashoffset="5372.94" stroke-dasharray="300 1000 200 1186.4" x1="2448.3" y1="-94.4"
x2="408.9" y2="1654.3" />
<line class="line" stroke-dashoffset="5628.66" stroke-dasharray="200 1214.33 300 1100" x1="2187.4"
y1="-87.6" x2="-38.7" y2="1634.3" />
<line class="line" stroke-dashoffset="5843.54" stroke-dasharray="10 490 100 1321.77 400 600" x1="1978.6"
y1="-87.8" x2="-379.6" y2="1637.2" />
</g>
<path class="shadow" fill='#674C99'
d='M1528,665l-221.8,141c-2,1-2,5,0,7l120,60c2,1,4.6,0,5-1l101-201.2C1536.1,667,1531.7,663.1,1528,665z' />
<g class="plane-body">
<path fill='#56C2FF'
d='M1131,516.3l297-38c3,0,5.6,4,2,6l-133,97c0,0-2,0.9-3,0l-163-58C1127,522,1127,516,1131,516.3z' />
<path fill='#6B6BD9'
d='M1689,302l-349,423c-2,2.9-7,1-8-1l-40-138c0-1,0-3,1-5l390-284C1687,291,1692,297,1689,302z' />
<path fill='#9A9AE3'
d='M1336,603.7l-2,119c0,2,3,4,5,1l349-423c2-2-1-6.7-4-4l-347,303C1336.6,602,1336,602,1336,603.7z' />
<path fill='#8FECFF'
d='M1132,514l564-234c2,0,3,2,1,3l-266,195.8c0,0-0.6,0,0,0l-297,38C1130,518,1130,515,1132,514z' />
<path fill='#CDB3FF'
d='M1705,279l-241,211.9c-1,0-1,2-0.7,3l116,239c1,2,4,2,5,0l124-451C1710,279,1707,277.8,1705,279z' />
<path fill='#AD81FF'
d='M1341,597l120-104c1-1,3,0,4,0l115.8,238c1,2-1,4-3,3l-236-133c-4.8,2-4.8,0-3.8-2L1341,597z' />
</g>
</svg>
</body>
<script>
const planeBody = document.querySelector('.plane-body');
const shadow = document.querySelector('.shadow');
const lines = Array.from(document.querySelectorAll('.line'));
planeTl = gsap.timeline({
repeat: -1
})
.to(planeBody, {
duration: 1.5,
y: 65,
ease: 'none'
})
.to(shadow, {
duration: 1.5,
scale: 1.2,
transformOrigin: 'center center',
ease: 'none'
}, 0)
.to(planeBody, {
duration: 2.5,
y: 0,
ease: 'power2.out'
}, 1.5)
.to(shadow, {
duration: 2.5,
scale: 1,
transformOrigin: 'center center',
ease: 'power2.out'
}, 1.5);
lines.forEach((l) => {
planeTl.to(l, {
duration: 4,
attr: { 'stroke-dashoffset': 0 },
ease: 'none'
}, 0)
})
</script>
</html>
