Simple CSS3 particles animation
How do I make an simple css3 particles animation?
Nothing fancy, easy code.. What is a simple css3 particles animation? How do you make a simple css3 particles animation? This script and codes were developed by ZeroSpree on 13 July 2022, Wednesday.
Simple CSS3 particles animation - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple CSS3 particles animation</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <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! */ body{background:#C55}
.ct{position:absolute;left:50%;margin-left:-280px;width:600px;height:290px;margin-top:100px}
.bullet{width:20px;display:inline-block;animation:counterClockWise 1400ms infinite linear;}
.bullet::before{content:'';width:4px;height:4px;border-radius:4px; display:block;position:relative;background:#fff; animation:clockWise 1400ms infinite linear; box-shadow: 20px 20px 0 #fff, 40px 40px 0 #fff, 60px 60px 0 #fff, 80px 80px 0 #fff, 100px 100px 0 #fff, 120px 120px 0 #fff, 140px 140px 0 #fff, 160px 160px 0 #fff, 180px 180px 0 #fff, 200px 200px 0 #fff, 220px 220px 0 #fff, 240px 240px 0 #fff, 260px 260px 0 #fff}
.bullet:nth-child(7n-6),
.bullet:nth-child(7n-6)::before{animation-delay:-200ms}
.bullet:nth-child(7n-5),
.bullet:nth-child(7n-5)::before{animation-delay:-400ms}
.bullet:nth-child(7n-4),
.bullet:nth-child(7n-4)::before{animation-delay:-600ms}
.bullet:nth-child(7n-3),
.bullet:nth-child(7n-3)::before{animation-delay:-800ms}
.bullet:nth-child(7n-2),
.bullet:nth-child(7n-2)::before{animation-delay:-1000ms}
.bullet:nth-child(7n-1),
.bullet:nth-child(7n-1)::before{animation-delay:-1200ms}
@keyframes clockWise{ 100%{transform:rotate(360deg)} }
@keyframes counterClockWise{ 100%{transform:rotate(-360deg)} }
.ct:hover .bullet,
.ct:hover .bullet::before{animation-play-state:paused} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class='ct'> <div class='bullet'></div> <div class='bullet'></div> <div class='bullet'></div> <div class='bullet'></div> <div class='bullet'></div> <div class='bullet'></div> <div class='bullet'></div> <div class='bullet'></div> <div class='bullet'></div> <div class='bullet'></div> <div class='bullet'></div> <div class='bullet'></div> <div class='bullet'></div> <div class='bullet'></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>
Simple CSS3 particles animation - Script Codes CSS Codes
body{background:#C55}
.ct{position:absolute;left:50%;margin-left:-280px;width:600px;height:290px;margin-top:100px}
.bullet{width:20px;display:inline-block;animation:counterClockWise 1400ms infinite linear;}
.bullet::before{content:'';width:4px;height:4px;border-radius:4px; display:block;position:relative;background:#fff; animation:clockWise 1400ms infinite linear; box-shadow: 20px 20px 0 #fff, 40px 40px 0 #fff, 60px 60px 0 #fff, 80px 80px 0 #fff, 100px 100px 0 #fff, 120px 120px 0 #fff, 140px 140px 0 #fff, 160px 160px 0 #fff, 180px 180px 0 #fff, 200px 200px 0 #fff, 220px 220px 0 #fff, 240px 240px 0 #fff, 260px 260px 0 #fff}
.bullet:nth-child(7n-6),
.bullet:nth-child(7n-6)::before{animation-delay:-200ms}
.bullet:nth-child(7n-5),
.bullet:nth-child(7n-5)::before{animation-delay:-400ms}
.bullet:nth-child(7n-4),
.bullet:nth-child(7n-4)::before{animation-delay:-600ms}
.bullet:nth-child(7n-3),
.bullet:nth-child(7n-3)::before{animation-delay:-800ms}
.bullet:nth-child(7n-2),
.bullet:nth-child(7n-2)::before{animation-delay:-1000ms}
.bullet:nth-child(7n-1),
.bullet:nth-child(7n-1)::before{animation-delay:-1200ms}
@keyframes clockWise{ 100%{transform:rotate(360deg)} }
@keyframes counterClockWise{ 100%{transform:rotate(-360deg)} }
.ct:hover .bullet,
.ct:hover .bullet::before{animation-play-state:paused}
Simple CSS3 particles animation - Script Codes JS Codes
/* Thanks Jeff (http://codepen.io/DeptofJeffAyer/) for the Dribbble invite! Easy CSS3 particles animation. Simple code, nothing fancy. No JS either. Hover to pause the animation.
*/
Developer | ZeroSpree |
Username | zerospree |
Uploaded | July 13, 2022 |
Rating | 3.5 |
Size | 2,810 Kb |
Views | 212,520 |
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 |
Steve Jobs | 4,968 Kb |
Waving Santa | 4,614 Kb |
Hexagon exercise. | 2,615 Kb |
SCSS Bowser from box-shadows | 17,079 Kb |
Mr. C | 20,483 Kb |
TinyCop CSS Pixel Art | 3,901 Kb |
Rodeo S03, Round 1 - Chili Recipe | 5,919 Kb |
Red - Supergiant Games | 4,518 Kb |
Just another Button | 2,413 Kb |
CSS3 Shadows Darth Vader | 4,472 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 |
Simple blog concept | Drew_mc | 2,666 Kb |
Scroll using CSS | Casperovic | 2,159 Kb |
Nice textured background | Hans | 2,659 Kb |
Custom Select Element | Agrayson | 3,616 Kb |
C.Rowe Button | Brownerd | 2,473 Kb |
Nested table email layout | Massimo-cassandro | 2,355 Kb |
Cut and Paste Roll Link | BottomlineInteractive | 2,546 Kb |
Ball physics | Blackkbot | 3,874 Kb |
A Pen by Malith Hettiarachchi | MalZiiirA | 5,531 Kb |
CSS eye follow | Pedrocampos | 2,592 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!