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 |
Hover Animation from UNIQLO | 3,772 Kb |
Centered Isotope masonry | 2,243 Kb |
Fading gradient button | 1,713 Kb |
A Scanner Darkly | 1,712 Kb |
Bolt action | 3,023 Kb |
Infinite Carousel | 2,478 Kb |
Aurora Effect | 6,624 Kb |
Loading anim | 1,791 Kb |
Loading bars | 2,187 Kb |
Simple Spinning Logo Idea | 1,647 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 |
Calculator - codevember 08 - 2016 | Caiocares | 3,260 Kb |
Filtre ile Arama Kutusu - Search Box with Filter | AyhanALTINOK | 3,448 Kb |
Progressively reveal dots on a Bezier curve | GreenSock | 2,489 Kb |
Simple Flat Menu | Jeplaa | 2,467 Kb |
Project Euler Problem 17 | Bfillmer | 2,739 Kb |
CSS3 Animated buttons | Cguillou | 3,737 Kb |
Video mute | Leon9208 | 2,131 Kb |
Wikipedia Viewer | Thomasvaeth | 2,549 Kb |
Sample Profile Screen | OurDailyBread | 5,375 Kb |
Box Shadow Effects | Retrofuturistic | 2,143 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!