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

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

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