I am going to create beautiful menu using CSS3 transition effect. Observe below image. When user hover the menu text, the text color will change gradually character by character.  This type of effect can be created by simple CSS3 transition

Markup

Observe below markup. menu-link-default-txt is default text. menu-link-over is text to be displayed from 0% to 100% on mouse over, menu-link-default-txt will be hidden from 100% to 0%. 

Left To Right Animation

<a href="http://flaticon.sodhanalibrary.com/" class="menu-link menu-link-left" target="_blank">
   <div class="menu-link-txt">
    <div class="menu-link-default">
        <div class="menu-link-default-txt">My Blog</div>
    </div>
    <div class="menu-link-hover">My Blog</div>
   </div>
</a>
Click here to see DEMO

Left To Right Animation

<a href="http://flaticon.sodhanalibrary.com/" class="menu-link menu-link-right" target="_blank">
   <div class="menu-link-txt">
    <div class="menu-link-default">
        <div class="menu-link-default-txt">My Blog</div>
    </div>
    <div class="menu-link-hover">My Blog</div>
   </div>
</a>

CSS

.menu-link {
    display: block;
    padding: 14px 5px;
    color: #fff;
    overflow: hidden;
    font-size:100px;
}

.menu-link:before, .menu-link:after {
    content: '';
    position: absolute;
    left: 5px;
    bottom: 4px;
    width: 35px;
    height: 1px;
    background-color: #e9a065
}

.menu-link:before {
    -moz-transform: translate(-50%, 0) scale(0, 1);
    -ms-transform: translate(-50%, 0) scale(0, 1);
    -webkit-transform: translate(-50%, 0) scale(0, 1);
    transform: translate(-50%, 0) scale(0, 1);
    -moz-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
    -o-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1)
}

.menu-link:after {
    -moz-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    transition: all 1s cubic-bezier(0.77, 0, 0.175, 1)
}

.menu-link:hover:before {
    -moz-transform: translate(0%, 0) scale(1, 1);
    -ms-transform: translate(0%, 0) scale(1, 1);
    -webkit-transform: translate(0%, 0) scale(1, 1);
    transform: translate(0%, 0) scale(1, 1);
    -moz-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    transition: all 1s cubic-bezier(0.77, 0, 0.175, 1)
}

.menu-link:hover:after {
    -moz-transform: translate(50%, 0) scale(0, 1);
    -ms-transform: translate(50%, 0) scale(0, 1);
    -webkit-transform: translate(50%, 0) scale(0, 1);
    transform: translate(50%, 0) scale(0, 1);
    -moz-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
    -o-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1)
}

.menu-link:hover .menu-link-default {
    width: 0%
}

.menu-link:hover .menu-link-hover {
    width: 100%;
    opacity: 1;
}

.menu-link-left .menu-link-txt {
    float: left;
    position: relative
}

.menu-link-left .menu-link-default {
    float: right;
    width: 100%;
    padding: 5px 0;
    white-space: nowrap;
    -moz-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    overflow: hidden
}

.menu-link-left .menu-link-default-txt {
    float: right
}

.menu-link-left .menu-link-hover {
    position: absolute;
    left: 0;
    top: 0;
    opacity:0;
    width: 0%;
    padding: 5px 0;
    color: #e9a065;
    white-space: nowrap;
    overflow: hidden;
    -moz-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    transition: all 1s cubic-bezier(0.77, 0, 0.175, 1)
}

.menu-link-right .menu-link-txt {
    float: right;
    position: relative
}

.menu-link-right .menu-link-default {
    float: left;
    width: 100%;
    padding: 5px 0;
    white-space: nowrap;
    -moz-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    overflow: hidden
}

.menu-link-right .menu-link-default-txt {
    float: right;
    width:100%;
}

.menu-link-right .menu-link-hover {
    position: absolute;
    right: 0;
    top: 0;
    width: 0%;
    padding: 5px 0;
    color: #e9a065;
    white-space: nowrap;
    overflow: hidden;
    opacity:0;
    width: 100%;
    -moz-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    transition: all 1s cubic-bezier(0.77, 0, 0.175, 1)
}

2 comments:

  1. Hi to everybody, here everyone is sharing such knowledge, so it’s fastidious to see this site, and I used to visit this blog daily.
    great site

    ReplyDelete

Blogroll

Follow this blog by Email

Popular Posts