gsap+svg实现飞艇空中昼夜飞行动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：gsap+svg实现飞艇空中昼夜飞行动画效果代码

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
body {
  margin: 0;
  display: grid;
  place-items: center;
  background: hsl(204, 32%, 95%);
  font-size: 18px;
}

svg {
  width: 40vw;
  margin: 2vh;
}

/* Background*/
.background {
    fill: hsl(204,34%,80%);
}

.star {
  fill: hsl(220, 0%, 70%);
  opacity: 0;
}

.cloud {
  fill: hsla(204, 32%, 95%, 1);
}

.cloud1 {
  fill: hsla(204, 32%, 95%, 0.6);
}

.cloud2 {
  fill: hsla(204, 32%, 95%, 0.4);
}

/* Zeppelin */
.light {
  opacity: 0;
  fill: url(#light);
}

.st0 {
  fill: hsl(351, 90%, 30%);
}
.st1 {
  fill: #6b0615;
}
.st2 {
  fill: #be0a26;
}
.st3 {
  opacity: 0.1;
  fill: #ffffff;
}
.st4 {
  fill: none;
  stroke: #91081d;
  stroke-width: 0.6;
  stroke-miterlimit: 10;
}
.st5 {
  fill: none;
  stroke: #91081d;
  stroke-width: 0.5824;
  stroke-miterlimit: 10;
}

.st6 {
  fill: none;
  stroke: hsl(204, 32%, 85%);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 0, 2.1341;
}
</style>




</head>

<body  >
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">

  <!--Mask-->
  <defs>
    <clippath id="clippath">
      <circle class="st0" cx="50" cy="50" r="50" />
    </clippath>
  </defs>

  <!--Define Cloud -->
  <defs>
    <pattern id="cloud" x="0" y="0" width="300" height="100" patternUnits="userSpaceOnUse" patternTransform="rotate(0)">
      <animatetransform attributeType="xml" attributeName="patternTransform" type="translate" from="300" to="0" begin="0" dur="5s" repeatCount="indefinite" />
      <path class="cloud" d="M173.4,88.1c-2,0-3.9,0.5-5.5,1.5c-1.3-8.6-8.8-15.2-17.7-15.2c-3.2,0-6.1,0.8-8.7,2.3 c-2.7-6.5-9.1-11.1-16.6-11.1c-3.6,0-6.9,1.1-9.7,2.8c-4.5-11.1-15.4-18.9-28.1-18.9c-15.2,0-27.9,11.2-30.1,25.8 c-1.8-0.6-3.7-0.9-5.7-0.9c-9.9,0-18,8-18,18c0,9.9,8,18,18,18h122.1c6.1,0,11.1-5,11.1-11.1S179.6,88.1,173.4,88.1z" />
    </pattern>
  </defs>

  <!--Define Cloud -->
  <defs>
    <pattern id="cloud1" x="0" y="0" width="300" height="100" patternUnits="userSpaceOnUse" patternTransform="rotate(0)">
      <animatetransform attributeType="xml" attributeName="patternTransform" type="translate" from="300" to="0" begin="0" dur="25s" repeatCount="indefinite" />
      <path class="cloud2" d="M274.6,25.6h-52.7c0.9-1.9,2.9-3.3,5.2-3.3c0.4,0,0.7,0,1,0.1c0.6-2.1,2.6-3.7,4.9-3.7c0.9,0,1.8,0.3,2.5,0.7 c1.4-2.5,4.1-4.1,7.2-4.1c3.2,0,6,1.8,7.3,4.5c1.3,0,2.4,0.5,3.3,1.2c0.8-2.1,2.9-3.7,5.3-3.7c2,0,3.8,1.1,4.8,2.7 c0.4-0.2,0.9-0.2,1.4-0.2c1.8,0,3.3,1.1,4,2.6c0.2,0,0.4,0,0.6,0C271.7,22.4,273.7,23.7,274.6,25.6z" />
    </pattern>
  </defs>

  <!--Define Cloud -->
  <defs>
    <pattern id="cloud2" x="0" y="0" width="300" height="100" patternUnits="userSpaceOnUse" patternTransform="rotate(0)">
      <animatetransform attributeType="xml" attributeName="patternTransform" type="translate" from="300" to="0" begin="0" dur="10s" repeatCount="indefinite" />
      <path class="cloud1" d="M193.6,55.2H97.3c1.7-3.5,5.3-6,9.5-6c0.6,0,1.3,0.1,1.9,0.2c1.2-3.9,4.7-6.7,9-6.7c1.7,0,3.2,0.5,4.6,1.2 c2.6-4.5,7.5-7.5,13.1-7.5c5.9,0,10.9,3.3,13.4,8.2c2.3,0,4.4,0.9,6,2.2c1.5-3.9,5.3-6.7,9.7-6.7c3.7,0,7,2,8.8,4.9 c0.8-0.3,1.6-0.5,2.5-0.5c3.3,0,6.1,2,7.3,4.8c0.4,0,0.7-0.1,1.1-0.1C188.3,49.3,191.9,51.7,193.6,55.2z" />
    </pattern>
  </defs>

  <!--Light-->
  <lineargradient id="light" gradientUnits="userSpaceOnUse" x1="72.287" y1="49.0365" x2="93.7071" y2="49.0365">
    <stop offset="0" style="stop-color:#F29400" />
    <stop offset="1" style="stop-color:#F29400;stop-opacity:0" />
  </lineargradient>

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