svg+css实现游轮日夜交替旅行动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：svg+css实现游轮日夜交替旅行动画效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
:root {
  --morning-sky: hsl(1, 70%, 70%);
  --dawn-sky: hsl(326, 26%, 44%);
  --night-sky: hsl(256, 52%, 25%);
  --day-duration: 12s;
  --day-cycle-animation-config: var(--day-duration) ease-in-out infinite;
  --sea-duration: 6s;
  --ship-movement-duration: calc(var(--sea-duration) / 5);
}

body {
  height: 100vh;
  padding: 0;
  margin: 0;
}

.scene {
  height: 100%;
  display: grid;
  place-items: center;
}

svg {
  width: 80%;
  height: 80%;
  padding: 12px;
  box-shadow: 2px 10px 16px 0px rgba(0, 0, 0, 0.6);
  animation: sky var(--day-duration) linear infinite;
}

@keyframes sky {
  0% {
    background: var(--morning-sky);
  }
  20% {
    background: var(--morning-sky);
  }
  35% {
    background: var(--dawn-sky);
  }
  50% {
    background: var(--night-sky);
  }
  70% {
    background: var(--night-sky);
  }
  85% {
    background: var(--dawn-sky);
  }
  100% {
    background: var(--morning-sky);
  }
}

#ship,
#flag {
  animation: ship var(--ship-movement-duration) ease-in-out infinite alternate;
}

@keyframes ship {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(4%);
  }
}

#sea {
  animation: sea var(--sea-duration) linear infinite;
}

@keyframes sea {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

#sea-clone {
  animation: sea-clone var(--sea-duration) linear infinite;
}

@keyframes sea-clone {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

#sun {
  left: 50%;
  animation: sun var(--day-cycle-animation-config);
}

@keyframes sun {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  20% {
    transform: translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateY(100%);
    opacity: 0;
  }
  70% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

#moon {
  animation: moon var(--day-cycle-animation-config);
}

@keyframes moon {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  20% {
    transform: translateY(100%);
    opacity: 0;
  }
  50% {
    transform: translateY(0);
    opacity: 1;
  }
  70% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(100%);
    opacity: 0;
  }
}
</style>



</head>

<body translate="no" >
  <main class="scene">
      <svg
        width="796"
        height="525"
        viewBox="0 0 796 525"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <g id="undraw_Yacht_re_kkai 1" clip-path="url(#clip0)">
          <path
            id="moon"
            d="M225.189 209C291.567 209 179.209 209 164.786 106.5C157.094 4 291.567 4 225.189 4C158.81 4 105 49.8908 105 106.5C105 163.109 158.81 209 225.189 209Z"
            fill="#FCFF63"
          />
          <path
            id="flag"
            d="M539.247 37.9881C538.406 34.6843 535.667 32.2125 532.812 30.3499C529.956 28.4872 526.814 26.9902 524.375 24.6071C521.937 22.2241 520.297 18.6005 521.429 15.3845C522.805 11.476 527.389 9.91408 531.397 8.86031C494.717 4.91715 457.858 2.86091 420.967 2.69973C420.136 1.57281 418.969 0.73737 417.635 0.312748C416.301 -0.111875 414.866 -0.103969 413.537 0.335346C412.207 0.774661 411.051 1.62291 410.232 2.75893C409.413 3.89495 408.974 5.26061 408.978 6.66088V125.225H422.3V52.393C453.943 52.4697 485.585 52.5463 517.228 52.6229C522.351 52.6353 527.682 52.6027 532.288 50.3589C536.895 48.1153 540.513 42.953 539.247 37.9881Z"
            fill="#b4b4b4"
          />
          <g id="sea-clone">
            <path
              id="Vector"
              d="M283.754 455.605H3.99652C2.93658 455.605 1.92004 455.183 1.17055 454.434C0.421053 453.684 0 452.668 0 451.608C0 450.548 0.421053 449.532 1.17055 448.782C1.92004 448.033 2.93658 447.611 3.99652 447.611H283.754C284.814 447.611 285.83 448.033 286.58 448.782C287.329 449.532 287.75 450.548 287.75 451.608C287.75 452.668 287.329 453.684 286.58 454.434C285.83 455.183 284.814 455.605 283.754 455.605Z"
              fill="#77E7FF"
            />
            <path
              id="Vector_2"
              d="M159.861 479.584H43.9618C42.9019 479.584 41.8854 479.163 41.1359 478.413C40.3864 477.664 39.9653 476.647 39.9653 475.587C39.9653 474.527 40.3864 473.511 41.1359 472.761C41.8854 472.012 42.9019 471.591 43.9618 471.591H159.861C160.921 471.591 161.938 472.012 162.687 472.761C163.437 473.511 163.858 474.527 163.858 475.587C163.858 476.647 163.437 477.664 162.687 478.413C161.938 479.163 160.921 479.584 159.861 479.584Z"
              fill="#77E7FF"
            />
            <path
              id="Vector_3"
              d="M671.417 455.605H391.66C390.6 455.605 389.584 455.183 388.834 454.434C388.085 453.684 387.663 452.668 387.663 451.608C387.663 450.548 388.085 449.532 388.834 448.782C389.584 448.033 390.6 447.611 391.66 447.611H671.417C672.477 447.611 673.494 448.033 674.243 448.782C674.993 449.532 675.414 450.548 675.414 451.608C675.414 452.668 674.993 453.684 674.243 454.434C673.494 455.183 672.477 455.605 671.417 455.605Z"
              fill="#77E7FF"
            />
            <path
              id="Vector_4"
              d="M499.566 479.584H219.809C218.749 479.584 217.733 479.163 216.983 478.413C216.234 477.664 215.813 476.647 215.813 475.587C215.813 474.527 216.234 473.511 216.983 472.761C217.733 472.012 218.749 471.591 219.809 471.591H499.566C500.626 471.591 501.643 472.012 502.392 472.761C503.142 473.511 .........完整代码请登录后点击上方下载按钮下载查看