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.8C.........完整代码请登录后点击上方下载按钮下载查看