A Pen by Patrick Cox

Developer
Patrick Cox
Size
3,176 Kb
Views
48,576
  1. A Pen by Patrick Cox Previews
  2. A Pen by Patrick Cox HTML Codes
  3. A Pen by Patrick Cox CSS Codes

How do I make an a pen by patrick cox?

From the tutorial by @HugoGiraudel on CODROPS - http://tympanus.net/codrops/2012/11/14/creative-css-loading-animations/ demo 3, amde a few little tweaks. What is a a pen by patrick cox? How do you make a a pen by patrick cox? This script and codes were developed by Patrick Cox on 04 September 2022, Sunday.

A Pen by Patrick Cox Previews
IQ Test

A Pen by Patrick Cox - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Patrick Cox</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! */ *, *:before, *:after{box-sizing: border-box}
body{ background: url(http://goo.gl/usKCT) no-repeat center center fixed; background-size: cover;
}
#container{ margin-top: 14%;
}
@keyframes rota{ to {transform: rotate(360deg);}
}
@keyframes opa{ 12.0% { opacity: 0.80; } 19.5% { opacity: 0.88; } 37.2% { opacity: 0.64; } 40.5% { opacity: 0.52; } 52.7% { opacity: 0.69; } 60.2% { opacity: 0.60; } 66.6% { opacity: 0.52; } 70.0% { opacity: 0.63; } 79.9% { opacity: 0.60; } 84.2% { opacity: 0.75; } 91.0% { opacity: 0.87; }
}
.spinner{ font-size: 100px; width: 1em; height: 1em; margin: 100px auto; position: relative; list-style: none; border-radius: 50%; border: .01em solid rgba(150, 150, 150,0.15); background: rgba(150, 150, 150, 0.1); box-shadow: 0 0 1.5em rgba(0,0,0,0.4);
}
.spinner:before{ content: "\0020"; position: absolute; width: .65em; height: .65em; border: .01em solid rgba(150, 150, 150, 0.15); border-radius: 50%; top: 17%; left: 17%; background: rgba(150, 150, 150, 0.1);
}
.spinner:after{ content: "\0020"; position: absolute; width: .25em; height: .25em; border: .01em solid rgba(150, 150, 150, 0.15); border-radius: 50%; top: 38%; left: 38%; background: rgba(150, 150, 150, 0.1);
}
.spinner li{ width: .2em; height: .2em; position: absolute; border-radius: 50%;
}
/* blue */
.spinner li:nth-child(1){ background: #0076c1; top: 0; left: 50%; margin-left: -.1em; transform-origin: 50% 250%; animation: rota 1.13s linear infinite, opa 3.67s ease-in-out infinite alternate;
}
/* red */
.spinner li:nth-child(2){ background: #ff003c; top: 60%; right: 20%; margin-top: -.1em; transform-origin: -50% 0; animation: rota 1.86s linear infinite, opa 4.29s ease-in-out infinite alternate;
}
/* yellow */
.spinner li:nth-child(3){ background: #fabe28; bottom: 0; left: 50%; margin-left: -.1em; transform-origin: 50% -150%; animation: rota 1.45s linear infinite, opa 5.12s ease-in-out infinite alternate;
}
/* green */
.spinner li:nth-child(4){ background: #88c100; top: 60%; left: 20%; margin-top: -.1em; transform-origin: 150% 0%; animation: rota 1.72s linear infinite, opa 5.25s ease-in-out infinite alternate;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <!-- I'm learning CSS animations -->
<!-- from the tutorial by HUGO GIRAUDEL on CODROPS - http://tympanus.net/codrops/2012/11/14/creative-css-loading-animations/ demo 3, amde a few little tweaks-->
<div id="container"> <ul class="spinner"> <li></li> <li></li> <li></li> <li></li> </ul>
</div>
</body>
</html>

A Pen by Patrick Cox - Script Codes CSS Codes

*, *:before, *:after{box-sizing: border-box}
body{ background: url(http://goo.gl/usKCT) no-repeat center center fixed; background-size: cover;
}
#container{ margin-top: 14%;
}
@keyframes rota{ to {transform: rotate(360deg);}
}
@keyframes opa{ 12.0% { opacity: 0.80; } 19.5% { opacity: 0.88; } 37.2% { opacity: 0.64; } 40.5% { opacity: 0.52; } 52.7% { opacity: 0.69; } 60.2% { opacity: 0.60; } 66.6% { opacity: 0.52; } 70.0% { opacity: 0.63; } 79.9% { opacity: 0.60; } 84.2% { opacity: 0.75; } 91.0% { opacity: 0.87; }
}
.spinner{ font-size: 100px; width: 1em; height: 1em; margin: 100px auto; position: relative; list-style: none; border-radius: 50%; border: .01em solid rgba(150, 150, 150,0.15); background: rgba(150, 150, 150, 0.1); box-shadow: 0 0 1.5em rgba(0,0,0,0.4);
}
.spinner:before{ content: "\0020"; position: absolute; width: .65em; height: .65em; border: .01em solid rgba(150, 150, 150, 0.15); border-radius: 50%; top: 17%; left: 17%; background: rgba(150, 150, 150, 0.1);
}
.spinner:after{ content: "\0020"; position: absolute; width: .25em; height: .25em; border: .01em solid rgba(150, 150, 150, 0.15); border-radius: 50%; top: 38%; left: 38%; background: rgba(150, 150, 150, 0.1);
}
.spinner li{ width: .2em; height: .2em; position: absolute; border-radius: 50%;
}
/* blue */
.spinner li:nth-child(1){ background: #0076c1; top: 0; left: 50%; margin-left: -.1em; transform-origin: 50% 250%; animation: rota 1.13s linear infinite, opa 3.67s ease-in-out infinite alternate;
}
/* red */
.spinner li:nth-child(2){ background: #ff003c; top: 60%; right: 20%; margin-top: -.1em; transform-origin: -50% 0; animation: rota 1.86s linear infinite, opa 4.29s ease-in-out infinite alternate;
}
/* yellow */
.spinner li:nth-child(3){ background: #fabe28; bottom: 0; left: 50%; margin-left: -.1em; transform-origin: 50% -150%; animation: rota 1.45s linear infinite, opa 5.12s ease-in-out infinite alternate;
}
/* green */
.spinner li:nth-child(4){ background: #88c100; top: 60%; left: 20%; margin-top: -.1em; transform-origin: 150% 0%; animation: rota 1.72s linear infinite, opa 5.25s ease-in-out infinite alternate;
}
A Pen by Patrick Cox - Script Codes
A Pen by Patrick Cox - Script Codes
Home Page Home
Developer Patrick Cox
Username pcridesagain
Uploaded September 04, 2022
Rating 3.5
Size 3,176 Kb
Views 48,576
Do you need developer help for A Pen by Patrick Cox?

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!

Patrick Cox (pcridesagain) Script Codes
Name
A Pen by Patrick Cox
Vans Logo, single element, no fonts, no psuedos
Single Element Pure CSS US Flag
Responsive Content Experiment
IOS web app bookmark reminder bubble
A Better Moustache
CSS Q-Bert
Sexy Version - iOS web app bookmark reminder bubble
Create amazing love letters 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!