Freddy the Fly

Size
4,238 Kb
Views
34,408

How do I make an freddy the fly?

Pure CSS Fly as part of my "create something everyday for 365days" project. https://www.instagram.com/createsomething365/. What is a freddy the fly? How do you make a freddy the fly? This script and codes were developed by Karsten Buckstegge on 13 December 2022, Tuesday.

Freddy the Fly Previews

Freddy the Fly - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Freddy the Fly</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="fly"> <div class="wing wing--right"></div> <div class="legs legs--back"></div> <div class="body"></div> <div class="wing wing--left"></div> <div class="legs legs--front"></div> <div class="head"> <div class="eye eye--right"></div> <div class="eye__shadow eye__shadow--right"></div> <div class="trunk"></div> <div class="eye eye--left"></div> <div class="eye__shadow eye__shadow--left"></div> </div>
</div>
</body>
</html>

Freddy the Fly - Script Codes CSS Codes

html,
body { min-height: 100%; min-width: 100%; display: flex; justify-content: center; align-items: center;
}
body { background: radial-gradient(ellipse at center, #89e3ff 0%, #1a91bf 100%);
}
.fly { position: relative; width: 600px; height: 240px; animation: flybounce .8s .4s infinite ease;
}
@keyframes flybounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(20%); }
}
.head { position: absolute; width: 198px; height: 204px; border-radius: 40% 50% 50% 40%; background: grey; top: 14.4px; left: calc(321.6px - 6%); box-shadow: inset -7px -10px 20px 0 rgba(0, 0, 0, 0.2), inset -14px -20px 0 0 rgba(0, 0, 0, 0.1), -3px 0 20px 0 rgba(0, 0, 0, 0.2), -6px 0 0 0 rgba(0, 0, 0, 0.1); z-index: 1;
}
.head:after { content: ''; position: absolute; display: block; width: 20%; height: 10%; border-radius: 50%; border-bottom: 3px solid black; transform: rotate(20deg); bottom: 17%; left: 20%;
}
.eye { position: absolute; top: 5%; width: 50%; height: 65%; background: #77dd99; border-radius: 50%; overflow: hidden; box-shadow: inset -7px -10px 20px 0 rgba(0, 0, 0, 0.2), inset -14px -20px 0 0 rgba(0, 0, 0, 0.1);
}
.eye--right:before, .eye--left:before { content: ''; position: absolute; display: block; width: 110%; background: #a6a6a6; top: 0; left: 0; transform-origin: bottom center; z-index: 1; box-shadow: inset -20px 0 20px 0 rgba(0, 0, 0, 0.2), inset -25px 0 0 0 rgba(0, 0, 0, 0.1);
}
.eye--right:after, .eye--left:after { content: ''; position: absolute; display: block; width: 17%; height: 35%; background: #000; top: 40%; right: 10%; border-radius: 50%; z-index: 0;
}
.eye--right { transform: scale(0.9) rotate(-5deg); right: -15%;
}
.eye--right:before { height: 30%; transform: rotate(10deg);
}
.eye--right:after { transform: rotate(10deg);
}
.eye--left { transform: rotate(5deg); right: 25%;
}
.eye--left:before { height: 30%; transform: rotate(-10deg);
}
.eye--left:after { transform: rotate(-5deg);
}
.trunk { position: absolute; display: block; height: 20%; width: 50%; background: #a6a6a6; right: -10%; top: 55%; transform-origin: right center; transform: rotate(10deg); border-radius: 0 20% 20% 0 / 50% 50%; box-shadow: inset -7px -10px 20px 0 rgba(0, 0, 0, 0.2), inset -14px -20px 0 0 rgba(0, 0, 0, 0.1); z-index: 0;
}
.trunk:before { content: ''; position: absolute; display: block; width: 90%; height: 100%; background: #a6a6a6; left: 63%; border-radius: 20% 0 0 20% / 50% 50%; transform-origin: 20% center; transform: perspective(210px) rotateZ(75deg) rotateY(-40deg); box-shadow: inset -7px 10px 20px 0 rgba(0, 0, 0, 0.2), inset -14px 20px 0 0 rgba(0, 0, 0, 0.1); z-index: -1;
}
.trunk:after { content: ''; position: absolute; display: block; height: 200%; width: 40%; background: #a6a6a6; right: -16px; top: -20%; border-radius: 80% 50% 50% 80% / 50%; transform: translateY(70%) rotate(80deg); box-shadow: inset -7px 10px 20px 0 rgba(0, 0, 0, 0.2), inset -14px 20px 0 0 rgba(0, 0, 0, 0.1);
}
.body { position: absolute; width: 321.6px; height: 240px; background: grey; border-radius: 50% / 40%; z-index: 1; box-shadow: inset -7px -10px 20px 0 rgba(0, 0, 0, 0.2), inset -14px -20px 0 0 rgba(0, 0, 0, 0.1);
}
.wing { position: absolute; width: 23%; height: 110%; background: rgba(200, 200, 200, 0.3); bottom: 75%; border-radius: 80% 80% 50% 50% / 80%; transform-origin: bottom center; box-shadow: inset -7px -10px 20px 0 rgba(0, 0, 0, 0.05), inset -14px -20px 0 0 rgba(0, 0, 0, 0.025);
}
.wing:before { content: ''; position: absolute; display: block; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-style: solid; border-width: 0 3px 250px 3px; border-color: transparent transparent rgba(0, 0, 0, 0.05) transparent;
}
.wing--right { left: 15%; transform: rotateZ(-20deg) rotateX(0) rotateY(0); z-index: 3; animation: winganimation--right .8s infinite linear;
}
.wing--left { left: 25%; transform: scale(0.85) rotate(30deg); animation: winganimation--left .8s infinite;
}
@keyframes winganimation--left { 0%, 100% { transform: scale(0.85) rotateZ(10deg) rotateX(0deg); } 50% { transform: scale(0.85) rotateZ(30deg) rotateX(140deg); }
}
@keyframes winganimation--right { 0%, 100% { transform: rotateZ(-20deg) rotateX(0deg); } 50% { transform: rotateZ(20deg) rotateX(140deg); }
}
.legs { position: absolute; width: 15%; height: 30%; border-left: 4px solid black; border-right: 4px solid black; z-index: 2; top: 80%; left: 10%; transform: rotateZ(10deg) perspective(210px) rotateX(30deg);
}
.legs:before { content: ''; position: absolute; display: block; top: 96%; left: -15%; height: 50%; border-left: 4px solid black; transform: rotateZ(30deg);
}
.legs:after { content: ''; position: absolute; display: block; top: 96%; right: 5%; height: 50%; border-left: 4px solid black; transform: rotateZ(30deg);
}
.legs--back { left: 17%; z-index: 0;
}
.legs--back, .legs--back:before, .legs--back:after { border-color: rgba(0, 0, 0, 0.7);
}
Freddy the Fly - Script Codes
Freddy the Fly - Script Codes
Home Page Home
Developer Karsten Buckstegge
Username MrBambule
Uploaded December 13, 2022
Rating 3.5
Size 4,238 Kb
Views 34,408
Do you need developer help for Freddy the Fly?

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!

Karsten Buckstegge (MrBambule) Script Codes
Create amazing marketing copy 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!