June 10, 2016

Animated Navigation Menu: 360° Spin-Color Transform Hover Effect

website animations

Animated Navigation Menu Using CSS3 And HTML5

A video demonstration of the animation is below. Short clip with no sound for visual purposes.

This animated navigtion menu was created using only HTML5 and CSS3. It uses an external style sheet named “styles.css” and the HTML document it links to is “index.html“. The source code is below. Just copy and paste into your code. Feel free to play around with the colors, placement of the buttons, and speed of the rotation and color transition. If you change the HTML and CSS file names; make sure you change the stylesheet link name as well.

index.html HTML Source Code

<!DOCTYPE html>
<html>
<head>
<title>Animated Navigation Bar</title><link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
<div class="navigation">
<div class="button">
<a href="index.html">Home</a>
</div>
<div class="button">
<a href="#">Tutorials</a>
</div>
<div class="button">
<a href="#">Programming</a>
</div>
<div class="button">
<a href="#">Source Code</a>
</div>
<div class="button">
<a href="#">Contact us</a>
</div>
</div>
</body>
</html>

styles.css CSS3 External Style Sheet Source Code

* {
margin: 0;
padding: 0;
}
body {
width: 100%;
text-align: center;
font-family: tahoma, georgia, arial;
background: black;
}
.navigation{
margin-left: 40%;
margin-top: 5%;
}
.button {
border-radius: 7px;
background-color: blue;
width: 12%;
height: auto; /*automatically fits height to size of the text.*/
margin: 1% .5%; /*1% top and bottom, .5% right and left. */
float: left; /*float left so that they will display side by side.*/
-webkit-transition:-webkit-transform 1s, background 1.5s;
-ms-transition:-webkit-transform 1s, background 1.5s;
-moz-transition:-webkit-transform 1s, background 1.5s;
-o-transition:-webkit-transform 1s, background 1.5s;
}
.button:hover {
-webkit-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
background: red;
}
a {
text-decoration: none;
color: white;
}
a:active {
color: black;
}
a:hover{
color: black;
}

Clear Coded Programming

Please Leave a comment