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 |
CSS speaker | 3,046 Kb |
CSS Image Glitch | 5,782 Kb |
CSS Particle Box | 67,348 Kb |
Breathing Load Screen | 2,198 Kb |
Circular Audio Bars | 3,343 Kb |
Colorful Animated Border | 3,351 Kb |
Get out and vote - Nov. 8th | 5,616 Kb |
Thumbs up toggle | 2,516 Kb |
Water ripples | 26,635 Kb |
Full screen burger menu | 3,923 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 |
Wikipedia Viewer | Odylic | 2,333 Kb |
Day 11 - Calendar Card | Arnellebalane | 6,984 Kb |
CSS 3D Radio buttons | Andreasnylin | 1,650 Kb |
Blank Starter | Mhartington | 2,171 Kb |
Flip test | Madhes | 1,635 Kb |
A Pen by Eka Risyana | Risyana | 3,705 Kb |
Loading Bar | Jaradlight | 2,333 Kb |
Portfolio Page | KaylaMT | 1,983 Kb |
Multi-step GSAP animation | Acacheung | 2,668 Kb |
Ionic Infinite outside ion-content with ion-pane | Felquis | 3,117 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!