<div class="sun"></div>

<div class="mountains mountains-back"></div>
  <div class="mountains mountains-front"></div>

<div class="tree tree-1">
    <div class="trunk"></div>
    <div class="leaves leaves-a"></div>
    <div class="leaves leaves-b"></div>
    <div class="leaves leaves-c"></div>
  </div>

<div class="path"></div>

<div class="walker">

<div class="neck"></div>

<div class="torso">
        <div class="shirt-shadow"></div>
      </div>

<div class="arm arm-left">
        <div class="upper-arm"></div>
        <div class="forearm"></div>
        <div class="hand"></div>
      </div>

<div class="leg leg-left">
        <div class="thigh"></div>
        <div class="shin"></div>
        <div class="shoe"></div>
      </div>

</div>
  </div>

</div>

```css
* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  background: #9fd8f6;
  font-family: Arial, sans-serif;
}

/* ==================================================
   SCENE
================================================== */

.scene {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;

background:
    linear-gradient(
      to bottom,
      #73bde8 0%,
      #a7dcf5 52%,
      #dff1e8 72%,
      #89af62 73%,
      #52783c 100%
    );
}

/* ==================================================
   SUN
================================================== */

.sun {
  position: absolute;

top: 7vh;
  right: 9vw;

width: 75px;
  height: 75px;

border-radius: 50%;

background:
    radial-gradient(
      circle,
      #fff9cb 0%,
      #ffe98b 40%,
      #f6cb58 75%
    );

box-shadow:
    0 0 30px rgba(255, 232, 136, 0.6),
    0 0 75px rgba(255, 224, 120, 0.3);
}

/* ==================================================
   CLOUDS
================================================== */

.cloud {
  position: absolute;

width: 130px;
  height: 35px;

border-radius: 40px;

background: rgba(255,255,255,0.82);

filter: blur(0.2px);

animation: cloudMove 45s linear infinite;
}

.cloud::before,
.cloud::after {
  content: "";
  position: absolute;

border-radius: 50%;

background: inherit;
}

.cloud::before {
  width: 60px;
  height: 60px;

left: 22px;
  top: -28px;
}

.cloud::after {
  width: 75px;
  height: 75px;

right: 15px;
  top: -40px;
}

.cloud-1 {
  top: 14%;
  left: 10%;
}

.cloud-2 {
  top: 25%;
  left: 48%;

transform: scale(0.7);
  opacity: 0.7;

animation-duration: 60s;
}

.cloud-3 {
  top: 9%;
  left: 72%;

transform: scale(0.5);
  opacity: 0.55;

animation-duration: 70s;
}

/* ==================================================
   MOUNTAINS
================================================== */

.mountains {
  position: absolute;

left: -10%;
  width: 120%;

clip-path:
    polygon(
      0 100%,
      0 64%,
      8% 50%,
      15% 67%,
      24% 34%,
      34% 62%,
      42% 46%,
      51% 70%,
      61% 40%,
      70% 65%,
      80% 32%,
      90% 61%,
      100% 45%,
      100% 100%
    );
}

.mountains-back {
  bottom: 24%;
  height: 45%;

background:
    linear-gradient(
      to bottom,
      #8599a2,
      #6f858c
    );

opacity: 0.55;
}

.mountains-front {
  bottom: 21%;
  height: 34%;

background:
    linear-gradient(
      to bottom,
      #678171,
      #48644f
    );

opacity: 0.8;
}

/* ==================================================
   FIELDS
================================================== */

.field {
  position: absolute;
  left: 0;
  width: 100%;
}

.far-field {
  bottom: 15%;
  height: 24%;

background:
    linear-gradient(
      #8ca968,
      #739056
    );

clip-path:
    ellipse(
      75% 55%
      at
      50% 100%
    );
}

.near-field {
  bottom: 0;
  height: 25%;

background:
    linear-gradient(
      #6f984d,
      #4f7438
    );
}

/* ==================================================
   PATH
================================================== */

.path {
  position: absolute;

left: 0;
  bottom: -6%;

width: 100%;
  height: 30%;

background:
    linear-gradient(
      to bottom,
      #baaa88,
      #9a8565
    );

clip-path:
    polygon(
      0 73%,
      100% 42%,
      100% 100%,
      0 100%
    );
}

/* ==================================================
   TREES
================================================== */

.tree {
  position: absolute;

width: 130px;
  height: 210px;

transform-origin: bottom center;
}

.tree-1 {
  left: 7%;
  bottom: 18%;
  transform: scale(0.8);
}

.tree-2 {
  right: 8%;
  bottom: 20%;
  transform: scale(1.05);
}

.tree-3 {
  right: 29%;
  bottom: 27%;
  transform: scale(0.5);
  opacity: 0.8;
}

.trunk {
  position: absolute;

left: 55px;
  bottom: 0;

width: 24px;
  height: 105px;

background:
    linear-gradient(
      90deg,
      #60432d,
      #8a6344,
      #553925
    );

border-radius: 8px;
}

.leaves {
  position: absolute;
  border-radius: 50%;

background:
    radial-gradient(
      circle at 35% 30%,
      #6e9f58,
      #3e713e 65%,
      #2e5e36
    );
}

.leaves-a {
  width: 110px;
  height: 100px;

left: 7px;
  top: 15px;
}

.leaves-b {
  width: 95px;
  height: 90px;

left: 48px;
  top: 40px;
}

.leaves-c {
  width: 85px;
  height: 80px;

left: 15px;
  top: 62px;
}

/* ==================================================
   WALKER POSITION
================================================== */

.walker {
  position: absolute;

left: -150px;
  bottom: 13%;

width: 130px;
  height: 270px;

animation:
    walkAcross 14s linear infinite;
}

/* ==================================================
   BODY BOUNCE
================================================== */

.person {
  position: absolute;

left: 15px;
  bottom: 12px;

width: 100px;
  height: 250px;

animation:
    bodyBounce 0.7s ease-in-out infinite;
}

/* ==================================================
   SHADOW
================================================== */

.person-shadow {
  position: absolute;

bottom: 2px;
  left: 10px;

width: 105px;
  height: 18px;

border-radius: 50%;

background:
    rgba(24, 30, 27, 0.26);

filter: blur(5px);

animation:
    shadowMove 0.7s ease-in-out infinite;
}

/* ==================================================
   HEAD
================================================== */

.head {
  position: absolute;

left: 26px;
  top: 5px;

width: 55px;
  height: 70px;

border-radius:
    48% 48% 45% 45%;

background:
    linear-gradient(
      110deg,
      #d79565,
      #ebb17c 45%,
      #cc875b
    );

box-shadow:
    inset -5px -3px 8px rgba(100,60,30,0.12);

z-index: 8;
}

/* ==================================================
   HAIR
================================================== */

.hair {
  position: absolute;

left: -2px;
  top: -5px;

width: 59px;
  height: 29px;

border-radius:
    50% 50% 30% 25%;

background:
    linear-gradient(
      #33291f,
      #1d1814
    );

transform: rotate(-4deg);
}

.hair::after {
  content: "";

position: absolute;

right: 1px;
  top: 13px;

width: 10px;
  height: 31px;

background: #211914;

border-radius: 4px 8px 8px 4px;
}

/* ==================================================
   FACE
================================================== */

.eye {
  position: absolute;

top: 31px;

width: 5px;
  height: 5px;

border-radius: 50%;

background: #29231f;
}

.eye-left {
  left: 15px;
}

.eye-right {
  right: 14px;
}

.eyebrow {
  position: absolute;

top: 25px;

width: 14px;
  height: 2px;

border-radius: 2px;

background: #4a362b;
}

.eyebrow-left {
  left: 10px;
  transform: rotate(-4deg);
}

.eyebrow-right {
  right: 9px;
  transform: rotate(5deg);
}

.nose {
  position: absolute;

left: 26px;
  top: 35px;

width: 6px;
  height: 12px;

border-right:
    2px solid rgba(130,80,50,0.45);

border-bottom:
    2px solid rgba(130,80,50,0.28);

border-radius: 50%;
}

.mouth {
  position: absolute;

left: 20px;
  bottom: 12px;

width: 16px;
  height: 6px;

border-bottom:
    2px solid #8d493f;

border-radius: 50%;
}

/* ==================================================
   EARS
================================================== */

.ear {
  position: absolute;

top: 31px;

width: 10px;
  height: 15px;

border-radius: 50%;

background: #d99566;

z-index: -1;
}

.ear-left {
  left: -6px;
}

.ear-right {
  right: -6px;
}

/* ==================================================
   NECK
================================================== */

.neck {
  position: absolute;

left: 44px;
  top: 67px;

width: 22px;
  height: 22px;

background: #d99b6c;

border-radius: 5px;

z-index: 4;
}

/* ==================================================
   TORSO
================================================== */

.torso {
  position: absolute;

left: 27px;
  top: 82px;

width: 54px;
  height: 85px;

border-radius:
    15px 15px 8px 8px;

background:
    linear-gradient(
      90deg,
      #315f81,
      #3f789f 50%,
      #28556f
    );

z-index: 5;
}

.shirt-shadow {
  position: absolute;

right: 6px;
  top: 10px;

width: 10px;
  height: 64px;

border-radius: 10px;

background:
    rgba(0,0,0,0.08);
}

/* ==================================================
   ARMS
================================================== */

.arm {
  position: absolute;

top: 90px;

width: 18px;
  height: 87px;

transform-origin:
    50% 5px;

z-index: 3;
}

.arm-left {
  left: 20px;

animation:
    armSwingA 0.7s ease-in-out infinite alternate;
}

.arm-right {
  right: 12px;

animation:
    armSwingB 0.7s ease-in-out infinite alternate;
}

.upper-arm {
  position: absolute;

left: 2px;

width: 16px;
  height: 45px;

border-radius: 9px;

background: #396f93;
}

.forearm {
  position: absolute;

left: 3px;
  top: 37px;

width: 14px;
  height: 44px;

border-radius: 9px;

background:
    linear-gradient(
      #dea06f,
      #ce895c
    );
}

.hand {
  position: absolute;

left: 1px;
  bottom: -3px;

width: 17px;
  height: 19px;

border-radius:
    50% 50% 45% 45%;

background: #dc9b6b;
}

/* ==================================================
   LEGS
================================================== */

.leg {
  position: absolute;

top: 157px;

width: 24px;
  height: 96px;

transform-origin:
    50% 5px;

z-index: 2;
}

.leg-left {
  left: 29px;

animation:
    legSwingA 0.7s ease-in-out infinite alternate;
}

.leg-right {
  right: 21px;

animation:
    legSwingB 0.7s ease-in-out infinite alternate;
}

.thigh {
  position: absolute;

width: 22px;
  height: 48px;

border-radius:
    8px 8px 5px 5px;

background:
    linear-gradient(
      90deg,
      #343b46,
      #515965
    );
}

.shin {
  position: absolute;

left: 2px;
  top: 43px;

width: 19px;
  height: 48px;

border-radius: 5px;

background:
    linear-gradient(
      90deg,
      #3b424d,
      #252b34
    );
}

.shoe {
  position: absolute;

left: -2px;
  bottom: -1px;

width: 31px;
  height: 15px;

border-radius:
    9px 13px 4px 4px;

background:
    linear-gradient(
      #4c392f,
      #241c18
    );
}

/* ==================================================
   ANIMATIONS
================================================== */

@keyframes walkAcross {

0% {
    left: -150px;
  }

100% {
    left: calc(100% + 150px);
  }
}

@keyframes bodyBounce {

0%,
  100% {
    transform:
      translateY(0)
      rotate(-1deg);
  }

50% {
    transform:
      translateY(-5px)
      rotate(1deg);
  }
}

@keyframes legSwingA {

from {
    transform:
      rotate(25deg);
  }

to {
    transform:
      rotate(-25deg);
  }
}

@keyframes legSwingB {

from {
    transform:
      rotate(-25deg);
  }

to {
    transform:
      rotate(25deg);
  }
}

@keyframes armSwingA {

from {
    transform:
      rotate(-28deg);
  }

to {
    transform:
      rotate(28deg);
  }
}

@keyframes armSwingB {

from {
    transform:
      rotate(28deg);
  }

to {
    transform:
      rotate(-28deg);
  }
}

@keyframes shadowMove {

0%,
  100% {
    transform:
      scaleX(1);

opacity: 0.26;
  }

50% {
    transform:
      scaleX(0.82);

opacity: 0.18;
  }
}

@keyframes cloudMove {

0% {
    margin-left: -180px;
  }

100% {
    margin-left: 115vw;
  }
}
```

Liveweave: Generative AI Web Editor & HTML/CSS/JS Playground