A Pen by Paul Sullivan
How do I make an a pen by paul sullivan?
Refined the SASS down to be more manageable. (Not that I plan to do any managing on this in the future...) . What is a a pen by paul sullivan? How do you make a a pen by paul sullivan? This script and codes were developed by Paul Sullivan on 26 January 2023, Thursday.
A Pen by Paul Sullivan - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Paul Sullivan</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
A Pen by Paul Sullivan - Script Codes CSS Codes
html { background-color: #2e2e2e;
}
@-webkit-keyframes openUp2 { 50% { height: 100px; top: 45%; border: 2px solid #369; }
}
@-webkit-keyframes bodySpin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); }
}
body { position: fixed; top: 50%; left: 50%; -webkit-animation: bodySpin 2.5s linear infinite;
}
div:nth-child(1) { box-sizing: border-box; position: fixed; border-radius: 100%; top: 50%; left: 50%; height: 1px; width: 100px; margin-left: -50px; margin-top: -0.5px; border: 1px solid #369; -webkit-animation: openUp2 2s -2.2s cubic-bezier(0.9, 0.7, 0.75, 1.13) infinite; -webkit-transform: rotate(30deg);
}
div:nth-child(2) { box-sizing: border-box; position: fixed; border-radius: 100%; top: 50%; left: 50%; height: 1px; width: 100px; margin-left: -50px; margin-top: -0.5px; border: 1px solid #369; -webkit-animation: openUp2 6s -2.2s cubic-bezier(0.9, 0.7, 0.75, 1.13) infinite; -webkit-transform: rotate(60deg);
}
div:nth-child(3) { box-sizing: border-box; position: fixed; border-radius: 100%; top: 50%; left: 50%; height: 1px; width: 100px; margin-left: -50px; margin-top: -0.5px; border: 1px solid #369; -webkit-animation: openUp2 3s -2.2s cubic-bezier(0.9, 0.7, 0.75, 1.13) infinite; -webkit-transform: rotate(90deg);
}
div:nth-child(4) { box-sizing: border-box; position: fixed; border-radius: 100%; top: 50%; left: 50%; height: 1px; width: 100px; margin-left: -50px; margin-top: -0.5px; border: 1px solid #369; -webkit-animation: openUp2 12s -2.2s cubic-bezier(0.9, 0.7, 0.75, 1.13) infinite; -webkit-transform: rotate(120deg);
}
div:nth-child(5) { box-sizing: border-box; position: fixed; border-radius: 100%; top: 50%; left: 50%; height: 1px; width: 100px; margin-left: -50px; margin-top: -0.5px; border: 1px solid #369; -webkit-animation: openUp2 15s -2.2s cubic-bezier(0.9, 0.7, 0.75, 1.13) infinite; -webkit-transform: rotate(150deg);
}
div:nth-child(6) { box-sizing: border-box; position: fixed; border-radius: 100%; top: 50%; left: 50%; height: 1px; width: 100px; margin-left: -50px; margin-top: -0.5px; border: 1px solid #369; -webkit-animation: openUp2 6s -2.2s cubic-bezier(0.9, 0.7, 0.75, 1.13) infinite; -webkit-transform: rotate(180deg);
}
div:nth-child(7) { box-sizing: border-box; position: fixed; border-radius: 100%; top: 50%; left: 50%; height: 1px; width: 100px; margin-left: -50px; margin-top: -0.5px; border: 1px solid #369; -webkit-animation: openUp2 21s -2.2s cubic-bezier(0.9, 0.7, 0.75, 1.13) infinite; -webkit-transform: rotate(210deg);
}
div:nth-child(8) { box-sizing: border-box; position: fixed; border-radius: 100%; top: 50%; left: 50%; height: 1px; width: 100px; margin-left: -50px; margin-top: -0.5px; border: 1px solid #369; -webkit-animation: openUp2 16s -2.2s cubic-bezier(0.9, 0.7, 0.75, 1.13) infinite; -webkit-transform: rotate(240deg);
}
Developer | Paul Sullivan |
Username | pwsm50 |
Uploaded | January 26, 2023 |
Rating | 3.5 |
Size | 2,349 Kb |
Views | 2,024 |
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 |
Crazed Bacteria | 2,886 Kb |
A Pen by Paul Sullivan | 2,349 Kb |
CSS Breathing Particle Orb | 8,158 Kb |
Circular Audio Bars | 3,343 Kb |
Full screen burger menu | 3,923 Kb |
Get out and vote - Nov. 8th | 5,616 Kb |
Facebook-like Click-to-grow Like Button | 2,607 Kb |
Dart Scoreboard | 4,848 Kb |
Breathing Load Screen | 2,198 Kb |
CSS Star Wars | 10,583 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 jQuery Slider | Jurbank | 2,874 Kb |
Portfolio page | Bhavya_j | 2,804 Kb |
Horizontal Navigation with Floats | Gymratpacks | 5,403 Kb |
Pricing Table | Semenchenko | 6,784 Kb |
Front in Aracaju Logo Pure CSS | Shankarcabus | 2,581 Kb |
Sticky notes with CSS3 | HaiNguyen007 | 2,146 Kb |
WRENCH - STAFF | Lolita-adams | 1,608 Kb |
ABVI Menu Discarded | Overdrivemachines | 3,607 Kb |
Testing Code Pen | Jduprey | 1,468 Kb |
My Interests | Anshusaxenaarora | 2,015 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!