Circle Logo

Developer
Marty Powell
Size
2,064 Kb
Views
32,384
  1. Circle Logo Previews
  2. Circle Logo HTML Codes
  3. Circle Logo CSS Codes

How do I make an circle logo?

Just messing around with CSS3 animations to see how they work. Seem pretty rad.. What is a circle logo? How do you make a circle logo? This script and codes were developed by Marty Powell on 15 September 2022, Thursday.

Circle Logo Previews
IQ Test

Circle Logo - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Circle Logo</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="circle">	<p class="initials">MP</p>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Circle Logo - Script Codes CSS Codes

.circle { position:relative;	background-color: #191997;	height: 150px;	-moz-border-radius:75px;	-webkit-border-radius: 75px;	width: 150px; border:5px solid gray; animation: myfirst 5s; animation-iteration-count: infinite; animation-direction:alternate;	-moz-animation: myfirst 5s; /* Firefox */ -moz-animation-iteration-count: infinite; -moz-animation-direction:alternate;	-webkit-animation: myfirst 5s; /* Safari and Chrome */ -webkit-animation-iteration-count: infinite; -webkit-animation-direction:alternate;	-o-animation: myfirst 5s; /* Opera */ -o-animation-iteration-count: infinite; -o-animation-direction:alternate;
}
.initials { position:relative; font-weight:bold; font-family:impact; font-size:5em; color:gray; margin:.35em 0 0 .35em; animation: init 5s; animation-iteration-count: infinite; -moz-animation: init 5s; /* Firefox */ -moz-animation-iteration-count: infinite;	-webkit-animation: init 5s; /* Safari and Chrome */ -webkit-animation-iteration-count: infinite;	-o-animation: init 5s; /* Opera */ -o-animation-iteration-count: infinite;
}
.initials:hover {	-webkit-transform: rotate(-45deg);	-moz-transform: rotate(-45deg);	margin-top:.25em;
}
@keyframes myfirst
{
from {background:red; left:0px;top:0px;}
to {background:yellow;left:200px;top:200px;}
}
@-moz-keyframes myfirst /* Firefox */
{
from {background:red; left:0px;top:0px;}
to {background:yellow;left:200px;top:200px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:blue; left:0px;top:0px;}
to {background:yellow;left:400px;top:0px;}
}
@-o-keyframes myfirst /* Opera */
{
from {background:red; left:0px;top:0px;}
to {background:yellow;left:200px;top:200px;}
}
/*Do somet things for the text text inside the circle*/
@keyframes init
{
0% {color: red; }
25% {color: yellow; }
50% {color: blue; }
75% {color: green; }
100% {color: red; }
}
@-moz-keyframes init /* Firefox */
{
0% {color: red;}
25% {color: yellow; }
50% {color: blue; }
75% {color: green; }
100% {color: red;}
}
@-webkit-keyframes init /* Safari and Chrome */
{
0% {color: red; left:0px;top:200px;-webkit-transform: rotate(0deg);}
25% {color: yellow;left:0px;top:0px;-webkit-transform: rotate(360deg);}
50% {color: blue; left:0px;top:0px;}
75% {color: green; left:0px;top:100px;}
100% {color: red; left:0px;top:0px;}
}
@-o-keyframes init /* Opera */
{
0% {color: red; }
25% {color: yellow; }
50% {color: blue; }
75% {color: green;}
100% {color: red;}
}
Circle Logo - Script Codes
Circle Logo - Script Codes
Home Page Home
Developer Marty Powell
Username martypowell
Uploaded September 15, 2022
Rating 3
Size 2,064 Kb
Views 32,384
Do you need developer help for Circle Logo?

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!

Marty Powell (martypowell) Script Codes
Name
Slick Carousel Prototype
Product Information Section
News Snippet
Side Navigation
Animated Skip Nav
Flickr API Example
Font Awesome Social Icon List
Home
JQuery Tabs
Ellipsis Animation
Create amazing Facebook ads 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!