Dots - Pretty animation
How do I make an dots - pretty animation?
What is a dots - pretty animation? How do you make a dots - pretty animation? This script and codes were developed by Matt Cowley on 02 July 2022, Saturday.
Dots - Pretty animation Previews
Dots - Pretty animation - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Dots - Pretty animation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='dots'> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div>
</div>
</body>
</html>
Dots - Pretty animation - Script Codes CSS Codes
html,
body { height: 100%; margin: 0; background: #30283f;
}
.dots { font-size: 0; width: 250px; height: 250px; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
.dot { display: inline-block; width: 5px; height: 5px; background: #fff; margin: 22.5px;
}
.dot:nth-child(1) { background: #dd1155; -webkit-animation: scale 0.4s infinite ease alternate; animation: scale 0.4s infinite ease alternate; -webkit-animation-delay: -0.13333s; animation-delay: -0.13333s;
}
.dot:nth-child(2) { background: #ffee00; -webkit-animation: scale 0.4s infinite ease alternate; animation: scale 0.4s infinite ease alternate; -webkit-animation-delay: -0.26667s; animation-delay: -0.26667s;
}
.dot:nth-child(3) { background: #f90196; -webkit-animation: scale 0.4s infinite ease alternate; animation: scale 0.4s infinite ease alternate; -webkit-animation-delay: -0.4s; animation-delay: -0.4s;
}
.dot:nth-child(4) { background: #00ffff; -webkit-animation: scale 0.4s infinite ease alternate; animation: scale 0.4s infinite ease alternate; -webkit-animation-delay: -0.53333s; animation-delay: -0.53333s;
}
.dot:nth-child(5) { background: #dd1155; -webkit-animation: scale 0.4s infinite ease alternate; animation: scale 0.4s infinite ease alternate; -webkit-animation-delay: -0.66667s; animation-delay: -0.66667s;
}
.dot:nth-child(6) { background: #00ffff; -webkit-animation: scale 0.4s infinite ease alternate; animation: scale 0.4s infinite ease alternate; -webkit-animation-delay: -0.26667s; animation-delay: -0.26667s;
}
.dot:nth-child(7) { background: #dd1155; -webkit-animation: scale 0.4s infinite ease alternate; animation: scale 0.4s infinite ease alternate; -webkit-animation-delay: -0.4s; animation-delay: -0.4s;
}
.dot:nth-child(8) { background: #ffee00; -webkit-animation: scale 0.4s infinite ease alternate; animation: scale 0.4s infinite ease alternate; -webkit-animation-delay: -0.53333s; animation-delay: -0.53333s;
}
.dot:nth-child(9) { background: #f90196; -webkit-animation: scale 0.4s infinite ease alternate; animation: scale 0.4s infinite ease alternate; -webkit-animation-delay: -0.66667s; animation-delay: -0.66667s;
}
.dot:nth-child(10) { background: #00ffff; -webkit-animation: scale 0.4s infinite ease alternate; animation: scale 0.4s infinite ease alternate; -webkit-animation-delay: -0.8s; animation-delay: -0.8s;
}
.dot:nth-child(11) { background: #f90196; -webkit-animation: scale 0.4s infinite ease alternate; animation: scale 0.4s infinite ease alternate; -webkit-animation-delay: -0.4s; animation-delay: -0.4s;
}
.dot:nth-child(12) { background: #00ffff; -webkit-animation: scale 0.4s infinite ease alternate; animation: scale 0.4s infinite ease alternate; -webkit-animation-delay: -0.53333s; animation-delay: -0.53333s;
}
.dot:nth-child(13) { background: #dd1155; -webkit-animation: scale 0.4s infinite ease alternate; animation: scale 0.4s infinite ease alternate; -webkit-animation-delay: -0.66667s; animation-delay: -0.66667s;
}
.dot:nth-child(14) { background: #ffee00; -webkit-animation: scale 0.4s infinite ease alternate; animation: scale 0.4s infinite ease alternate; -webkit-animation-delay: -0.8s; animation-delay: -0.8s;
}
.dot:nth-child(15) { background: #f90196; -webkit-animation: scale 0.4s infinite ease alternate; animation: scale 0.4s infinite ease alternate; -webkit-animation-delay: -0.93333s; animation-delay: -0.93333s;
}
.dot:nth-child(16) { background: #ffee00; -webkit-animation: scale 0.4s infinite ease alternate; animation: scale 0.4s infinite ease alternate; -webkit-animation-delay: -0.53333s; animation-delay: -0.53333s;
}
.dot:nth-child(17) { background: #f90196; -webkit-animation: scale 0.4s infinite ease alternate; animation: scale 0.4s infinite ease alternate; -webkit-animation-delay: -0.66667s; animation-delay: -0.66667s;
}
.dot:nth-child(18) { background: #00ffff; -webkit-animation: scale 0.4s infinite ease alternate; animation: scale 0.4s infinite ease alternate; -webkit-animation-delay: -0.8s; animation-delay: -0.8s;
}
.dot:nth-child(19) { background: #dd1155; -webkit-animation: scale 0.4s infinite ease alternate; animation: scale 0.4s infinite ease alternate; -webkit-animation-delay: -0.93333s; animation-delay: -0.93333s;
}
.dot:nth-child(20) { background: #ffee00; -webkit-animation: scale 0.4s infinite ease alternate; animation: scale 0.4s infinite ease alternate; -webkit-animation-delay: -1.06667s; animation-delay: -1.06667s;
}
.dot:nth-child(21) { background: #dd1155; -webkit-animation: scale 0.4s infinite ease alternate; animation: scale 0.4s infinite ease alternate; -webkit-animation-delay: -0.66667s; animation-delay: -0.66667s;
}
.dot:nth-child(22) { background: #ffee00; -webkit-animation: scale 0.4s infinite ease alternate; animation: scale 0.4s infinite ease alternate; -webkit-animation-delay: -0.8s; animation-delay: -0.8s;
}
.dot:nth-child(23) { background: #f90196; -webkit-animation: scale 0.4s infinite ease alternate; animation: scale 0.4s infinite ease alternate; -webkit-animation-delay: -0.93333s; animation-delay: -0.93333s;
}
.dot:nth-child(24) { background: #00ffff; -webkit-animation: scale 0.4s infinite ease alternate; animation: scale 0.4s infinite ease alternate; -webkit-animation-delay: -1.06667s; animation-delay: -1.06667s;
}
.dot:nth-child(25) { background: #dd1155; -webkit-animation: scale 0.4s infinite ease alternate; animation: scale 0.4s infinite ease alternate; -webkit-animation-delay: -1.2s; animation-delay: -1.2s;
}
@-webkit-keyframes scale { 0% { -webkit-transform: scale(1); transform: scale(1); } 20% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(12); transform: scale(12); }
}
@keyframes scale { 0% { -webkit-transform: scale(1); transform: scale(1); } 20% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(12); transform: scale(12); }
}
| Developer | Matt Cowley |
| Username | MattCowley |
| Uploaded | July 02, 2022 |
| Rating | 3 |
| Size | 1,898 Kb |
| Views | 119,416 |
Do you need developer help for Dots - Pretty animation?
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!
Matt Cowley (MattCowley) Script Codes
| Name | Size |
| Flash Player Install Update | 4,519 Kb |
| Image Site - Error | 2,098 Kb |
| Matt Cowley - Console Site | 5,694 Kb |
| The Modern Developer | 2,390 Kb |
| Sign | 1,718 Kb |
| UD System - Domain Not Found | 17,635 Kb |
| A New Blink - Coming Soon | 2,324 Kb |
| Matilda the Musical Landing Page | 4,691 Kb |
| Sinclair Research Computers | 3,068 Kb |
| Simple Landing Page | 1,792 Kb |
Create amazing web 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!
Similar Scripts & Codes
| Name | Username | Size |
| SVG Transform vs CSS Transform | AmeliaBR | 4,175 Kb |
| Preloader | Rikki_Sixx | 2,815 Kb |
| Login-ng-modal | Heedoo | 3,566 Kb |
| A Different Type of Gallery | DonPage | 2,950 Kb |
| TweenMax transformOrigin Bubble | Nicolund | 2,209 Kb |
| Testimonial Fancy tabs responsive | Amit-webdesigner | 3,056 Kb |
| Mondrian | Chrisarmstrong | 2,787 Kb |
| Expert Help | SinceSidSlid | 4,064 Kb |
| JS Countdown Timer | Ayoungh | 2,435 Kb |
| Custom Select Element | Agrayson | 3,616 Kb |
Do you want hide your ip address?
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!