Pure css responsive Shadow of the Beast

Developer
Yukulélé
Size
3,583 Kb
Views
62,744
  1. Pure css responsive Shadow of the Beast Previews
  2. Pure css responsive Shadow of the Beast HTML Codes
  3. Pure css responsive Shadow of the Beast CSS Codes

How do I make an pure css responsive shadow of the beast?

Shadow of the Beast: https://youtu.be/e-U6HUaAONI?t=15m09sSee also zoomable version: http://codepen.io/yukulele/details/YPpeEN. What is a pure css responsive shadow of the beast? How do you make a pure css responsive shadow of the beast? This script and codes were developed by Yukulélé on 26 August 2022, Friday.

Pure css responsive Shadow of the Beast Previews
IQ Test

Pure css responsive Shadow of the Beast - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>pure css responsive Shadow of the Beast</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="view"> <div class="moon"></div> <div class="dirigeable"> <div class="dirigeable2"></div> <div class="dirigeable1"></div> </div> <div class="earth"> <div class="mountain"></div> <div class="grass1"></div> <div class="grass2"></div> <div class="grass3"></div> <div class="grass4"></div> <div class="grass5"></div> <div class="fence"></div> </div> <div class="aarbron"></div> <div class="clouds"> <div class="clouds5"></div> <div class="clouds4"></div> <div class="clouds3"></div> <div class="clouds2"></div> <div class="clouds1"></div> </div>
</div>
</body>
</html>

Pure css responsive Shadow of the Beast - Script Codes CSS Codes

.earth { position: absolute; left: 0; right: 0; bottom: 0; background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/67868/sotb-sprites.png"); background-position: left 0px bottom -21px; height: 32px;
}
.clouds1,
.clouds2,
.clouds3,
.clouds4,
.clouds5,
.mountain,
.grass1,
.grass2,
.grass3,
.grass4,
.grass5,
.fence { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/67868/sotb-sprites.png"); right: -320px; left: 0; position: absolute; -webkit-animation: repeat infinite linear; animation: repeat infinite linear;
}
.clouds1 { -webkit-animation-duration: 2s; animation-duration: 2s; height: 21px; background-position: 0 0; top: 0px;
}
.clouds2 { -webkit-animation-duration: 4s; animation-duration: 4s; height: 40px; background-position: 0 -21px; top: 21px;
}
.clouds3 { -webkit-animation-duration: 6s; animation-duration: 6s; height: 19px; background-position: 0 -61px; top: 61px;
}
.clouds4 { -webkit-animation-duration: 8s; animation-duration: 8s; height: 9px; background-position: 0 -80px; top: 80px;
}
.clouds5 { -webkit-animation-duration: 10s; animation-duration: 10s; height: 6px; background-position: 0 -89px; top: 89px;
}
.mountain { -webkit-animation-duration: 12s; animation-duration: 12s; height: 73px; background-position: 0 -95px; bottom: 30px;
}
.grass1 { -webkit-animation-duration: 10s; animation-duration: 10s; height: 2px; background-position: 0 -168px; bottom: 28px;
}
.grass2 { -webkit-animation-duration: 8s; animation-duration: 8s; height: 3px; background-position: 0 -170px; bottom: 25px;
}
.grass3 { -webkit-animation-duration: 6s; animation-duration: 6s; height: 7px; background-position: 0 -173px; bottom: 18px;
}
.grass4 { -webkit-animation-duration: 4s; animation-duration: 4s; height: 7px; background-position: 0 -180px; bottom: 11px;
}
.grass5 { -webkit-animation-duration: 2s; animation-duration: 2s; height: 11px; background-position: 0 -187px; bottom: 0px;
}
.fence { -webkit-animation-duration: 2s; animation-duration: 2s; height: 21px; background-position: 0 -198px; bottom: 0px;
}
.view { image-rendering: -webkit-optimize-contrast; image-rendering: -moz-crisp-edges; -ms-interpolation-mode: nearest-neighbor; image-rendering: pixelated; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/67868/sotb-background.png"); background-size: 100px 100%;
}
.moon { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/67868/sotb-moon.png"); width: 53px; height: 53px; position: absolute; top: 30px; right: 30px;
}
.dirigeable1,
.dirigeable2 { background-position: 0 0; position: absolute; left: 100%; -webkit-animation: fly infinite 15s linear; animation: fly infinite 15s linear;
}
.dirigeable1 { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/67868/sotb-dirigeable1.png"); width: 64px; margin-left: -64px; height: 27px; top: 25%; left: calc(120% + 64px * 2);
}
.dirigeable2 { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/67868/sotb-dirigeable2.png"); width: 32px; margin-left: -32px; height: 13px; top: 35%; left: calc(120% + 32px * 2); -webkit-animation-direction: reverse; animation-direction: reverse; -webkit-animation-duration: 23s; animation-duration: 23s;
}
.aarbron { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/67868/sotb-aarbron.png"); position: absolute; bottom: 26px; left: 0; right: 0; width: 32px; height: 52px; margin: 0 auto; background-position: 0 0; -webkit-animation: walking 0.75s infinite reverse steps(5); animation: walking 0.75s infinite reverse steps(5);
}
/*
.view:hover	$sprite	animation-direction reverse	.aarbron	transform scaleX(-1)
*/
@-webkit-keyframes repeat { 0% { -webkit-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px); } 100% { -webkit-transform: translate3d(-320px, 0px, 0px); transform: translate3d(-320px, 0px, 0px); }
}
@keyframes repeat { 0% { -webkit-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px); } 100% { -webkit-transform: translate3d(-320px, 0px, 0px); transform: translate3d(-320px, 0px, 0px); }
}
@-webkit-keyframes fly { 0% { left: 0; }
}
@keyframes fly { 0% { left: 0; }
}
@-webkit-keyframes walking { 100% { background-position: 160px 0px; }
}
@keyframes walking { 100% { background-position: 160px 0px; }
}
Pure css responsive Shadow of the Beast - Script Codes
Pure css responsive Shadow of the Beast - Script Codes
Home Page Home
Developer Yukulélé
Username yukulele
Uploaded August 26, 2022
Rating 3.5
Size 3,583 Kb
Views 62,744
Do you need developer help for Pure css responsive Shadow of the Beast?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Yukulélé (yukulele) Script Codes
Name
Musical scale visualisation
Perlin noise animation
Shepard Piano
Times Table on Circle
Steiner chain
CSS Vortex
Nested divs animated by CSS
Pure CSS Star Wars opening crawl
Pure CSS machine arm articulated
SVG Function Plotter
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!