In this tutorial, we’re going to explore having some fun with CSS shapes a bit. We’re going to create an animated version of our logo.

First, we’ll create a circle. Our markup for this circle will be simple enough:

Now let’s create the circle in CSS:

Next, let’s create an oval, again with very simple markup:

And we’ll create the oval in our CSS:

Next we’ll need to position the circle over top of the oval. For this we will use absolute positioning and z-index declarations. First we’ll need to add some additional styles to our circle:

We’ll also need to add some additional styles to our oval:

We’ll wrap our circle and oval shapes in an anchor element with an ID attribute of “logo”:

To animate the logo, we’ll use the wonderful Animate.css. On the Animate.css Github repository there’s an example of how to extend jQuery to create a function to dynamically add animations to elements:

Lastly, we’ll use this function on the hover event to trigger our animations:

You can see an example below.

View Demo »