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