• 1
  • 2
Home > Tips

An Creative CSS3 Animation Menus Free Download

 

 

Through the previous articles, we have already shared some creative menus and navigations with you. If you are interested in these free resources, you can see them here:

Today, I will show you a creative CSS3 animation menus, you can free download the CSS3 animation menu and then edit it for your own use. And, we will also show you the HTML and CSS codes of the CSS3 animation menus, I hope it will help you understand how to create this kind of CSS3 animation menus.

Below is the CSS3 animation menus that I want to share with you today.

                                                                [View the demo]                 [Download the demo] 



 HTML Codes of the CSS3 Animation Menus


<nav class='nav'>
<ul>
<li>
<a href='#'><span>Home</span></a>
</li>
<li>
<a href='#'><span>Phone</span></a>
</li>
<li>
<a href='#'><span>Wifi</span></a>
</li>
<li>
<a href='#'><span>Setting</span></a>
</li>
<li>
<a href='#'><span>Twitter</span></a>
</li>
</ul>
</nav><!--/nav-->


 

 CSS Codes of the CSS3 Animation Menus

body {
background-color: #dfdfdf;
-webkit-backface-visibility: hidden;
}
.demo {
margin: 60px auto 0;
text-align:center;
}
.nav li {
position: relative;
display: inline-block;
margin-left: -50px;
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
-ms-transition: all 0.4s linear;
transition: all 0.4s linear;
}
.nav li a {
display: inline-block;
width: 120px;
height: 120px;
padding: 30px;
border-radius: 50%;
border-width: 8px;
border-style: solid;
}
.nav li:hover {
z-index: 11;
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.nav li:hover a {
text-decoration: none;
}
.nav li:hover span {
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
-ms-transition: all 0.4s linear;
transition: all 0.4s linear;
-webkit-animation: moveFromBottom 0.3s ease;
-moz-animation: moveFromBottom 0.3s ease;
-o-animation: moveFromBottom 0.3s ease;
-ms-animation: moveFromBottom 0.3s ease;
animation: moveFromBottom 0.3s ease;
}
.nav li:nth-child(1) a {
color: #4d9683;
text-shadow: 0 1px 0 #9de3cf;
border-color: #549e89;
background-color: #51c9a7;
}
.nav li:nth-child(2) a {
color: #be607e;
text-shadow: 0 1px 0 #de8ba5;
border-color: #e499b0;
background-color: #e67b9c;
}
.nav li:nth-child(3) a {
color: #5e9eb4;
text-shadow: 0 1px 0 #adddec;
border-color: #a2cfde;
background-color: #7ec9e3;
}
.nav li:nth-child(4) a {
color: #ba9d5e;
text-shadow: 0 1px 0 #f5e0ad;
border-color: #dcc999;
background-color: #f0cd78;
}
.nav li:nth-child(5) a {
color: #b468a2;
text-shadow: 0 1px 0 #e8acd8;
border-color: #d8abcd;
background-color: #dd91cb;
}
.nav li:nth-child(1):hover a {
color: #0f775c;
text-shadow: 0 1px 0 #81e6c9;
border-color: #0a8462;
background-color: #00c18c;
}
.nav li:nth-child(2):hover a {
color: #b12a55;
text-shadow: 0 1px 0 #ff95b7;
border-color: #ba335c;
background-color: #ea5180;
}
.nav li:nth-child(3):hover a {
color: #2883a2;
text-shadow: 0 1px 0 #9cdef2;
border-color: #4397b3;
background-color: #55c1e5;
}
.nav li:nth-child(4):hover a {
color: #ab8228;
text-shadow: 0 1px 0 #ffe199;
border-color: #b08f3e;
background-color: #f8c64d;
}
.nav li:nth-child(5):hover a {
color: #a33689;
text-shadow: 0 1px 0 #ec97d6;
border-color: #b7569f;
background-color: #dd70c3;
}
.nav span {
display: block;
line-height:70px;
font-size: 30px;
font-style: normal;
}
.nav span:before {
display: block;
}
.nav li:nth-child(1) span:before {
content: 'home';
}
.nav li:nth-child(2) span:before {
content: 'phone';
}
.nav li:nth-child(3) span:before {
content: 'wifi';
}
.nav li:nth-child(4) span:before {
content: 'setting';
}
.nav li:nth-child(5) span:before {
content: 'twitter';
}
@-webkit-keyframes moveFromBottom {
from {
-webkit-transform: translateY(120%) scale(0.5) ;
opacity: 0;
}
to {
-webkit-transform: translateY(0%) scale(1);
opacity: 1;
}
}
@-moz-keyframes moveFromBottom {
from {
-moz-transform: translateY(120%) scale(0.5) ;
opacity: 0;
}
to {
-moz-transform: translateY(0%) scale(1);
opacity: 1;
}
}
@-ms-keyframes moveFromBottom {
from {
-ms-transform: translateY(120%) scale(0.5) ;
opacity: 0;
}
to {
-ms-transform: translateY(0%) scale(1);
opacity: 1;
}
}
@-o-keyframes moveFromBottom {
from {
-o-transform: translateY(120%) scale(0.5) ;
opacity: 0;
}
to {
-o-transform: translateY(0%) scale(1);
opacity: 1;
}
}
@keyframes moveFromBottom {
from {
transform: translateY(120%) scale(0.5) ;
opacity: 0;
}
to {
transform: translateY(0%) scale(1);
opacity: 1;
}
}
.nav span:before {
font-family: 'LigatureSymbols';
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-ms-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
-webkit-font-feature-settings: 'liga' 1, 'dlig' 1;
-moz-font-feature-settings: 'liga=1, dlig=1';
-ms-font-feature-settings: 'liga' 1, 'dlig' 1;
font-feature-settings: 'liga' 1, 'dlig' 1;
font-size: 80px;
}
@font-face {
font-family: 'LigatureSymbols';
src: url('font/LigatureSymbols-2.05.eot');
src: url('font/LigatureSymbols-2.05.eot?#iefix') format('embedded-opentype'),
url('font/LigatureSymbols-2.05.woff') format('woff'),
url('font/LigatureSymbols-2.05.ttf') format('truetype'),
url('font/LigatureSymbols-2.05.svg#LigatureSymbols') format('svg');
font-weight: normal;
font-style: normal;
}



 Terms and Rules 

It is absolutely free to download and use the CSS3 animation menus, there is no specific terms and rules to download and use it.

If you have problem downloading or editing the CSS3 animation menus, please feel free to contact our technical support team at support@slicemaker.com. We promise to you we can solve whatever problem you are having within 24 hours. Just enjoy the free CSS3 animation menus.



Choose a SliceMaker Product to Create a Website on Your Own-30 Day Freetrial
SliceMaker Standard V3.6 - Freeware
SliceMaker Standard V3.6 - Freeware
The anyone-can-master webpage making software. You can create exceptional webpage/website on your own even if you're unfamiliar with webpage making.
$0
$0
SliceMaker Platinum V3.6 - Freeware
SliceMaker Platinum V3.6 - Freeware
The bestselling webpage making software, helps you create exceptional webpage/website without writing complicated CSS and DIV codes.
$0
$0
SliceMaker Deluxe V3.6 - Freeware
SliceMaker Deluxe V3.6 - Freeware
The all-in-one webpage making software, helps you create webpage/website of any style. It's the idea tool to create webpage/website.
$0
$0