Animated CSS Poly Drop

Developer
Michael Lee
Size
3,287 Kb
Views
14,168
  1. Animated CSS Poly Drop Previews
  2. Animated CSS Poly Drop HTML Codes
  3. Animated CSS Poly Drop CSS Codes
  4. Animated CSS Poly Drop JS Codes

How do I make an animated css poly drop?

Based off of a poly illustration by Artem Merenfeld. Added in a little floating animation with a shadow.. What is a animated css poly drop? How do you make a animated css poly drop? This script and codes were developed by Michael Lee on 20 January 2023, Friday.

Animated CSS Poly Drop Previews
IQ Test

Animated CSS Poly Drop - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated CSS Poly Drop</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="stage"> <div class="poly-drop"> <div class="top"></div> <div class="mid"></div> <div class="bot"></div> </div> <div class="shadow"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Animated CSS Poly Drop - Script Codes CSS Codes

body { background: #3a3a3a; margin: 0; padding: 0;
}
.stage { position: absolute; width: 300px; height: 550px; left: 50%; margin: 0 0 0 -150px;
}
.poly-drop { height: 440px; width: 300px; position: absolute; left: 17px; top: 0; -webkit-animation: drop 2s infinite; -moz-animation: drop 2s infinite; animation: drop 2s infinite; -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; animation-timing-function: ease-out;
}
.top { border-bottom: 86px solid #6fb1cf; border-left: 35px solid transparent; border-right: 90px solid transparent; position: absolute; top: 126px; right: 54px; -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -ms-transform: rotate(20deg); -o-transform: rotate(20deg); transform: rotate(20deg); z-index: 2;
}
.top:before { content: ''; border-bottom: 73px solid #c3e2ee; border-right: 86px solid transparent; border-left: 1px solid transparent; position: absolute; top: -73px; right: -3px; -webkit-transform: rotate(2deg); -moz-transform: rotate(2deg); -ms-transform: rotate(2deg); -o-transform: rotate(2deg); transform: rotate(2deg);
}
.top:after { content: ''; border-bottom: 239px solid #9ad0de; border-left: 86px solid transparent; border-right: 0px solid transparent; position: absolute; top: -1px; right: 3px; -webkit-transform: rotate(-178deg); -moz-transform: rotate(-178deg); -ms-transform: rotate(-178deg); -o-transform: rotate(-178deg); transform: rotate(-178deg);
}
.mid { border-top: 85px solid #4495c1; border-left: 0px solid transparent; border-right: 90px solid transparent; height: 0px; width: 90px; -webkit-transform: rotate(-117deg); -moz-transform: rotate(-117deg); -ms-transform: rotate(-117deg); -o-transform: rotate(-117deg); transform: rotate(-117deg); position: absolute; bottom: 150px; right: 21px;
}
.mid:before { content: ''; position: absolute; border-bottom: 152px solid #429cd5; border-left: 121px solid transparent; border-right: 61px solid transparent; top: -236px; left: -2px;
}
.mid:after { content: ''; border-bottom: 120px solid #55aad4; border-left: 8px solid transparent; border-right: 167px solid transparent; top: -219px; left: -32px; -webkit-transform: rotate(93deg); -moz-transform: rotate(93deg); -ms-transform: rotate(93deg); -o-transform: rotate(93deg); transform: rotate(93deg); position: absolute;
}
.bot { border-top: 80px solid #4389c8; border-left: 50px solid transparent; border-right: 90px solid transparent; height: 0px; width: 110px; -webkit-transform: rotate(-27deg); -moz-transform: rotate(-27deg); -ms-transform: rotate(-27deg); -o-transform: rotate(-27deg); transform: rotate(-27deg); position: absolute; bottom: 0; right: 0;
}
.shadow { height: 10px; width: 180px; border-radius: 100%; background: #363636; margin: 500px auto 0; -webkit-animation: shadow 2s infinite; -moz-animation: shadow 2s infinite; animation: shadow 2s infinite; -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; animation-timing-function: ease-out;
}
@-webkit-keyframes shadow { 0% { width: 180px; background: #363636; } 50% { width: 220px; background: #333; } 100% { width: 180px; background: #363636; }
}
@-moz-keyframes shadow { 0% { width: 180px; background: #363636; } 50% { width: 220px; background: #333; } 100% { width: 180px; background: #363636; }
}
@keyframes shadow { 0% { width: 180px; background: #363636; } 50% { width: 220px; background: #333; } 100% { width: 180px; background: #363636; }
}
@-webkit-keyframes drop { 0% { top: 0; } 50% { top: 20px; } 100% { top: 0; }
}
@-moz-keyframes drop { 0% { top: 0; } 50% { top: 20px; } 100% { top: 0; }
}
@keyframes drop { 0% { top: 0; } 50% { top: 20px; } 100% { top: 0; }
}

Animated CSS Poly Drop - Script Codes JS Codes

/* Inspired by Artem Merenfeld's Poly Drop on Dribbble - http://drbl.in/iTHO */
Animated CSS Poly Drop - Script Codes
Animated CSS Poly Drop - Script Codes
Home Page Home
Developer Michael Lee
Username michaellee
Uploaded January 20, 2023
Rating 4.5
Size 3,287 Kb
Views 14,168
Do you need developer help for Animated CSS Poly Drop?

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!

Michael Lee (michaellee) Script Codes
Name
Mountains Illustration
Page Animation
Breathing Giphy Logo
Responsive C3.js chart
Illustrated CSS Switch
Stop Using Corner Banners
X Mobile Menu
SVG Hearts
A Pen by Michael Lee
Rotating Button
Create amazing SEO content 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!