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.342-4.229 1.028-2.457-3.714-6.571-6.228-11.371-6.4-7.2-.228-13.314 4.914-14.514 11.829-.915-.229-1.829-.4-2.8-.4a12.79 12.79 0 00-13.029 10.285c-.571-.171-1.143-.228-1.771-.285-4.115-.115-7.658 2.857-8.286 6.857h110.171z" fill="#49A05D" mask="url(#b)" vector-effect="non-scaling-stroke" stroke-width="2" stroke="#000" />
</g>

<g id="ground">
<path d="M690.914 691.371H128.286c-.8 0-1.429-.628-1.429-1.428 0-.8.629-1.429 1.429-1.429h562.628c.8 0 1.429.629 1.429 1.429s-.629 1.428-1.429 1.428z" />
</g>

<g id="clouds">

<g id="cloud-line">
<path d="M145.829 175.543H104.8c-.8 0-1.429-.629-1.429-1.429s.629-1.428 1.429-1.428h41.029c.8 0 1.428.628 1.428 1.428 0 .8-.628 1.429-1.428 1.429zM169.486 175.543H152c-.8 0-1.429-.629-1.429-1.429s.629-1.428 1.429-1.428h17.486c.8 0 1.428.628 1.428 1.428 0 .8-.628 1.429-1.428 1.429z" />
</g>

<g id="cloud-large">
<path d="M188.743 124.571c.571 0 1.086 0 1.657.058 9.657-12.058 24.514-19.829 41.2-19.829 20.229 0 37.829 11.429 46.686 28.171 1.943-.457 4-.742 6.057-.742 14 0 25.314 11.314 25.314 25.314H155.771c0-18.229 14.8-32.972 32.972-32.972z" fill="#FFF" stroke="#000" stroke-width="2" />
<path d="M321.657 158.971h-12c-.8 0-1.428-.628-1.428-1.428 0-.8.628-1.429 1.428-1.429h12c.8 0 1.429.629 1.429 1.429s-.629 1.428-1.429 1.428zM334.571 158.971h-4.457c-.8 0-1.428-.628-1.428-1.428 0-.8.628-1.429 1.428-1.429h4.457c.8 0 1.429.629 1.429 1.429s-.629 1.428-1.429 1.428zM155.771 158.971h-16.857c-.8 0-1.428-.628-1.428-1.428 0-.8.628-1.429 1.428-1.429h16.857c.8 0 1.429.629 1.429 1.429s-.629 1.428-1.429 1.428z" />
</g>

<g id="cloud-small">
<path d="M601.143 357.143c2.171 0 4.228.286 6.228.8 7.2-9.486 18.572-15.6 31.372-15.6 21.771 0 39.428 17.657 39.428 39.428H576.457c.057-13.6 11.086-24.628 24.686-24.628z" fill="#FFF" />
<path d="M678.229 383.2s-.058 0 0 0H576.514c-.8 0-1.428-.629-1.428-1.429 0-14.4 11.714-26.057 26.057-26.057 1.886 0 3.828.229 5.657.629 7.829-9.772 19.371-15.372 31.943-15.372 22.457 0 40.743 18.229 40.857 40.686v.172c.057.742-.629 1.371-1.371 1.371zm-100.286-2.857h98.8c-.743-20.286-17.486-36.572-38-36.572-11.943 0-22.972 5.486-30.286 15.029-.343.457-.914.686-1.486.514-1.885-.514-3.885-.743-5.885-.743-12.286 0-22.4 9.6-23.143 21.772z" />
<path d="M685.314 383.2h-7.143c-.8 0-1.428-.629-1.428-1.429s.628-1.428 1.428-1.428h7.143c.8 0 1.429.628 1.429 1.428 0 .8-.629 1.429-1.429 1.429zM697.257 383.2h-5.486c-.8 0-1.428-.629-1.428-1.429s.628-1.428 1.428-1.428h5.486c.8 0 1.429.628 1.429 1.428 0 .8-.629 1.429-1.429 1.429zM576.514 383.2h-4.971c-.8 0-1.429-..........完整代码请登录后点击上方下载按钮下载查看