In this tutorial you will learn how to design a CSS animated logo with just two images and some html code. This animation is supported by all modern browsers.
Why use a CSS animated logo?
The CSS animations are the best way to decorate a site because they are:
- supported by all browsers;
- fast;
- easy to implement;
- not consuming important server resources;
- looking good on internet pages;
- and last but not least, are attracting more visitors.
What tools do I need to design a CSS animated logo?
To design a CSS animated logo, you will need two transparent images (.png files) and a text editor to write the HTML and CSS code (Notepad will do the work just fine).
We will use the logo that we created in previous tutorial, and create some text that will be rotating around the initial logo. This is your first image and should be named funqb1.png:
We will use GIMP again to create the second transparent image that contains the rotating text.
Let’s begin
Open GIMP and make a 400x400px new project with transparent background.
Set foreground color to black and draw a perfect circle with the “Ellipse select tool” (hold Shift down and draw a perfect circle). Modify the selection position parameters (0 initial 400 final) just like in the image bellow:
Add a new layer and fill the selection with FG color. You will get a big black circle. Go to “Select” – “Shrink” and set the value 3. Press “Del” and you have a black circle with 3px border. Go to “Select” – “Shrink” and set the value 40. Fill the selection with FG color again. Go to “Select” – “Shrink” and set the value 3. Press “Del” and now you have two concentric black circles with 3px borders.
Now that you have a frame for the logo you will put some text inside. Go to “Select” – “Grow” and enter the value 23. After that “Select” – “To Path” and convert that selection into a path. Go to the “Text tool” and enter some text in it. We entered “www.funqb.com – The best fun solution for you and your family -” with the Bahnschrift Bold Condensed font, size 38.
Right click on the text and select “Text along path”. Now you have a nice text along the path you created above. In the Path window right click on path you just created and convert it to selection (“Path to selection”). Go to “Edit” – “Fill with FG color”.
Export image as .png file. This will be your second image:
Now that we have the two images, let’s get to the animation part of this tutorial.
Open Notepad (the text editor in Windows) and copy/paste the next code:
<html>
<head>
<title>funqb.com</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<img src="funqb2.png" class="rotate" width="400" height="400" />
<img src="funqb1.png" class="inner" width="400" height="400" />
</body>
</html>Save the file in a folder on your computer and name it index.html
Open Notepad once again and copy/paste the next code:
.rotate {
animation: rotation 8s infinite linear;
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359.9deg);
}
}
.inner {
position: absolute;
top: 10px;
left: 10px;
display: block;
}Save the file in the same folder you put the index.html file and name it style.css
Copy the two pictures (funqb1.png and funqb2.png) in the same folder, and you are done.
Run the index.html file and you should see this:
You can modify everything (text font, image size, colors, etc.) just to make a logo that represents your site.
We also made a video with the hole process and you can watch it bellow:
If you want a custom original animated logo you can Contact us and for a small fee we will design it for you.
We hope you like this Design a CSS animated logo tutorial. If you do like it, please share it.