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) }
This is just AWESOME!!!
ReplyDeleteHi to everybody, here everyone is sharing such knowledge, so it’s fastidious to see this site, and I used to visit this blog daily.
ReplyDeletegreat site