TweenMax+svg实现飞机跟随鼠标飞行轨迹动画效果代码-html代码-BFW代码库

TweenMax+svg实现飞机跟随鼠标飞行轨迹动画效果代码

代码语言：html

所属分类：动画

代码描述：TweenMax+svg实现飞机跟随鼠标飞行轨迹动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html>
    <head>
     <meta charset="UTF-8">
<style>body {
    background-color: #000;
    overflow: hidden;
}
body,
html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
.mainSVG {
    position: absolute;
    width: 800px;
    height: 600px;
    visibility: hidden;
    overflow: visible;
}
.bgSVG {
    position: absolute;
    width: 100%;
    height: 100%;
}</style>
 </head>
<body>
    

<svg class="bgSVG" viewBox="0 0 800 600" xmlns="https://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice">
    <linearGradient id="bgGrad" gradientUnits="userSpaceOnUse" x1="400" y1="0" x2="400" y2="600">
        <stop offset="0" style="stop-color:#01060A" />
        <stop offset="1" style="stop-color:#032739" />
    </linearGradient>
    <rect width="100%" height="100%" fill="url(#bgGrad)" />

</svg>
<svg class="mainSVG" viewBox="0 0 800 600" xmlns="https://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice">

    <defs>
        <linearGradient id="bgGrad" gradientUnits="userSpaceOnUse" x1="400" y1="0" x2="400" y2="600">
            <stop offset="0" style="stop-color:#044362" />
            <stop offset="1" style="stop-color:#01060A" />
        </linearGradient>
        <circle id="dot" cx="0" cy="0" r="2" fill="#00" />
    </defs>
    <g class="pContainer" />
    <g class="planeVert">
        <g class="planeRot">
            <g class="planeGroup">
                <g fill="#00BDFD">
                    <circle id="nose" cx="400" cy="325" r="36" />
                    <circle id="engineL" cx="325" cy="340" r="16" />
                    <circle id="engineR" cx="476" cy="340" r="16" />
                </g>
                <path id="frontonPlane" fill="#212121" d="M398.4,314.1h-14.1c0.3-2.5,0.7-4.9,1.3-7.2h12.8L398.4,314.1L398.4,314.1z M374.9,314.1h6.1
	c0.3-2.5,0.7-4.9,1.3-7.2h-4.6C376.6,309.1,375.6,311.5,374.9,314.1z M373.3,306.9c-1.3,2.2-2.4,4.7-3.1,7.2h2.2
	c0.6-2.5,1.5-5,2.6-7.2H373.3z M401.6,306.9v7.2h14.1c-0.3-2.5-0.8-5-1.3-7.2H401.6z M400,322.5c-4.9,0-8.8,4-8.8,8.8
	c0,4.9,4,8.8,8.8,8.8c4.9,0,8.8-4,8.8-8.8C408.8,326.5,404.9,322.5,400,322.5z M429.7,314.1c-0.7-2.6-1.8-5-3.1-7.2h-1.7
	c1.1,2.3,2,4.7,2.6,7.2H429.7z M417.7,306.9c0.5,2.3,1,4.7,1.2,7.2h6.1c-0.7-2.6-1.6-5-2.8-7.2H417.7z M563.9,318.3
	c0.1,2-0.8,3.9-5.3,4.4l-69.2,7.2c1.8,2.6,2.9,5.7,3.2,9c0.7,9.9-6.8,18.5-16.7,19.2c-9.9,0.7-18.5-6.8-19.2-16.7
	c-0.2-2.9,0.3-5.7,1.4-8.2l-19.2,2c-0.1,0-0.3,0-0.6,0c-5.3,16-20.4,27.5-38.1,27.5c-17.8,0-32.8-11.5-38.1-27.5c-0.2,0-0.5,0-0.6,0
	l-19.2-2c1.1,2.5,1.6,5.3,1.4,8.2c-0.7,9.9-9.3,17.4-19.2,16.7c-9.9-0.7-17.4-9.3-16.7-19.2c0.2-3.3,1.4-6.4,3.2-9l-69.2-7.2
	c-4.5-0.5-5.5-2.4-5.3-4.4c0.1-2,1.3-3.7,5.9-3.6l118,4.3c0.2-2.3,0.6-4.5,1.1-6.7l-20.8-2.2c-2.5-0.3-3.1-1.3-3-2.4
	c0.1-1.1,0.7-2.1,3.3-2l22.9,0c5.8-12.6,18-21.8,32.4-23.2l1.4-41.2c0.1-3.2,1.4-3.9,2.8-3.9c1.4,0,2.6,0.7,2.8,3.9l1.4,41.2
	c14.4,1.5,26.6,10.6,32.4,23.2l22.9,0c2.6-0.1,3.2,0.9,3.3,2c0.1,1.1-0.4,2.2-3,2.4l-20.8,2.2c0.6,2.2,1,4.4,1.1,6.7l118-4.3
	C562.6,314.6,563.7,316.3,563.9,318.3z M336.7,340.9c0.4-6.2-4.2-11.6-10.4-12c-6.2-0.4-11.6,4.2-12,10.5c-0.4,6.2,4.2,11.6,10.4,12
	C330.9,351.8,336.3,347.1,336.7,340.9z M431.9,322.5c0-17.6-14.3-31.9-31.9-31.9c-17.6,0-31.9,14.3-31.9,31.9
	c0,17.6,14.3,31.9,31.9,31.9C417.6,354.4,431.9,340.1,431.9,322.5z M485.8,339.3c-0.4-6.2-5.8-10.9-12-10.5
	c-6.2,0.4-10.9,5.8-10.5,12c0.4,6.2,5.8,10.9,12,10.4C481.5,350.9,486.2,345.5,485.8,339.3z" />

            </g>
        </g>
    </g>
&.........完整代码请登录后点击上方下载按钮下载查看