A Pen by Robert Lowe
How do I make an a pen by robert lowe?
Inspired by this excellent pen: http://codepen.io/_massimo/pen/epbqqV. What is a a pen by robert lowe? How do you make a a pen by robert lowe? This script and codes were developed by Robert Lowe on 23 July 2022, Saturday.
A Pen by Robert Lowe - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Robert Lowe</title> <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div ng-app="angularPageApp" ng-controller="angularPageAppCtrl" class="app-container"> <box ng-repeat="item in list"></box>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-sanitize.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
A Pen by Robert Lowe - Script Codes CSS Codes
*, *::before, *::after { box-sizing: border-box;
}
body { font-family: 'Open Sans', sans-serif; margin: 0; padding: 0; font-size: 66.5%; background: #8e4ec9; background: -moz-linear-gradient(left, #8e4ec9 0%, #813fbf 67%, #7428b7 100%); background: -webkit-gradient(left top, right top, color-stop(0%, #8e4ec9), color-stop(67%, #813fbf), color-stop(100%, #7428b7)); background: -webkit-linear-gradient(left, #8e4ec9 0%, #813fbf 67%, #7428b7 100%); background: -o-linear-gradient(left, #8e4ec9 0%, #813fbf 67%, #7428b7 100%); background: -ms-linear-gradient(left, #8e4ec9 0%, #813fbf 67%, #7428b7 100%); background: linear-gradient(to right, #8e4ec9 0%, #813fbf 67%, #7428b7 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8e4ec9', endColorstr='#7428b7', GradientType=1 );
}
@-webkit-keyframes spin { 0% { -ms-transform: rotate(0); -webkit-transform: rotate(0); transform: rotate(0); border-color: #2D93AD; border-radius: 2em; } 50% { -ms-transform: rotate(-270deg); -webkit-transform: rotate(-270deg); transform: rotate(-270deg); border-color: #DBD56E; border-width: 1em; border-radius: 15em; } 100% { -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); border-color: #2D93AD; border-radius: 2em; }
}
@-moz-keyframes spin { 0% { -ms-transform: rotate(0); -webkit-transform: rotate(0); transform: rotate(0); border-color: #2D93AD; border-radius: 2em; } 50% { -ms-transform: rotate(-270deg); -webkit-transform: rotate(-270deg); transform: rotate(-270deg); border-color: #DBD56E; border-width: 1em; border-radius: 15em; } 100% { -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); border-color: #2D93AD; border-radius: 2em; }
}
@-o-keyframes spin { 0% { -ms-transform: rotate(0); -webkit-transform: rotate(0); transform: rotate(0); border-color: #2D93AD; border-radius: 2em; } 50% { -ms-transform: rotate(-270deg); -webkit-transform: rotate(-270deg); transform: rotate(-270deg); border-color: #DBD56E; border-width: 1em; border-radius: 15em; } 100% { -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); border-color: #2D93AD; border-radius: 2em; }
}
@keyframes spin { 0% { -ms-transform: rotate(0); -webkit-transform: rotate(0); transform: rotate(0); border-color: #2D93AD; border-radius: 2em; } 50% { -ms-transform: rotate(-270deg); -webkit-transform: rotate(-270deg); transform: rotate(-270deg); border-color: #DBD56E; border-width: 1em; border-radius: 15em; } 100% { -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); border-color: #2D93AD; border-radius: 2em; }
}
.app-container { position: relative; display: flex; flex-flow: row wrap; justify-content: center; align-items: center; height: 95vh; overflow: hidden;
}
.box { font-size: 0.5em; position: absolute; border: 0.1em solid #2D93AD; border-radius: 2em;
}
.box:nth-child(1) { width: 1.2em; height: 1.2em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 0.1s; animation-delay: 0.1s;
}
.box:nth-child(2) { width: 2.4em; height: 2.4em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 0.2s; animation-delay: 0.2s;
}
.box:nth-child(3) { width: 3.6em; height: 3.6em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 0.3s; animation-delay: 0.3s;
}
.box:nth-child(4) { width: 4.8em; height: 4.8em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 0.4s; animation-delay: 0.4s;
}
.box:nth-child(5) { width: 6em; height: 6em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 0.5s; animation-delay: 0.5s;
}
.box:nth-child(6) { width: 7.2em; height: 7.2em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 0.6s; animation-delay: 0.6s;
}
.box:nth-child(7) { width: 8.4em; height: 8.4em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 0.7s; animation-delay: 0.7s;
}
.box:nth-child(8) { width: 9.6em; height: 9.6em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 0.8s; animation-delay: 0.8s;
}
.box:nth-child(9) { width: 10.8em; height: 10.8em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 0.9s; animation-delay: 0.9s;
}
.box:nth-child(10) { width: 12em; height: 12em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 1s; animation-delay: 1s;
}
.box:nth-child(11) { width: 13.2em; height: 13.2em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 1.1s; animation-delay: 1.1s;
}
.box:nth-child(12) { width: 14.4em; height: 14.4em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 1.2s; animation-delay: 1.2s;
}
.box:nth-child(13) { width: 15.6em; height: 15.6em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 1.3s; animation-delay: 1.3s;
}
.box:nth-child(14) { width: 16.8em; height: 16.8em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 1.4s; animation-delay: 1.4s;
}
.box:nth-child(15) { width: 18em; height: 18em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 1.5s; animation-delay: 1.5s;
}
.box:nth-child(16) { width: 19.2em; height: 19.2em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 1.6s; animation-delay: 1.6s;
}
.box:nth-child(17) { width: 20.4em; height: 20.4em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 1.7s; animation-delay: 1.7s;
}
.box:nth-child(18) { width: 21.6em; height: 21.6em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 1.8s; animation-delay: 1.8s;
}
.box:nth-child(19) { width: 22.8em; height: 22.8em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 1.9s; animation-delay: 1.9s;
}
.box:nth-child(20) { width: 24em; height: 24em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 2s; animation-delay: 2s;
}
.box:nth-child(21) { width: 25.2em; height: 25.2em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 2.1s; animation-delay: 2.1s;
}
.box:nth-child(22) { width: 26.4em; height: 26.4em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 2.2s; animation-delay: 2.2s;
}
.box:nth-child(23) { width: 27.6em; height: 27.6em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 2.3s; animation-delay: 2.3s;
}
.box:nth-child(24) { width: 28.8em; height: 28.8em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 2.4s; animation-delay: 2.4s;
}
.box:nth-child(25) { width: 30em; height: 30em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 2.5s; animation-delay: 2.5s;
}
.box:nth-child(26) { width: 31.2em; height: 31.2em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 2.6s; animation-delay: 2.6s;
}
.box:nth-child(27) { width: 32.4em; height: 32.4em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 2.7s; animation-delay: 2.7s;
}
.box:nth-child(28) { width: 33.6em; height: 33.6em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 2.8s; animation-delay: 2.8s;
}
.box:nth-child(29) { width: 34.8em; height: 34.8em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 2.9s; animation-delay: 2.9s;
}
.box:nth-child(30) { width: 36em; height: 36em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 3s; animation-delay: 3s;
}
.box:nth-child(31) { width: 37.2em; height: 37.2em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 3.1s; animation-delay: 3.1s;
}
.box:nth-child(32) { width: 38.4em; height: 38.4em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 3.2s; animation-delay: 3.2s;
}
.box:nth-child(33) { width: 39.6em; height: 39.6em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 3.3s; animation-delay: 3.3s;
}
.box:nth-child(34) { width: 40.8em; height: 40.8em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 3.4s; animation-delay: 3.4s;
}
.box:nth-child(35) { width: 42em; height: 42em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 3.5s; animation-delay: 3.5s;
}
.box:nth-child(36) { width: 43.2em; height: 43.2em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 3.6s; animation-delay: 3.6s;
}
.box:nth-child(37) { width: 44.4em; height: 44.4em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 3.7s; animation-delay: 3.7s;
}
.box:nth-child(38) { width: 45.6em; height: 45.6em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 3.8s; animation-delay: 3.8s;
}
.box:nth-child(39) { width: 46.8em; height: 46.8em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 3.9s; animation-delay: 3.9s;
}
.box:nth-child(40) { width: 48em; height: 48em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 4s; animation-delay: 4s;
}
.box:nth-child(41) { width: 49.2em; height: 49.2em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 4.1s; animation-delay: 4.1s;
}
.box:nth-child(42) { width: 50.4em; height: 50.4em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 4.2s; animation-delay: 4.2s;
}
.box:nth-child(43) { width: 51.6em; height: 51.6em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 4.3s; animation-delay: 4.3s;
}
.box:nth-child(44) { width: 52.8em; height: 52.8em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 4.4s; animation-delay: 4.4s;
}
.box:nth-child(45) { width: 54em; height: 54em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 4.5s; animation-delay: 4.5s;
}
.box:nth-child(46) { width: 55.2em; height: 55.2em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 4.6s; animation-delay: 4.6s;
}
.box:nth-child(47) { width: 56.4em; height: 56.4em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 4.7s; animation-delay: 4.7s;
}
.box:nth-child(48) { width: 57.6em; height: 57.6em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 4.8s; animation-delay: 4.8s;
}
.box:nth-child(49) { width: 58.8em; height: 58.8em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 4.9s; animation-delay: 4.9s;
}
.box:nth-child(50) { width: 60em; height: 60em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 5s; animation-delay: 5s;
}
A Pen by Robert Lowe - Script Codes JS Codes
(function() { angular.module('angularPageApp', ['ngSanitize']) .controller('angularPageAppCtrl', function($scope) { $scope.list = []; for(var i = 0; i < 50; i++) { $scope.list.push({}); } }) .directive('box', function() { return { restrict: 'E', replace: true, controller: function($scope) {}, template: '<div class="box"></div>' }; });
}());
Developer | Robert Lowe |
Username | rlo206 |
Uploaded | July 23, 2022 |
Rating | 3.5 |
Size | 4,312 Kb |
Views | 40,480 |
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 |
Animated slider in pure angular | 5,111 Kb |
Windows 10 toggle button directive | 4,256 Kb |
Interactive data table with Angular and SCSS | 9,618 Kb |
Semantic Element Document Outline | 3,153 Kb |
Draggables in pure angular | 5,167 Kb |
Customizable ripples with angular | 4,825 Kb |
Google Mic Icon | 3,388 Kb |
Learning to style range inputs | 4,175 Kb |
Testing Semantic UI Grid | 2,832 Kb |
Editable Table Concept | 7,026 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 |
Gradients | Karpovsystems | 2,394 Kb |
Mandelbrot Fractal | _Billy_Brown | 2,706 Kb |
Blog demo to use given styling | Andygirl | 2,412 Kb |
A Pen by Matt Popovich | Mpopv | 3,349 Kb |
Clock Face Idea | Chrisburnell | 3,196 Kb |
VerbalExpressions Converter | Cmalven | 2,607 Kb |
Materializecss input form | Jasonchan | 1,443 Kb |
TweenMax transformOrigin Bubble | Nicolund | 2,209 Kb |
CSS3 Snow Animation | NickyCDK | 1,695 Kb |
Acorrdian 2016 | Milanodituti | 3,720 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!