Ripple
How do I make an ripple?
What is a ripple? How do you make a ripple? This script and codes were developed by Nick Nikolov on 17 October 2022, Monday.
Ripple - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Ripple</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ .ripple { position: relative;
}
.ripple div { height: 150px; width: 150px; border-radius: 150px; background: #2196F3; position: absolute; border: 1px solid #0960a5; top: 0; left: 0; animation-name: animate; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; transform: scale(0);
}
.ripple div:nth-child(2) { animation-delay: 1s;
}
.ripple div:nth-child(3) { animation-delay: 2s;
}
@keyframes animate { from { transform: scale(0); } to { opacity: 0; transform: scale(1); }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="ripple"> <div></div> <div></div> <div></div>
</div>
</body>
</html>
Ripple - Script Codes CSS Codes
.ripple { position: relative;
}
.ripple div { height: 150px; width: 150px; border-radius: 150px; background: #2196F3; position: absolute; border: 1px solid #0960a5; top: 0; left: 0; animation-name: animate; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; transform: scale(0);
}
.ripple div:nth-child(2) { animation-delay: 1s;
}
.ripple div:nth-child(3) { animation-delay: 2s;
}
@keyframes animate { from { transform: scale(0); } to { opacity: 0; transform: scale(1); }
}
Developer | Nick Nikolov |
Username | necks |
Uploaded | October 17, 2022 |
Rating | 3 |
Size | 2,373 Kb |
Views | 46,552 |
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 |
Progress bars with colour change. | 3,845 Kb |
CSS Animated Weather icons | 5,145 Kb |
A Pen by Nick Nikolov | 1,732 Kb |
Gallery with blur slide up info on hover | 2,172 Kb |
Range bar with indicator | 3,312 Kb |
Single element speech bubble | 3,191 Kb |
Checkbox | 2,493 Kb |
Heart Rating | 3,349 Kb |
Simple fluid navigation with 4 hover effects | 3,336 Kb |
60fps animated SVG waves hero | 3,268 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 |
Material Design-Layout-Principles Practice | Fraina | 2,331 Kb |
Popover Example | Seanboom | 2,429 Kb |
A Pen by Kenny Mark | Kennymark | 5,574 Kb |
Animating characters with jQuery | 042 | 2,776 Kb |
A Pen by lizz | Lizz | 10,068 Kb |
AngularJS Skills | Supro | 3,312 Kb |
Simple Accordion | Wearebold | 3,683 Kb |
Hc first draft | Stepfray | 5,104 Kb |
A Bouncy Menu Toggle | Billyysea | 4,563 Kb |
Classy Blockquote Styling | Andrewwright | 3,212 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!