gsap序列动画效果-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：gsap序列动画效果

代码标签：效果

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
@import url("https://fonts.googleapis.com/css2?family=Lato&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: grid;
  place-items: center;
  height: 100vh;
  background: #f8fddf;
  font-family: "Lato", sans-serif;
  color: #2b2b2b;
}

a {
  text-decoration: none;
  color: #d33f2e;
  font-size: 0.9rem;
}

.container {
  width: 100%;
  max-width: 800px;
  height: 100%;
  padding: 1em;
  display: grid;
  grid-template-rows: 800px 1fr;
  -webkit-box-align: start;
          align-items: start;
}

section {
  width: 100%;
  max-width: 800px;
  height: 100%;
  max-height: 800px;
  position: relative;
}

.svg-content {
  position: absolute;
  top: 0;
  left: 0;
}

footer {
  padding: 1em 0 2em;
  text-align: center;
  display: grid;
  place-items: center;
}
footer a {
  margin-top: 20px;
}
footer div {
  border: none;
  outline: none;
  width: 40px;
  height: 40px;
  background: #ffa004;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
}
footer div svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke-width: 3;
  stroke: #fff;
  text-align: center;
}

@media (max-width: 580px) {
  .container {
    grid-template-rows: 1fr 30%;
  }
}
</style>

</head>
<body translate="no">
<div class="container">
<section>
<svg xmlns="http://www.w3.org/2000/svg" style="isolation:isolate" viewBox="0 0 800 800" preserveAspectRatio="xMinYMin meet" class="svg-content">
<defs>
<mask id="bkgMask">
<rect x="0" y="490" width="800" height="200" fill="white" />
</mask>
</defs>
<g>

<g mask="url(#bkgMask)">

<path id="city-bkg-back" d="M642.229 554.4h-24.4l-6.629 5.543v15.828h-3.943v11.543h-18v-24.171h-5.6v-4.114h-20.686v4.114h-3.542v17.428l-18.686.458V543.2h-21.314v24.914h-15.086v-9.143h-20v18.686h-5.772v-36.4l-16.8-16.971v61.6l-9.714 1.771v-44.743l-5.543-6.743h-22.628l-5.372 4.4v27.543h-15.257v-7.143l-4.628-6.571h-24.4l-6.629 5.543v15.828h-3.943v12.286h-32.114v-12.971h-18.629v-11.943h-5.6v-4.114h-20.628v4.114h-3.543v17.428l-18.686.458V543.2h-21.314v24.914h-15.086v-9.143h-20v18.686h-5.771v-36.4l-31.429-16.971v61.6l-.628.114v6.343h-16.172v96H646.857V560.971l-4.628-6.571z" fill="#C1D5D7" />

<path id="city-bkg-front" d="M662.8 622h-10.514v-38.743h-18.972v13.086H585.2v-48.4l-36.457 23.371v72.4h-18.229v-47.885L524 589.143h-30.629l-8 5.543v25.085H462v-36.514h-34.971v40.972h-24.743v-15.086h-32.8v30.628H360v-37.257l-19.714-27.885v85.2l-4.743-3.6v-47.086l-9.086-11.086h-37.143l-8.743 7.2v14.629h-4.685v-36.457h-34.972v40.914h-24.8v-15.029h-32.8v30.629H137.2v48.4h525.6V622z" fill="#9BC3C9" />


<path id="bush-left" d="M181.886 689.543h169.143a12.111 12.111 0 002.857-8.286c-.229-6.8-5.886-12.057-12.686-11.828-.914.057-1.829.171-2.686.4-1.828-9.2-10.114-15.943-19.771-15.658a21.006 21.006 0 00-4.286.629c-1.771-10.457-11.086-18.286-22-17.886-7.257.229-13.543 4.057-17.257 9.657a12.635 12.635 0 00-6.4-1.542c-2.857.114-5.429 1.142-7.486 2.857a13.96 13.96 0 00-13.371-8.4 14.214 14.214 0 00-7.086 2.228c-3.714-7.314-11.428-12.228-20.171-11.943-12 .4-21.429 10.458-20.972 22.515a21.032 21.032 0 001.086 6.057c-8.343 1.143-14.629 8.457-14.343 17.028.057 1.372.286 2.743.629 4-3.315 2.058-5.486 5.772-5.315 9.943.115.115.115.172.115.229z" fill="#49A05D" vector-effect="non-scaling-stroke" stroke-width="2" stroke="#000" />

<path id="bush-right" d="M624.914 689.543c-.114-.057-.228-.172-.343-.229.229-.857.4-1.714.458-2.628.171-5.657-3.943-10.515-9.486-11.257.4-1.258.686-2.629.743-4 .285-7.943-5.943-14.572-13.829-14.858a14.395 14.395 0 00-13.314 7.886c-1.372-.857-2.972-1.428-4.686-1.486a9.32 9.32 0 00-8.8 5.543c-1.371-1.085-3.028-1.828-4.914-1.885-1.543-.058-2.972.........完整代码请登录后点击上方下载按钮下载查看