* {
		    margin: 0;
		    padding: 0;
		}

.animation_frame {
		    background: linear-gradient(to bottom, #a0dae6 0%, #a0dae6 500px, #4cac63 500px, #4cac63 100%);
		    height: 600px;
		    width: 800px;
		    margin: auto;
		    overflow: hidden;
		    position: relative;
		    border: 5px solid #515151;
		    top: 50px;
		}

.clouds {
		    background: #fff;
		    width: 180px;
		    height: 50px;
		    border-radius: 180px;
		    position: absolute;
		    top: 100px;
		    -webkit-animation: move_clouds 10s infinite linear;
		    animation: move_clouds 10s infinite linear;
		}
		.clouds:before, .clouds:after {
		    content:"";
		    position: absolute;
		    background: #fff;
		    width: 100px;
		    height: 60px;
		    top: -25px;
		    left: 15px;
		    border-radius: 80px;
		    -webkit-transform: rotate(30deg);
		    transform: rotate(30deg);
		}
		.clouds:after {
		    height: 120px;
		    width: 120px;
		    top: -55px;
		    left: auto;
		    right: 15px;
		}
		@-webkit-keyframes move_clouds {
		    0% {
		        left: -100%;
		    }
		    100% {
		        left: 100%;
		    }
		}

@keyframes move_clouds {
		    0% {
		        left: -100%;
		    }
		    100% {
		        left: 100%;
		    }
		}
		.cloud_holder div:nth-of-type(1) {
			-webkit-animation-delay: -1s;
		    animation-delay: -1s;
		    top: 150px;
		}
		.cloud_holder div:nth-of-type(2) {
			-webkit-animation-delay: -3s;
		    animation-delay: -3s;
		    top: 180px;
		    opacity: .6;
		}
		.cloud_holder div:nth-of-type(3) {
			-webkit-animation-delay: -5s;
		    animation-delay: -5s;
		    top: 50px;
		}
		.cloud_holder div:nth-of-type(4) {
		    -webkit-animation-delay: -7s;
		    animation-delay: -7s;
		    opacity: .8;
		}

.spaceship {
		    position: absolute;
		    height: 120px;
		    width: 230px;
		    left: -250px;
		    margin-left: -100px;
		    -webkit-animation: motion 15s 1 linear;
		    animation: motion 15s 1 linear;
		    -webkit-animation-fill-mode: forwards;
		    animation-fill-mode: forwards;
		}
		@-webkit-keyframes motion {
		    20% {
		        left: 50%;
		    }
		    80% {
		        left: 50%;
		    }
		    100% {
		        left: 150%;
		    }
		}
		@keyframes motion {
		    20% {
		        left: 50%;
		    }
		    80% {
		        left: 50%;
		    }
		    100% {
		        left: 150%;
		    }
		}
		.grey_handler {
		    height: 120px;
		    width: 230px;
		    border: 5px solid #5A5C57;
		    position: absolute;
		    border-radius: 50%;
		    background: radial-gradient(ellipse at center, #bfbfbf 0%, #74756f 100%);
		    top: 60px;
		    z-index: 1;
		}
		.glass {
		    border: 5px solid #7A797A;
		    height: 90px;
		    position: absolute;
		    top: -20px;
		    width: 150px;
		    left: 50%;
		    margin-left: -80px;
		    border-radius: 50%;
		    background: radial-gradient(ellipse at center, #ffffff 0%, #e5e5e5 100%);
		}
		.glass span, .glass span:after, .glass span:before {
		    position: absolute;
		    height: 10px;
		    width: 10px;
		    background: #eee;
		    border-radius: 50%;
		    box-shadow: 0 0 0 transparent;
		    -webkit-animation: glow_bulbs 1s infinite linear;
		    animation: glow_bulbs 1s infinite linear;
		}
		.glass span:before, .glass span:after {
		    content:"";
		}
		.glass span:nth-of-type(1) {
		    bottom: 10px;
		    left: -20px;
		}
		.glass span:nth-of-type(1):before {
		    bottom: -30px;
		    left: 30px;
		}
		.glass span:nth-of-type(1):after {
		    bottom: -40px;
		    left: 90px;
		}
		.glass span:nth-of-type(2) {
		    bottom: 10px;
		    right: -20px;
		}
		.glass span:nth-of-type(2):before {
		    bottom: -30px;
		    right: 30px;
		}
		@-webkit-keyframes glow_bulbs {
		    50% {
		        box-shadow: 0 0 12px #fff;
		    }
		}
		@keyframes glow_bulbs {
		    50% {
		        box-shadow: 0 0 12px #fff;
		    }
		}
		.beam {
		    width: 50px;
		    height: 0;
		    border-bottom:400px solid rgba(255, 250, 0, .5);
		    border-left: 50px solid transparent;
		    border-right: 50px solid transparent;
		    left: 50%;
		    margin-left: -70px;
		    position: absolute;
		    bottom: -450px;
		    opacity: 0;
		    -webkit-animation: beamer 7s 1 linear;
		    -webkit-animation-delay: 3s;
		    animation: beamer 7s 1 linear;
		    animation-delay: 3s;
		}
		@-webkit-keyframes beamer {
		    10% {
		        opacity: 1;
		    }
		    100% {
		        opacity: 1;
		    }
		}
		@keyframes beamer {
		    10% {
		        opacity: 1;
		    }
		    100% {
		        opacity: 1;
		    }
		}
		.body {
		    width: 24px;
		    position: absolute;
		    left: 50%;
		    bottom: 100px;
		    -webkit-animation: fly 5s 1 linear;
		    -webkit-animation-delay: 4s;
		    -webkit-animation-fill-mode: forwards;
		    animation: fly 5s 1 linear;
		    animation-delay: 4s;
		    animation-fill-mode: forwards;
		}
		@-webkit-keyframes fly {
		    0% {
		        -webkit-transform: rotate(20deg);
		    }
		    30% {
		        -webkit-transform: rotate(60deg);
		    }
		    60% {
		        -webkit-transform: rotate(0deg);
		    }
		    80% {
		        -webkit-transform: rotate(-20deg);
		    }
		    99% {
		        bottom: 80%;
		        opacity: 1;
		    }
		    100% {
		        bottom: 80%;
		        opacity: 0;
		    }
		}
		@keyframes fly {
		    0% {
		        transform: rotate(20deg);
		    }
		    30% {
		        transform: rotate(60deg);
		    }
		    60% {
		        transform: rotate(0deg);
		    }
		    80% {
		        transform: rotate(-20deg);
		    }
		    99% {
		        bottom: 80%;
		        opacity: 1;
		    }
		    100% {
		        bottom: 80%;
		        opacity: 0;
		    }
		}
		.head {
		    height: 15px;
		    width: 15px;
		    background: #000;
		    border-radius: 50%;
		    left: 50%;
		    margin-left: -7px;
		    position: relative;
		}
		.stomach {
		    height: 40px;
		    width: 20px;
		    background: #000;
		    position: relative;
		    left: 2px;
		}
		.legs {
		    position: relative;
		}
		.legs span {
		    height: 30px;
		    width: 5px;
		    background: #000;
		    position: absolute;
		    top: -3px;
		}
		.legs span:nth-of-type(1) {
			-webkit-transform: rotate(20deg);
		    transform: rotate(20deg);
		    left: 2px;
		}
		.legs span:nth-of-type(2) {
			-webkit-transform: rotate(-20deg);
		    transform: rotate(-20deg);
		    right: 2px;
		}
		.legs span:nth-of-type(1):before,
		.legs span:nth-of-type(2):after {
			content:"";
		    height: 5px;
		    width: 10px;
		    background: #000;
		    position: absolute;
		    bottom: 0;
		}
		.legs span:nth-of-type(1):before {
		    border-radius: 40% 20% 20% 40%/20% 20% 50% 50%;
		    right: 0;
		}
		.legs span:nth-of-type(2):after {
		    border-radius: 20% 40% 40% 20%/50% 50% 20% 20%;
		}
		.hands span {
		    height: 30px;
		    width: 5px;
		    background: #000;
		    position: absolute;
		    top: -15px;
		    border-radius: 10px 10px 0 0;
		}
		.hands span:nth-of-type(1):after,
		.hands span:nth-of-type(1):before,
		.hands span:nth-of-type(2):after,
		.hands span:nth-of-type(2):before {
			content:"";
		    height: 5px;
		    width: 10px;
		    border-radius: 50%;
		    position: absolute;
		    background: #000;
		    top: 3px;
		}

.hands span:nth-of-type(1) {
		    left: -5px;
		    -webkit-transform: rotate(-30deg);
		    transform: rotate(-30deg);
		}
		.hands span:nth-of-type(1):after,
		.hands span:nth-of-type(2):after {
		    -webkit-transform: rotate(-30deg);
		    transform: rotate(-30deg);
		}
		.hands span:nth-of-type(1):before,
		.hands span:nth-of-type(2):before {
		    left: -5px;
		    -webkit-transform: rotate(30deg);
		    transform: rotate(30deg);
		}
		.hands span:nth-of-type(2) {
		    right: -5px;
		    -webkit-transform: rotate(30deg);
		    transform: rotate(30deg);
		}

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