A Pen by Paul Sullivan

Developer
Size
2,349 Kb
Views
2,024

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 Previews

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);
}
A Pen by Paul Sullivan - Script Codes
A Pen by Paul Sullivan - Script Codes
Home Page Home
Developer Paul Sullivan
Username pwsm50
Uploaded January 26, 2023
Rating 3.5
Size 2,349 Kb
Views 2,024
Do you need developer help for A Pen by Paul Sullivan?

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!

Paul Sullivan (pwsm50) Script Codes
Create amazing SEO content 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!