gsap+svg实现海岛赛车动画效果代码-html代码-BFW代码库

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