featured
CSS3 animation effects for menu
Hi there … today I have got some new
tricks to share with you. It’s a CSS transition effect which will make your
work look unique to the users. So here is the stunning effect for you (below is
the look of the effect when placed properly in the website).
The following is the mark-up for a generic
HTML Code place this in your html file where you want the effect :
HTML :-
<ul>
<li>
<a class='list-item' href=''>
<i class='icon-reorder'></i>
</a>
</li>
<li>
<a class='list-item' href=''>
<i class='icon-th-large'></i>
</a>
</li>
<li>
<a class='list-item' href=''>
<i
class='icon-bar-chart'></i>
</a>
</li>
<li>
<a class='list-item' href=''>
<i class='icon-tasks'></i>
</a>
</li>
<li>
<a class='list-item' href=''>
<i class='icon-bell'></i>
</a>
</li>
<li>
<a class='list-item' href=''>
<i class='icon-archive'></i>
</a>
</li>
<li>
<a class='list-item' href=''>
<i class='icon-comment'></i>
</a>
</li>
<li>
<a class='list-item' href=''>
<i class='icon-sitemap'></i>
</a>
</li>
<li>
<a class='list-item' href=''>
<i
class='icon-thumbs-up'></i>
</a>
</li>
<li>
<a class='list-item' href=''>
<i class='icon-tumblr'></i>
</a>
</li>
</ul>
Here is the CSS that you need to call on the html of the effect to
run as you desire.
CSS3 :-
@import
url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css);
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html
{
width: 100%;
height: 100%;
}
body
{
width: 100%;
height: 100%;
display: box;
box-align: center;
box-pack: center;
transform: translate3d(0, 0, 0);
}
.clearfix
{
zoom: 1;
}
.clearfix:before,
.clearfix:after {
content: "\0020";
display: block;
height: 0;
overflow: hidden;
}
.clearfix:after
{
clear: both;
}
body
{
background: #f2f2f2;
}
ul {
position: relative;
-moz-transform: rotate(-35deg) skew(20deg,
5deg);
-ms-transform: rotate(-35deg) skew(20deg,
5deg);
-webkit-transform: rotate(-35deg) skew(20deg,
5deg);
transform: rotate(-35deg) skew(20deg, 5deg);
}
.list-item
{
background: #000000;
color: #575757;
text-align: center;
height: 2.5em;
width: 4em;
vertical-align: middle;
line-height: 2.5em;
border-bottom: 1px solid #060606;
position: relative;
display: block;
text-decoration: none;
-moz-box-shadow: -2em 1.5em 0 #e1e1e1;
-webkit-box-shadow: -2em 1.5em 0 #e1e1e1;
box-shadow: -2em 1.5em 0 #e1e1e1;
-moz-transition: all 0.25s linear;
-o-transition: all 0.25s linear;
-webkit-transition: all 0.25s linear;
transition: all 0.25s linear;
}
.list-item:hover
{
background: #ff6e42;
color: #fffcfb;
-moz-transform: translate(0.9em, -0.9em);
-ms-transform: translate(0.9em, -0.9em);
-webkit-transform: translate(0.9em, -0.9em);
transform: translate(0.9em, -0.9em);
-moz-transition: all 0.25s linear;
-o-transition: all 0.25s linear;
-webkit-transition: all 0.25s linear;
transition: all 0.25s linear;
-moz-box-shadow: -2em 2em 0 #e1e1e1;
-webkit-box-shadow: -2em 2em 0 #e1e1e1;
box-shadow: -2em 2em 0 #e1e1e1;
}
.list-item:hover:before,
.list-item:hover:after {
-moz-transition: all 0.25s linear;
-o-transition: all 0.25s linear;
-webkit-transition: all 0.25s linear;
transition: all 0.25s linear;
}
.list-item:hover:before
{
background: #b65234;
width: 1em;
top: 0.5em;
left: -1em;
}
.list-item:hover:after
{
background: #b65234;
width: 1em;
bottom: -2.5em;
left: 1em;
height: 4em;
}
.list-item:before,
.list-item:after {
-moz-transition: all 0.25s linear;
-o-transition: all 0.25s linear;
-webkit-transition: all 0.25s linear;
transition: all 0.25s linear;
}
.list-item:after
{
content: "";
position: absolute;
height: 4em;
background: #181818;
width: 0.5em;
bottom: -2.25em;
left: 1.5em;
-moz-transform: rotate(90deg) skew(0deg,
45deg);
-ms-transform: rotate(90deg) skew(0deg,
45deg);
-webkit-transform: rotate(90deg) skew(0deg,
45deg);
transform: rotate(90deg) skew(0deg, 45deg);
}
.list-item:before
{
content: "";
position: absolute;
height: 2.5em;
background: #121212;
width: 0.5em;
top: 0.25em;
left: -0.5em;
-moz-transform: skewY(-45deg);
-ms-transform: skewY(-45deg);
-webkit-transform: skewY(-45deg);
transform: skewY(-45deg);
}
!---------------------------------------------------CodeHunters----------------------------------------------------!
Team
www.bel-technology.com
!---------------------------------------------------CodeHunters----------------------------------------------------!
Team
www.bel-technology.com
0 comments