Pulse Animation - With Notifications
How do I make an pulse animation - with notifications?
What is a pulse animation - with notifications? How do you make a pulse animation - with notifications? This script and codes were developed by Alex Pate on 24 November 2022, Thursday.
Pulse Animation - With Notifications - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pulse Animation - With Notifications</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="rings"> <div class="ring__ringlet"></div> <div class="ring__ringlet"></div> <div class="ring__ringlet"></div>
</div>
<div class="notifications"> <div class="notifications__notification"></div> <div class="notifications__notification"></div> <div class="notifications__notification"></div>
</div>
</body>
</html>
Pulse Animation - With Notifications - Script Codes CSS Codes
html,
body { width: 100%; height: 100%; background-color: #2b303b; background: linear-gradient(to bottom, #2b303b, darken(#2b303b, 2%));
}
.rings { position: absolute; width: 800px; bottom: -75px; left: 50%; margin-left: -400px; .ring__ringlet { width: 400px; height: 400px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.12); border-radius: 50%; margin-left: 50%; left: -200px; position: absolute; bottom: -160px; transform: scale(0.1, 0.1); opacity: 0; animation: ring-1 3000ms ease-out infinite; &:nth-of-type(2) { animation-delay: 600ms; } &:nth-of-type(3) { animation-delay: 1200ms; } }
}
@keyframes ring-1 { 0% { transform: scale(0.1, 0.1); opacity: 0; } 50% { opacity: 1; } 100% { transform: scale(1.2, 1.2); opacity: 0; }
}
.notifications { position: absolute; width: 900px; bottom: 20px; left: 50%; margin-left: -450px; z-index: 99; &__notification { width: 320px; height: 50px; background: #fff; border-radius: 3px; position: absolute; animation: notification-animation 200ms ease-in-out; opacity: 0; &:nth-of-type(1) { opacity: 0.8; left: 40px; bottom: 90px; transition-delay: } &:nth-of-type(2) { opacity: 0.2; left: 200px; bottom: 10px; } &:nth-of-type(3) { opacity: 0.2; left: 380px; bottom: 70px; transform: scale(0.8); } }
}
@keyframes notification-animation { from { opacity: 0; } to { opacity: 1; }
}
Developer | Alex Pate |
Username | alexpate |
Uploaded | November 24, 2022 |
Rating | 3 |
Size | 2,617 Kb |
Views | 64,768 |
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 |
Stats Animation | 2,585 Kb |
Pulse Animation | 2,280 Kb |
Graph Preloader | 2,291 Kb |
Twinkle Animation | 5,487 Kb |
Random HEX Color Generator | 2,925 Kb |
Button Animation | 2,496 Kb |
Wobble Notification | 2,618 Kb |
Emoji CSS Selectors | 1,868 Kb |
SVG Progress Circle JS | 5,122 Kb |
Subtle Draw Nav Animation | 3,089 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 |
Text Blocks Over Image, Updated | KatieK2 | 3,122 Kb |
Mobile first social buttons with no iframe | Alistairtweedie | 3,158 Kb |
Get third wednesday | Wojtek1150 | 2,691 Kb |
SCSS Simple Animated Drop-In | Danwarfel | 2,175 Kb |
Animate elements with fixed gradient | Badabam | 4,406 Kb |
Vanilla modal window | Jasonhowmans | 3,554 Kb |
Flex Chart | James_zedd | 4,111 Kb |
Image Stack Test SCSS | CalvinMorett | 2,799 Kb |
Tic Tac Toe | Volv | 4,862 Kb |
Pure CSS read more toggle | Idered | 2,344 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!