Simple Spinning Logo Idea
How do I make an simple spinning logo idea?
What is a simple spinning logo idea? How do you make a simple spinning logo idea? This script and codes were developed by Insprd on 13 September 2022, Tuesday.
Simple Spinning Logo Idea - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple Spinning Logo Idea</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="logo"> <img id="ring" src="https://dl.dropboxusercontent.com/u/56802370/ring.png" /> <img id="pointer" src="https://dl.dropboxusercontent.com/u/56802370/pointer.png" />
</div>
</body>
</html>
Simple Spinning Logo Idea - Script Codes CSS Codes
.logo { width:112px; height:112px; margin:30px auto; overflow:visible; border:0px; position:relative;
}
#ring { -webkit-animation:spinner-1 5s ease infinite; animation:spinner-1 5s ease infinite;
}
#pointer { -webkit-animation:spinner-2 5s ease infinite; animation:spinner-2 5s ease infinite;
}
@-webkit-keyframes spinner-1 { 0% {-webkit-transform:rotate(0deg);transform:rotate(0deg);} 50% {-webkit-transform:rotate(540deg);transform:rotate(540deg);}
}
@keyframes spinner-1 { 0% {-webkit-transform:rotate(0deg);transform:rotate(0deg);} 50% {-webkit-transform:rotate(540deg);transform:rotate(540deg);}
}
@-webkit-keyframes spinner-2 { 0% {-webkit-transform:rotate(0deg);transform:rotate(0deg);} 50% {-webkit-transform:rotate(-360deg);transform:rotate(-360deg);}
}
@keyframes spinner-2 { 0% {-webkit-transform:rotate(0deg);transform:rotate(0deg);} 50% {-webkit-transform:rotate(-360deg);transform:rotate(-360deg);}
}
#ring, #pointer { width: 112x; height: 112px; position: absolute; }
Developer | Insprd |
Username | insprd |
Uploaded | September 13, 2022 |
Rating | 3 |
Size | 1,647 Kb |
Views | 28,336 |
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 |
Infinite Carousel | 2,478 Kb |
Loading anim | 1,791 Kb |
Fading gradient button | 1,713 Kb |
Brick a link with CSS | 1,417 Kb |
Bolt action | 3,023 Kb |
Aurora Effect | 6,624 Kb |
A Pen by insprd | 5,157 Kb |
Hover Animation from UNIQLO | 3,772 Kb |
Minimal Clock Card | 2,108 Kb |
Centered Isotope masonry | 2,243 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 |
Loader | MikitaLisavets | 3,321 Kb |
Fullscreen Parallax | Bassta | 3,313 Kb |
Slide In Panel | Vikvarg | 2,811 Kb |
Background-blend-mode Test | 0x04 | 4,744 Kb |
Layout 11 | Altynai | 1,690 Kb |
Bootstrap 4 Gridsystem Demo | Rivella50 | 1,535 Kb |
Z-index demo | Kblh | 1,534 Kb |
Angular Route | Arun_v606 | 1,837 Kb |
Scroll using CSS | Casperovic | 2,159 Kb |
Table Exercise | Fresco | 9,585 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!