gsap+svg实现海岛赛车动画效果代码
代码语言：html
所属分类：动画
代码描述：gsap+svg实现海岛赛车动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
#svg
{
width: 130vmin;
overflow: visible;
}
html, body
{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body
{
display: flex;
justify-content: center;
align-items: center;
background-color: #44aadd;
position: relative;
}
#red-path, #blue-path
{
display: none;
}
.smoke
{
fill: white;
opacity: 0.4;
}
.gsap-3-logo {
width: 100px;
position: fixed;
bottom: 8px;
right: 60px;
}
</style>
</head>
<body >
<svg id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1122.11" height="634.38" viewBox="0 0 1122.11 634.38">
<defs>
<linearGradient id="linear-gradient" x1="625.35" y1="436.69" x2="639.01" y2="417.35" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-opacity="0"/>
<stop offset="1" stop-opacity="0.5"/>
</linearGradient>
<linearGradient id="linear-gradient-2" x1="680.51" y1="335.14" x2="694.16" y2="315.79" gradientTransform="translate(1390.31 620.24) rotate(176.76)" xlink:href="#linear-gradient"/>
</defs>
<title>race</title>
<g id="Layer_2" data-name="Layer 2">
<g id="container">
<g id="race">
<path id="sand" d="M120.45,601.34C30.05,524.57,18,295,57.45,185.34c13-36,24.26-67.34,53-97,83.27-85.92,211.06-21.86,452-39,253-18,336.8-53.26,407,8,132.3,115.43,159.43,425.93,43,509-44.6,31.82-70.49,9.27-293,6-146.87-2.16-176.1-26.66-352,3C195.45,604.34,139,617.09,120.45,601.34Z" style="fill: #fff9ce"/>
<g id="waves">
<g class="wave" id="wave-1">
<path d="M627.1,36.85c-7,2.35-13.18,4.49-19.58,6.74-10,3.19-19.68,4-30.64,5.34-2.73.24-5.34.5-7.94.8l-7.81.65c-10.72,0-22.29-.42-34.15-.59-1.27-.14-5-.58-4.68.77-11.47-1.1-22.48-2.55-33.52-2.23-4.63,0-9.41-1.29-14-1.28a88.5,88.5,0,0,1-11.18-.54,100.37,100.37,0,0,0-11.06-.67,22.88,22.88,0,0,1-4.1.77c-10.12-1.49-19.49.71-29,1.71-3.75.3-6.64.67-10.23.69-.31.59-1.17.53-2.18.76-2.72.06-17.91-.91-19.33-1.6-.36-.17,7.1-.66,14.58-1.08s15-.8,14.72-1.13-5.33-.09-10.42.09-10.33.42-11.19.36c17.88-2.31,29.21-3.52,35.75-4.3s8.3-1.06,7.12-1.09c-2.37-.06-16.49,1.09-27.41,2.59-3.42,0-8.24,1.09-14.86,1.39,3.91-.66,11.87-3,13.76-3.16,8.71-1.13,7.35-2,17.33-2,4.09,0,9.65-.44,15.06-.9s10.69-.93,14.2-1.1c-3.67,1-12.17,3.18-17.51,2.94A33.38,33.38,0,0,0,451.26,40a39.88,39.88,0,0,1,12.87-1.37,29.56,29.56,0,0,0,3.86-.28l4.22.54c10,.37,18.74-.29,28.51.45-.84,0-1.35-.69-2.21-.81-8.39-1.47-15.63-.29-24.57-.84-1.72-.23-4.13.7-5.95.66a83.92,83.92,0,0,1-10.4-1.17c6.88-.71,15-.32,22.38-.26a22.38,22.38,0,0,0,4.62-1c-3.41-.19-6.85-.31-10.3-.39-12.07,0-27.85,2.75-36.53,1l-1,.21a1.34,1.34,0,0,0-.5-.15,23.77,23.77,0,0,1-5.55-.46l4.67.11c12.17-2.15,26.11-.82,39.3-1.26,2.93-.24,7.75,1,10.67.8a146.52,146.52,0,0,1,26.06,1.41c15.43,1.8,30.68,3.43,46,3.84a247.42,247.42,0,0,0,45.95-3.19l2-.67-1-.12,2-.22A76,76,0,0,1,617.7,34c1.64-.1-2.61,1-3.59,1.84l1.71-.41-.11.67c.59-.36,1.08-.15,1.61-.11-4.07,1.46-8.17,2.85-12.32,4.12-2.08.64-4.19,1.19-6.29,1.78s-4.2,1.18-6.35,1.62a4.68,4.68,0,0,0,2.43.1c.91-.16,1.84-.42,2.45-.53a60.18,60.18,0,0,1,8.12-2.35c7-2.29,14.66-3.49,21.46-5.81,1.32-.28,2.63-.54,3.94-.74.8-.08.58.39-.23,1A11.11,11.11,0,0,1,627.1,36.85ZM519.59,41.34c2.34.44,4.62,1,7,1.55l2.52.22a17.35,17.35,0,0,0,3.31,0c4.48.46,9,1,13.47,1.32-2.27-.5-4.57-1-7-1.43a75.49,75.49,0,0,0-7.83-.93c14.55.36,27.1,2.7,41,2.67,4.14-.23,8.31-.83,12.56-1.48,3-.57,5.84-1.38,8.66-2.14a185.16,185.16,0,0,1-27.41,2,268.46,268.46,0,0,1-27.1-1.5c-9-.85-18-2-27-3s-18.22-1.9-27.5-2.45C496.15,38.09,507.65,39.51,519.59,41.34Zm-4.38.71c-4.78-.3-9.51-.5-14.19-.63-12.72-.75-26.66-1.42-34.95.36,11.25-.45,22.92-.69,34.95-.36-11.43-.67-3.17,0,12.15.65A13.9,13.9,0,0,1,515.21,42.05Z" style="fill: #eef4ff"/>
<path d="M585.07,39.3c2.68-.11,5.38-.26,8.1-.41l8.12-.73a51.59,51.59,0,0,0-6.61-.73,89.55,89.55,0,0,0-10.09.76l-5.13.44c-1.71.11-3.39.3-5.08.25-19.23.12-38.73-1.35-59.21-2.49a24.24,24.24,0,0,0-4.92-.15C536.1,38.84,559.88,40.84,585.07,39.3Z" style="fill: #eef4ff"/>
<path d="M477.1,33.36c-3.79.12-7.58.25-11.21.12a76.37,76.37,0,0,0,11.38,1.16c5.09,0,10.17.12,15.18.3C487.46,34.22,482.4,33.6,477.1,33.36Z" style="fill: #eef4ff"/>
<path d="M510.25,36.24l-3.1-.32c-4.78-.49-9.71-.8-14.7-1,5.26.76,10.46,1.66,15.71,2.37C508.17,36.67,509.07,36.36,510.25,36.24Z" style="fill: #eef4ff"/>
</g>
<g class="wave" id="wave-2">
<path d="M783.37,24.48a42.68,42.68,0,0,0-8.21,2.44c-4.11,1.48-8.34,1-12.85,1.65-2.26.23-4.31.62-6.46,1a91.63,91.63,0,0,0-14.28,1.14c-.55,0-2.16-.15-1.8,1.16-4.92-.1-9.66-.44-14.22.71-1.94.36-4.07-.56-6-.27a13.42,13.42,0,0,1-4.73.09,23.92,23.92,0,0,0-4.69-.21c-.42.22-1.32,1-1.68.9-4.32-1.18-8.2,1-12.28,1.91a21.41,21.41,0,0,1-4.37.45c-.14.59-.51.49-.95.69a24.74,24.74,0,0,1-4.3-.93c-1.82-.54-3.55-1.17-3.82-1.57-.14-.21,3-.22,6.2-.35s6.34-.37,6.23-.71c-.29-.35-8.38,0-9.1-.28,7.61-1.43,12.3-2.68,15-3.44s3.41-1.14,2.92-1.15a106.13,106.13,0,0,0-11.35,2.4c-1.42-.15-3.47.84-6.24.81,1.67-.45,5-2.52,5.82-2.61,3.62-1,3.06-1.75,7.15-1.7,3.38.09,9.06-1.93,11.87-2.49-1.41,1.1-4.8,3.59-7,3.38a5.8,5.8,0,0,0,5.09-1.11,8.58,8.58,0,0,1,5.15-1.88,5.29,5.29,0,0,0,1.55-.45c.55.11,1.08.19,1.75.3,4.07-.24,7.51-1.55,11.51-1.67-.33.08-.63-.56-1-.61-3.54-.76-6.28,1-9.94,1-.71-.13-1.59,1-2.33,1a14.73,14.73,0,0,1-4.29-.67,17.86,17.86,0,0,1,4.39-1c1.53-.19,3.09-.32,4.57-.53a5,5,0,0,0,1.73-1.31c-1.37.09-2.75.15-4.13.3-4.76.72-11,4.05-14.6,2.32l-.41.22a.43.43,0,0,0-.21-.14,3.85,3.85,0,0,1-2.24-.43c.62,0,1.25.06,1.88.09,4.83-2.22,10.44-1.42,15.66-2.66,1.14-.43,3.18.54,4.32.08a26.55,26.55,0,0,1,10.52-.75c12.8.85,25.77.9,39.08,1.09l.84-.3-.49-.28.91.13a11,11,0,0,1,4.89-.57c.77.24-1.09.38-1.41,1l.74,0,0,.6c.23-.21.49.08.75.22-3.41,1.1-6.83,2.24-10.33,3.14.61.66,1.61.23,2.13.21a9.72,9.72,0,0,1,3.34-1.07c2.87-1,6.32-.64,9.26-1.22a16.61,16.61,0,0,1,1.8.26C785.52,23.06,784.52,24.38,783.37,24.48Zm-46.24-1.43c1,.24,2,.59,3.09.93l1.06,0a3.06,3.06,0,0,0,1.34-.25l5.77.47a16.36,16.36,0,0,0-6.5-1.39c5.94-.82,11.61,1,17.57,1.47a44.63,44.63,0,0,0,5.22-.67,21.58,21.58,0,0,0,3.52-1.13,182,182,0,0,1-23.27-.62A216.59,216.59,0,0,0,722.26,21C727.23,22,732,22.27,737.13,23.05Zm-1.65,1.08c-2,.14-3.91.36-5.82.63-2.61.2-5.35.34-7.83.76a15.75,15.75,0,0,0-6.35,2.08c4.59-1,9.29-2.11,14.18-2.84-4.7.3-1.28.3,5-.44A2.39,2.39,0,0,1,735.48,24.13Z" style="fill: #eef4ff"/>
<path d="M764.23,19.83c2.38.41,4.75.6,7.16,1a18.93,18.93,0,0,0-3.15-1.65c-3-.79-5.89-.19-8.8-.46a130.94,130.94,0,0,0-24.88-.13,4.1,4.1,0,0,0-2,.29c5.31.18,10.48.13,15.69.25S758.74,19.36,764.23,19.83Z" style="fill: #eef4ff"/>
<path d="M719.16,18.58a21,21,0,0,1-4.41.75,11.17,11.17,0,0,0,4.6.5c2-.25,4-.59,6-.78A30.77,30.77,0,0,0,719.16,18.58Z" style="fill: #eef4ff"/>
<path d="M732.59,18.83l-1.27,0a37.06,37.06,0,0,0-5.94.25c2.17.34,4.35.76,6.54,1A1.13,1.13,0,0,1,732.59,18.83Z" style="fill: #eef4ff"/>
</g>
<g class="wave" id="wave-3">
<path d="M1001.89,67.8a42,42,0,0,0-7-8.51c-4-4-6.52-8.63-10.77-12.91-1-1.08-2.06-2.09-3.13-3s-2.14-1.87-3.29-2.76a65.25,65.25,0,0,0-15-11.77c-.56-.47-2.23-1.85-2.7-.56-5.29-3.78-10.71-7.35-16.86-9-2.54-.72-4.75-2.81-7.37-3.42a19.48,19.48,0,0,1-3.11-.91c-1-.36-2-.75-3-1.16a29.35,29.35,0,0,0-6.11-2,11,11,0,0,1-2.48.3c-5.49-2.55-11.27-1.19-16.74-.82a55.14,55.14,0,0,1-5.87.07c-.22.58-.7.47-1.29.65-.77,0-3.29-.48-5.75-1s-4.84-1-5.25-1.34c-.21-.17,4.09-.52,8.42-.6s8.69,0,8.56-.35a30.45,30.45,0,0,0-6-.49c-3-.09-6,0-6.49-.1A179,179,0,0,1,911.77,6c3.94-.17,5-.27,4.34-.42-1.38-.33-9.9-.42-16.4.48-2-.22-4.9.65-8.77.72,1.15-.28,2.91-.89,4.54-1.47a24.45,24.45,0,0,1,3.7-1.08c5.24-.61,4.54-1.54,10.48-.78,2.43.33,5.79.4,9.1.49l4.77.19c1.48.1,2.82.23,3.88.36-2.41.48-7.84,1.68-10.93.94a13.93,13.93,0,0,0,4.19.85A18.48,18.48,0,0,0,924,5.9a14.73,14.73,0,0,1,7.9.31,11.21,11.21,0,0,0,2.35.28c.75.33,1.45.72,2.33,1.16,5.75,1.8,11,2.85,16.43,5.51-.48-.19-.53-.91-1-1.2a19.49,19.49,0,0,0-3.31-1.85c-.57-.24-1.13-.47-1.7-.67s-1.17-.36-1.76-.52c-2.35-.67-4.75-1.24-7.33-2.16-.95-.48-2.62,0-3.68-.27-2.19-.52-3.93-1.72-5.9-2.54A34.4,34.4,0,0,1,935,5c2.25.61,4.53,1.32,6.71,2a9.24,9.24,0,0,0,3-.12l-3-1.13c-1-.35-2-.66-3-1s-1.85-.45-2.82-.64-2-.3-3-.43l-3.08-.34-3.06-.25c-1-.09-2-.19-2.94-.31s-1.87-.2-2.74-.35a19,19,0,0,1-2.44-.58,10.36,10.36,0,0,1-2.07-.8l-.66.1a.82.82,0,0,0-.28-.19,10,10,0,0,1-3.29-1c.94.15,1.88.34,2.81.54A26.84,26.84,0,0,1,921,.47c1,.09,2,.21,3,.35s2,.37,3,.58l3,.66,3,.76,3,.73c1,.26,2,.5,3,.71a10.13,10.13,0,0,1,3.09,1.23,10.94,10.94,0,0,0,3,1.35,37,37,0,0,1,7.67,2.64,51.53,51.53,0,0,1,7.06,4.1l5.94,4.17c1.9,1.48,3.84,2.89,5.66,4.45A126.14,126.14,0,0,1,982,31.83a117.37,117.37,0,0,1,16.84,21.89c.31.27.6.57.88.86l-.06-.66.49,1.11a17.11,17.11,0,0,1,3.72,5.63c.21,1-1-1.21-1.87-1.39l.51.87-.57.24c.35.2.22.61.22.95-3.11-3.7-6.51-7.18-10-10.63-.16,1,1,1.88,1.36,2.45a15.55,15.55,0,0,1,3.32,3.31c2.93,2.88,4.59,7,6.68,10.34a19,19,0,0,1,.66,2.19C1004.41,70,1002.55,69.08,1001.89,67.8ZM962.75,19.42a32.75,32.75,0,0,1,3,3.27l1.22.9a7.42,7.42,0,0,0,1.73,1l3,2.74,2.92,2.82a31.8,31.8,0,0,0-2.61-3.6,23.28,23.28,0,0,0-3.53-3.27A42.14,42.14,0,0,1,978,31.59c2.68,3.07,5,6.38,7.41,9.58q1.23,1.32,2.49,2.61c.83.88,1.68,1.76,2.54,2.62,1.24,1.21,2.54,2.29,3.82,3.37a169.9,169.9,0,0,0-21.5-24.43A111.6,111.6,0,0,0,959.51,15a88.5,88.5,0,0,0-15.09-7.95C950.89,11,957.05,14.62,962.75,19.42ZM960,19a68.86,68.86,0,0,0-7.65-3.8c-1.73-.83-3.54-1.6-5.32-2.37s-3.62-1.35-5.37-1.92a32.14,32.14,0,0,0-5.07-1.16,15.8,15.8,0,0,0-4.4-.16,93.19,93.19,0,0,1,20.16,5.61c-3.12-1.46-3.59-1.59-2.19-1,.7.32,1.86.84,3.34,1.59s3.35,1.58,5.38,2.67A4.85,4.85,0,0,1,960,19Z" style="fill: #eef4ff"/>
<path d="M993.53,44.12c1.62,2.87,3.31,5.66,4.69,8.6a19.85,19.85,0,0,0-.77-4.3c-1.56-3.82-4.66-6.85-7.1-10.22a84.7,84.7,0,0,0-27.89-24.36,8.37,8.37,0,0,0-2.75-1.38,129.44,129.44,0,0,1,18.93,14.22A93.33,93.33,0,0,1,993.53,44.12Z" style="fill: #eef4ff"/>
<path d="M941.06,3.11c-2.35-.47-4.65-1-6.83-1.63a33.4,33.4,0,0,0,6.56,2.87c1.53.4,3,1,4.53,1.43s3,1,4.43,1.61a41.62,41.62,0,0,0-4.19-2.34A35.47,35.47,0,0,0,941.06,3.11Z" style="fill: #eef4ff"/>
<path d="M959.71,12.46l-1.68-1c-1.3-.78-2.63-1.53-4-2.22S951.2,8,949.75,7.39c1.43.89,2.83,1.8,4.21,2.71S956.68,12,958.05,13C958.32,12.37,959,12.3,959.71,12.46Z" style="fill: #eef4ff"/>
</g>
<g class="wave" id="wave-4">
<path d="M1113.39,320.34a132.23,132.23,0,0,0-.41-20.5c-.82-10.37-.17-19.89-1.25-30.89-.47-5.45-1.21-10.46-2.12-15.71a191.37,191.37,0,0,0-6.52-34.2c-.21-1.31-1-5.11-2.19-4.37-2.65-11.55-5.61-22.83-10.69-33.18-1-2.22-1.74-4.55-2.51-6.92a45.47,45.47,0,0,0-2.63-6.88c-1.89-3.46-3.33-7.1-4.87-10.67-.77-1.79-1.47-3.61-2.31-5.36s-1.69-3.48-2.64-5.16a30.82,30.82,0,0,1-2.78-3.36c-4-9.95-11-17.25-17.31-25-2.42-3.09-4.36-5.43-6.52-8.49-.68.07-1.13-.71-1.91-1.45-.42-.58-1.25-1.85-2.27-3.46L1041,99.26c-2.36-3.85-4.68-7.54-4.83-8.36-.09-.4,5,5.53,9.87,11.71,2.47,3.06,4.82,6.21,6.63,8.5s3,3.81,3,3.6a91.38,91.38,0,0,0-6.21-9c-1.59-2.16-3.26-4.29-4.56-6s-2.3-3-2.54-3.35c6.45,6.92,11.53,12.77,15.51,17.58s6.94,8.52,9.07,11.27l4.26,5.4c.75.92.9,1,.59.46-1.18-2.22-10-14.37-17.77-23-2-3-5.81-6.57-10.15-12,3,2.91,9.7,8.48,11,10.06,6.1,7,6,5.36,11.75,14.26,1.14,1.85,2.58,4,4.18,6.2s3.24,4.65,4.93,7l4.73,6.86c1.45,2.16,2.7,4.14,3.68,5.74-2.74-3-9.08-9.73-11.81-14.67,5.15,11.22,9.5,10.7,15.11,22.38a34.4,34.4,0,0,0,2.16,3.52l1.53,4.26,6.6,13.79a134,134,0,0,1,5.71,14c-.35-.83.08-1.61-.15-2.5a44,44,0,0,0-2-6.29c-.78-2-1.62-3.94-2.52-5.87s-1.88-3.84-2.86-5.82c-.48-1-1-2-1.42-3.06s-1-2.09-1.46-3.19c-.62-1.73-2.61-3.61-3.44-5.36-1.84-3.48-2.77-6.93-4.19-10.35a98.71,98.71,0,0,1,5.89,10.18c.9,1.83,1.79,3.68,2.69,5.52l1.32,2.74,1.26,2.73a24.78,24.78,0,0,0,3,4.05c-1.43-3.38-2.81-6.8-4.45-10.13-1.46-2.89-3.13-6-5-9l-2.82-4.56-2.9-4.46-2.75-4.34c-.91-1.4-1.76-2.78-2.53-4.11a50.49,50.49,0,0,1-3.66-7.35l-.74-.85a1.69,1.69,0,0,0-.16-.54,30.4,30.4,0,0,1-2.7-5.28c.84,1.43,1.72,2.84,2.53,4.3,8.6,10,14.76,23.74,21.43,36.23,1.69,2.68,2.68,7.95,4.26,10.68a116.25,116.25,0,0,1,9.58,26.44,315.66,315.66,0,0,1,9.91,97.73c.06.74.12,1.48.19,2.21.11-.33.23-.66.34-1-.09.7-.17,1.4-.26,2.1a53.72,53.72,0,0,1-.46,12.1c-.43,1.63-.11-2.88-.64-4.11-.07.91-.13,1.81-.13,1.81l-.6-.33a2.4,2.4,0,0,1-.4,1.6c-.21-8.81-.85-17.64-1.66-26.51-.69,1.09-.29,3.69-.33,4.95a47.15,47.15,0,0,1,.71,8.54c.62,7.46-.59,15.24-1,22.41-.24,1.32-.51,2.64-.84,3.91C1114,326.36,1113.11,323,1113.39,320.34ZM1108.73,209c.36,2.53.63,5,.83,7.58l.54,2.62a19.49,19.49,0,0,0,1,3.39c.42,2.35.71,4.73,1.07,7.09s.66,4.73.94,7.1c0-1.22,0-2.46,0-3.72s-.11-2.53-.21-3.84.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0