Ripples
How do I make an ripples?
What is a ripples? How do you make a ripples? This script and codes were developed by Jermaine on 26 August 2022, Friday.
Ripples - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Ripples</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="ripples"></div>
</body>
</html>
Ripples - Script Codes CSS Codes
@keyframes emit { 0% { transform: scale(0.75) translateX(-50%) translateY(-50%); transform-origin: left top; } 100% { transform: scale(2) translateX(-50%) translateY(-50%); transform-origin: left top; }
}
@keyframes fade { 0%, 100% { opacity: 0; } 10% { opacity: 1; }
}
.wrapper { position: relative; height: 100vh;
}
.ripples { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); width: 400px; height: 400px; border-radius: 50%; background-image: url("http://s3.postimg.org/5u3jg6w77/ripples.png"); background-repeat: no-repeat; background-position: top center; background-size: cover; animation: emit 10s cubic-bezier(0.215, 0.61, 0.355, 1) 2s infinite, fade 10s ease-out 2s infinite; animation-fill-mode: backwards; transform-origin: 50%;
}
Developer | Jermaine |
Username | dviate |
Uploaded | August 26, 2022 |
Rating | 3 |
Size | 2,225 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 |
Console fun | 1,500 Kb |
Filter testje | 3,307 Kb |
Dingetje 1 | 2,890 Kb |
Test | 2,668 Kb |
Sticky header and footer | 3,347 Kb |
Testje voor KPN | 1,976 Kb |
Accordion demootje | 14,607 Kb |
Blur demo | 1,925 Kb |
Dingetje 2 | 3,087 Kb |
A Pen by Jermaine | 3,249 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 |
Elephants Full screen site | Orrinward | 3,981 Kb |
CSS3 keyframe onload animation. | Samueljseay | 1,706 Kb |
Direction-icon | Alexandremasy | 3,323 Kb |
CSS3 iPad | Vikvarg | 1,766 Kb |
Emberjs Bootstrap Modal Carousel | Somethingkindawierd | 4,233 Kb |
Buttons for autumn | Nikazawila | 1,795 Kb |
Isometric css island | Xaddict | 2,950 Kb |
Pure CSS Animated Photo Stack | Depthdev | 2,486 Kb |
A Pen by Malith Hettiarachchi | MalZiiirA | 5,531 Kb |
Formations | Cantelope | 5,731 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!