vue3.2+gsap+svg创建多个component组件实现日出日落湖面小船动画效果代码-html代码-BFW代码库

vue3.2+gsap+svg创建多个component组件实现日出日落湖面小船动画效果代码

代码语言：html

所属分类：动画

代码描述：vue3.2+gsap+svg创建多个component组件实现日出日落湖面小船动画效果代码，使用了vue3中的component组件创建方法来控制场景中的太阳，船只、云朵、背景色等组件实现了动画展现效果。

代码标签： vue gsap component svg 湖面日出日落夜晚景色小船

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


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

<head>

  <meta charset="UTF-8">
  

  <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/vue-slider-component/theme/antd.css">
  

<style>
body {
  font-family: sans-serif;
  margin: 0;
  background-color: #1f2937;
  color: rgb(229, 231, 235)
}

svg {
  max-height: 90vh;
  max-width: calc(90vh / 900 * 1600);
}

.boat-enter-active {
  transition: transform 2s ease-out;
}

.boat-leave-active {
  transition: transform 3s ease-in;
}

.boat-enter-from {
  transform: translateX(-350px);
}

.boat-leave-to {
  transform: translateX(1400px);
}

.cloud-enter-active {
  transition: all 3s ease-out;
}

.cloud-leave-active {
  transition: all 3s ease-in;
}

.cloud-enter-from {
  opacity: 0;
  transform: translateX(-200px);
}

.cloud-leave-to {
  opacity: 0;
  transform: translateX(200px);
}

.controls-enter-active,
.controls-leave-active {
  transition: transform 0.7s;
}

.controls--0.controls-enter-from,
.controls--0.controls-leave-to {
  transform: translateX(-100vw);
}

.controls--1.controls-enter-from,
.controls--1.controls-leave-to {
  transform: translateX(100vw);
}

a { color: inherit; }
.absolute { position: absolute; }
.relative { position: relative; }
.top-0 { top: 0px; }
.inset-x-0 { left: 0px; right: 0px; }
.w-full { width: 100%; }
.h-24 { height: 6rem; }
.mt-5 { margin-top: 1.25rem; }
.space-x-4 > :not([hidden]) ~ :not([hidden]) { margin-left: 1rem; }
.flex { display: flex; }
.justify-center { justify-content: center; }
.items-end { align-i.........完整代码请登录后点击上方下载按钮下载查看