Freddy the Fly
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 - 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);
}
Developer | Karsten Buckstegge |
Username | MrBambule |
Uploaded | December 13, 2022 |
Rating | 3.5 |
Size | 4,238 Kb |
Views | 34,408 |
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!
Name | Size |
Base64 SVG Me | 44,786 Kb |
Responsive CSS arrow bar with transparent borders | 2,798 Kb |
The wheel of social | 4,072 Kb |
Sliding Skill-Diagramm | 2,466 Kb |
A Pen by Karsten Buckstegge | 3,521 Kb |
CSS3 Hover Button | 3,717 Kb |
Scalable animated css menu button | 2,632 Kb |
SeXy buttons | 4,447 Kb |
Responsive focuspoint on image with object-position | 3,707 Kb |
Dropdown Menu Animation | 3,411 Kb |
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!
Name | Username | Size |
Popover | Teles | 2,248 Kb |
Slide out Menu | Rbiggs | 4,936 Kb |
3d css cube | Semenchenko | 4,578 Kb |
Weather App | Kw7oe | 3,162 Kb |
Loading animation - freedom purchase | Rocbear | 2,567 Kb |
JavaScript constructors | Simboonlong | 2,415 Kb |
Mobile Sub Menu Concept | Berdejitendra | 2,790 Kb |
Cloud upload | Jaflo | 2,774 Kb |
Blog Concept 2 | JGallardo | 2,994 Kb |
Pink expansion tunnel | Vez | 1,738 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!