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)
}

1 comment:

Blogroll

Follow this blog by Email

Popular Posts