A Pen by Fred Hawk

Developer
Fred Hawk
Size
2,201 Kb
Views
14,168
  1. A Pen by Fred Hawk Previews
  2. A Pen by Fred Hawk HTML Codes
  3. A Pen by Fred Hawk CSS Codes

How do I make an a pen by fred hawk?

What is a a pen by fred hawk? How do you make a a pen by fred hawk? This script and codes were developed by Fred Hawk on 14 November 2022, Monday.

A Pen by Fred Hawk Previews
IQ Test

A Pen by Fred Hawk - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Fred Hawk</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="circles red"> <svg height="100" width="100" id="one" class="circle"> <circle cx="50" cy="50" r="40" /> </svg> <svg height="100" width="100" id="two" class="circle"> <circle cx="50" cy="50" r="40" /> </svg> <svg height="100" width="100" id="three" class="circle"> <defs> <radialGradient id="red-radial"> <stop offset="50%" stop-color="#d32f2f"/> <stop offset="95%" stop-color="#e53935"/> </radialGradient> </defs> <circle cx="50" cy="50" r="40" /> </svg>
</div>
</body>
</html>

A Pen by Fred Hawk - Script Codes CSS Codes

.circles { position: relative;
}
#one { fill: #d32f2f; position: absolute; -webkit-transform-origin: 46% 53%; transform-origin: 46% 53%; -webkit-animation: rotate 4s linear infinite reverse; animation: rotate 4s linear infinite reverse;
}
#two { fill: #e53935; position: absolute; top: 10px; -webkit-transform-origin: 47% 54%; transform-origin: 47% 54%; -webkit-animation: rotate 3.9s linear infinite; animation: rotate 3.9s linear infinite;
}
#three { fill: url(#red-radial); position: absolute; left: -3px; top: -2px; -webkit-transform-origin: 55% 55%; transform-origin: 55% 55%; -webkit-animation: rotate 4.1s linear infinite; animation: rotate 4.1s linear infinite;
}
@-webkit-keyframes rotate { 0% { -webkit-transform: rotate(0) scale(0.85); transform: rotate(0) scale(0.85); } 50% { -webkit-transform: rotate(360deg) scale(1.03); transform: rotate(360deg) scale(1.03); } 100% { -webkit-transform: rotate(720deg) scale(0.85); transform: rotate(720deg) scale(0.85); }
}
@keyframes rotate { 0% { -webkit-transform: rotate(0) scale(0.85); transform: rotate(0) scale(0.85); } 50% { -webkit-transform: rotate(360deg) scale(1.03); transform: rotate(360deg) scale(1.03); } 100% { -webkit-transform: rotate(720deg) scale(0.85); transform: rotate(720deg) scale(0.85); }
}
A Pen by Fred Hawk - Script Codes
A Pen by Fred Hawk - Script Codes
Home Page Home
Developer Fred Hawk
Username osycon
Uploaded November 14, 2022
Rating 3
Size 2,201 Kb
Views 14,168
Do you need developer help for A Pen by Fred Hawk?

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!

Fred Hawk (osycon) Script Codes
Name
CSS Flexbox 3 col example
Weekly UI - Stripe - Pricing section
Weekly UI - Dropbox Hero Component
Weekly UI - Make Reservations
Quotastic
Weekly UI - Paypal Navigation
Weekly UI - Statue of liberty
Weekly UI - Airbnb Footer Component
Weekly UI - Become a member
Weather App
Create amazing captions 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!