Nested rotating shapes
How do I make an nested rotating shapes?
Makes a pretty cool effect. What is a nested rotating shapes? How do you make a nested rotating shapes? This script and codes were developed by Chris Hanson on 01 October 2022, Saturday.
Nested rotating shapes - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Nested rotating shapes</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.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: #1abc9c; overflow: hidden;
}
.container { width: 400px; height: 400px; top: 50%; left: 50%; margin: -200px; position: absolute;
}
.box { width: 95%; height: 95%; background: #1abc9c; position: absolute; left: 50%; top: 50%; margin: -47.5%; border-radius: 20%;
}
.alt { background: #bc1a3a; animation: rot 15s linear infinite;
}
@keyframes rot { to { transform: rotate(-360deg); }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class='container'> <div class="box"> <div class="box alt"> <div class="box"> <div class="box alt"> <div class="box"> <div class="box alt"> <div class="box"> <div class="box alt"> <div class="box"> <div class="box alt"> <div class="box"> <div class="box alt"> <div class="box"> <div class="box alt"> <div class="box"> <div class="box alt"> <div class="box"> <div class="box alt"> <div class="box"> <div class="box alt"> <div class="box"> <div class="box alt"> <div class="box"> <div class="box alt"> <div class="box"> <div class="box alt"> <div class="box"> <div class="box alt"> <div class="box"> <div class="box alt"> <div class="box"> <div class="box alt"> <div class="box"> <div class="box alt"> <div class="box"> <div class="box alt"> <div class="box"> <div class="box alt"> <div class="box"> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Nested rotating shapes - Script Codes CSS Codes
body { background: #1abc9c; overflow: hidden;
}
.container { width: 400px; height: 400px; top: 50%; left: 50%; margin: -200px; position: absolute;
}
.box { width: 95%; height: 95%; background: #1abc9c; position: absolute; left: 50%; top: 50%; margin: -47.5%; border-radius: 20%;
}
.alt { background: #bc1a3a; animation: rot 15s linear infinite;
}
@keyframes rot { to { transform: rotate(-360deg); }
}
Developer | Chris Hanson |
Username | chrishanson |
Uploaded | October 01, 2022 |
Rating | 4 |
Size | 2,646 Kb |
Views | 12,144 |
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 |
Uiselect ie8 issues | 15,255 Kb |
Css spinner | 2,953 Kb |
A Pen by Chris Hanson | 9,469 Kb |
Rotating 3d cube | 2,957 Kb |
Ui-select with tree navigation | 5,321 Kb |
Search bar | 5,899 Kb |
Alternating rotating shaps | 4,980 Kb |
Lf layout | 6,820 Kb |
Particle Emitter | 3,105 Kb |
Custom branding | 9,737 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 |
Classy Blockquote Styling | Andrewwright | 3,212 Kb |
CSS Infinite 360 | APinix | 5,564 Kb |
JS Countdown Timer | Ayoungh | 2,435 Kb |
Hello People | Danburrows | 2,365 Kb |
Scroll effect with text with help from Skrollr | Luxonglassing | 2,935 Kb |
Exploring css spinners | Akagr | 3,569 Kb |
Scifi-style Radio-based Tab | Aaronchuo | 4,427 Kb |
Kut D3 | Jellevrswk | 3,687 Kb |
Project Euler Problem 17 | Bfillmer | 2,739 Kb |
A simple log in form made with css | Mayurelbhar | 2,160 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!