Chuyển đến nội dung chính

Hiệu ứng CSS3 Menu Navigation Effect

Hôm nay mình xin giới thiệu đến các bạn chức năng CSS3 MENU NAVIGATION EFFECT. Với hiệu ứng này các bạn có thể tạo ra nhứng menu đẹp mắc và cá tính cho Website của các bạn. Hyhy nói lang mang vậy thôi :D CSS: 
 background: #161616 url(pattern_40.gif) top left repeat;
 margin: 0;
 padding: 0;
 font: 12px normal Verdana, Arial, Helvetica, sans-serif;
 height: 100%;
 color:#fff;
}

* {margin: 0; padding: 0; outline: none;}

img {border: none;}

a { 
 text-decoration:none; 
 color:#00c6ff;
}

h1 {
 font: 4em normal Arial, Helvetica, sans-serif;
 padding: 20px; margin: 0;
 text-align:center;
 color:#bbb;
}

h1 small{
 font: 0.2em normal  Arial, Helvetica, sans-serif;
 text-transform:uppercase; letter-spacing: 0.2em; line-height: 5em;
 display: block;
}

h2 {
 font: 2em normal Arial, Helvetica, sans-serif;
 padding-bottom:30px;
 color:#fff;
 display:block;
}

h3 {
 font: 1em Arial, Helvetica, sans-serif;
 font-weight:bold;
 color:#fff;
 display:block;
 padding:10px;
}

.container {
 width: 960px;
 margin: 0 auto; 
 overflow: hidden;
 position:relative;
 padding-bottom:50px;
}

/* FIRST EXAMPLE */
#panel { 
 width:300px;
 list-style:none; 
 padding-top:30px;
 display:inline-block;
}

#panel li {  
 border-radius:3px 3px 3px 3px; 
 margin-top:5px;
 width:150px;
 background: #000000;
 background: -moz-linear-gradient(top, #161616 0%, #000000 100%);
 background: -webkit-linear-gradient(top, #161616 0%,#000000 100%);
 background: -o-linear-gradient(top, #161616 0%,#000000 100%);
 border-left:1px solid #111; border-top:1px solid #111; 
        border-right:1px solid #333; border-bottom:1px solid #333;
}

#panel li.animation { 
 -moz-transition: all 0.4s ease-in-out; 
 -moz-transform:translateX(0px); 
 -o-transition: all 0.4s ease-in-out; 
 -o-transform:translateX(0px); 
 -webkit-transition: all 0.4s ease-in-out; 
 -webkit-transform:translateX(0px); 
}

#panel li.animation:hover { 
 -moz-transform:translateX(25px);
 -o-transform:translateX(25px);
 -webkit-transform:translateX(25px);
}

#panel li a { 
 color:#fff; 
 display:block; 
 padding:10px;
}

#panel li a:hover { 
 color:#00c6ff;
}

/* SECOND EXAMPLE */

#paneltwo { 
 width:300px;
 list-style:none; 
 position:relative;
 display:inline;
}

#paneltwo li {  
 border-radius:3px 3px 3px 3px; 
 margin-top:5px;
 width:150px;
 float:left;
 overflow:hidden;
 position:relative;
 background: #000000;
 background: -moz-linear-gradient(top, #161616 0%, #000000 100%);
 background: -webkit-linear-gradient(top, #161616 0%,#000000 100%);
 background: -o-linear-gradient(top, #161616 0%,#000000 100%);
 border-left:1px solid #111; border-top:1px solid #111; 
        border-right:1px solid #333; border-bottom:1px solid #333;
}

#paneltwo li.mask { /* It allows us to hide the link behind it */
 z-index:10; 
 overflow:hidden;
}

#paneltwo li.linkOne, #paneltwo li.linkTwo, #paneltwo li.linkThree, 
#paneltwo li.linkFour, #paneltwo li.linkFive 
{   -moz-transition: all 1s ease-in-out;
 -webkit-transition: all 1s ease-in-out;
 -o-transition: all 1s ease-in-out;
}

#paneltwo:hover li.linkOne, #paneltwo:hover li.linkTwo, 
#paneltwo:hover li.linkThree, #paneltwo:hover li.linkFour, 
#paneltwo:hover li.linkFive 
{  -moz-transform:translateX(0px);
 -moz-transition: all 1s ease-in-out; 
 -webkit-transform:translateX(0px);
 -webkit-transition: all 1s ease-in-out; 
 -o-transform:translateX(0px);
 -o-transition: all 1s ease-in-out; 
}

#paneltwo li.linkOne {
 -moz-transform:translateX(-90%); 
 -moz-transition-delay:0.6s; 
 
 -webkit-transform:translateX(-90%); 
 -webkit-transition-delay:0.6s; 
 
 -o-transform:translateX(-90%); 
 -o-transition-delay:0.6s; 
 
 z-index:5; 
}
#paneltwo li.linkTwo { 
 -moz-transform:translateX(-180%); 
 -moz-transition-delay:0.5s; 
 
 -webkit-transform:translateX(-180%); 
 -webkit-transition-delay:0.5s; 
 
 -o-transform:translateX(-180%); 
 -o-transition-delay:0.5s; 
 
 z-index:4;
}
#paneltwo li.linkThree { 
 -moz-transform:translateX(-270%); 
 -moz-transition-delay:0.4s; 
 
 -webkit-transform:translateX(-270%); 
 -webkit-transition-delay:0.4s; 
 
 -o-transform:translateX(-270%); 
 -o-transition-delay:0.4s;
 
 z-index:3;
}
#paneltwo li.linkFour { 
 -moz-transform:translateX(-360%); 
 -moz-transition-delay:0.3s;
 
 -webkit-transform:translateX(-360%); 
 -webkit-transition-delay:0.3s;
 
 -o-transform:translateX(-360%); 
 -o-transition-delay:0.3s; 
 z-index:2;
}

#paneltwo li.linkFive { 
 -moz-transform:translateX(-450%); 
 -moz-transition-delay:0.2s;
 
 -webkit-transform:translateX(-450%); 
 -webkit-transition-delay:0.2s;
 
 -o-transform:translateX(-450%); 
 -o-transition-delay:0.2s;
  
 z-index:1;
}

#paneltwo:hover li.linkOne { 
 -moz-transition-delay:0s; 
 -webkit-transition-delay:0s; 
 -o-transition-delay:0s; 
 z-index:5;
}
#paneltwo:hover li.linkTwo { 
 -moz-transition-delay:0.2s;
 -webkit-transition-delay:0.2s;
 -o-transition-delay:0.2s; 
 z-index:4;
}
#paneltwo:hover li.linkThree { 
 -moz-transition-delay:0.4s;
 -webkit-transition-delay:0.4s;
 -o-transition-delay:0.4s; 
 z-index:3;
}
#paneltwo:hover li.linkFour { 
 -moz-transition-delay:0.6s;
 -webkit-transition-delay:0.6s;
 -o-transition-delay:0.6s; 
 z-index:2;
}
#paneltwo:hover li.linkFive { 
 -moz-transition-delay:0.8s;
 -webkit-transition-delay:0.8s;
 -o-transition-delay:0.8s; 
 z-index:1;
}

#paneltwo li a { 
 color:#fff; 
 display:block; 
 padding:10px;
}

#paneltwo li a:hover { 
 color:#00c6ff;
}

/* THIRD EXAMPLE */

#panelthree { 
 width:300px;
 list-style:none; 
 position:relative;
 display:inline;
}

#panelthree li {  
 border-radius:3px 3px 3px 3px; 
 margin-top:5px;
 width:150px;
 float:left;
 overflow:hidden;
 position:relative;
 background: #000000;
 background: -moz-linear-gradient(top, #161616 0%, #000000 100%);
 background: -webkit-linear-gradient(top, #161616 0%,#000000 100%);
 background: -o-linear-gradient(top, #161616 0%,#000000 100%);
 border-left:1px solid #111; border-top:1px solid #111; 
        border-right:1px solid #333; border-bottom:1px solid #333;
}

#panelthree li.mask { /* It allows us to hide the link behind it */
 z-index:10; 
 overflow:hidden;
}

#panelthree li a { 
 color:#fff; 
 display:block; 
 padding:10px;
}

#panelthree li a:hover { 
 color:#00c6ff;
}

#panelthree li.linkAnimationOne, #panelthree li.linkAnimationTwo, 
#panelthree li.linkAnimationThree, #panelthree li.linkAnimationFour, 
#panelthree li.linkAnimationFive
{   -moz-transition: all 0.5s ease-in-out;
 -webkit-transition: all 0.5s ease-in-out;
 -o-transition: all 0.5s ease-in-out;
}

#panelthree:hover li.linkAnimationOne, #panelthree:hover li.linkAnimationTwo, 
#panelthree:hover li.linkAnimationThree, #panelthree:hover li.linkAnimationFour, 
#panelthree:hover li.linkAnimationFive
{  -moz-animation:bounceX 0.5s linear forwards;
 -webkit-animation:bounceX 0.5s linear forwards;
}

#panelthree:hover li.linkAnimationTwo {  
 -moz-animation-delay:0.5s;
 -webkit-animation-delay:0.5s; 
}
#panelthree:hover li.linkAnimationThree { 
 -moz-animation-delay:1s;
 -webkit-animation-delay:1s; 
}
#panelthree:hover li.linkAnimationFour{ 
 -moz-animation-delay:1.5s;
 -webkit-animation-delay:1.5s; 
}
#panelthree:hover li.linkAnimationFive 
{  -moz-animation-delay:2s;
 -webkit-animation-delay:2s;
}

#panelthree li.linkAnimationOne {
 -moz-transform:translateX(-100%); 
 -webkit-transform:translateX(-100%); 

 z-index:5; 
}
#panelthree li.linkAnimationTwo {
 -moz-transform:translateX(-200%); 
 -webkit-transform:translateX(-200%); 
 
 z-index:4; 
}
#panelthree li.linkAnimationThree {
 -moz-transform:translateX(-300%); 
 -webkit-transform:translateX(-300%); 
 
 z-index:3; 
}
#panelthree li.linkAnimationFour {
 -moz-transform:translateX(-400%); 
 -webkit-transform:translateX(-400%); 
 
 z-index:2; 
}
#panelthree li.linkAnimationFive {
 -moz-transform:translateX(-500%); 
 -webkit-transform:translateX(-500%); 
 
 z-index:1; 
}

@-moz-keyframes bounceX {
0% { -moz-transform: translateX(-205px); -moz-animation-timing-function: ease-in; }   
40% { -moz-transform: translateX(-100px); -moz-animation-timing-function: ease-in; }
65% { -moz-transform: translateX(-52px); -moz-animation-timing-function: ease-in; }
82% { -moz-transform: translateX(-25px); -moz-animation-timing-function: ease-in; }
92% { -moz-transform: translateX(-12px); -moz-animation-timing-function: ease-in; }   
55%, 75%, 87%, 97%, 100% { -moz-transform: translateX(0px); -moz-animation-timing-function: ease-out; }
}

@-webkit-keyframes bounceX {
0% { -webkit-transform: translateX(-205px); -webkit-animation-timing-function: ease-in; }
   
40% { -webkit-transform: translateX(-100px); -webkit-animation-timing-function: ease-in; }
65% { -webkit-transform: translateX(-52px); -webkit-animation-timing-function: ease-in; }
82% { -webkit-transform: translateX(-25px); -webkit-animation-timing-function: ease-in; }
92% { -webkit-transform: translateX(-12px); -webkit-animation-timing-function: ease-in; }
   
55%, 75%, 87%, 97%, 100% { -webkit-transform: translateX(0px); -webkit-animation-timing-function: ease-out; }
}
HTML: 
<div class="container">
 <!-- FIRST EXAMPLE -->
 <ul id="panel">
        <li><h3>MENU</h3></li>
        <li class="animation"><a href="#">Link 1</a></li>
        <li class="animation"><a href="#">Link 2</a></li>
        <li class="animation"><a href="#">Link 3</a></li>
        <li class="animation"><a href="#">Link 4</a></li>
        <li class="animation"><a href="#">Link 5</a></li>
    </ul>
</div>

<div class="container">   
    <!-- SECOND EXAMPLE -->
    <ul id="paneltwo">
        <li class="mask"><h3>MENU ></h3></li>
        <li class="linkOne"><a href="#">Link 1</a></li>
        <li class="linkTwo"><a href="#">Link 2</a></li>
        <li class="linkThree"><a href="#">Link 3</a></li>
        <li class="linkFour"><a href="#">Link 4</a></li>
        <li class="linkFive"><a href="#">Link 5</a></li>
    </ul>
</div>

<div class="container">   
    <!-- THIRD EXAMPLE -->
    <ul id="panelthree">
        <li class="mask"><h3>MENU ></h3></li>
        <li class="linkAnimationOne"><a href="#">Link 1</a></li>
        <li class="linkAnimationTwo"><a href="#">Link 2</a></li>
        <li class="linkAnimationThree"><a href="#">Link 3</a></li>
        <li class="linkAnimationFour"><a href="#">Link 4</a></li>
        <li class="linkAnimationFive"><a href="#">Link 5</a></li>
    </ul>
</div>
TẢI SOURCE CODE Chúc các bạn thành công :D

Nhận xét

Đăng nhận xét

Bài đăng phổ biến từ blog này

Giới thiệu về Bootstrap CSS

Như tiêu đề của bài viết, hôm nay chúng ta sẽ tìm hiểu các quy tắc trong cách style của Bootstrap cho các thành phần trên trang web. Đó là typography, heading, code, tables, from … các yếu tố cơ bản hầu như xuất hiện trên mọi trang web. Công cụ Ok, trước khi bắt đầu mình xin giới thiệu một plugin rất hiệu quả để code Bootstrap trong sublime text (nếu bạn nào dùng), đó là  Bootstrap 3 snippets . Bạn xem documentation của nó ở đây  https://github.com/JasonMortonNZ/bs3-sublime-plugin Về sublime text thì chắc hẳn mọi người đều biết rồi, một editor rất phổ biến để code web. Nếu bạn nào chưa biết thì hãy tự tìm hiểu thêm hoặc tham khảo bài viết trong thachpham.com  ở đây . Mình không khuyến khích các bạn dùng plugin khi mà chưa nắm rõ hết cách làm việc của từng thành phần trong Bootstrap vì nó tự động cho bạn khá nhiều công việc. Tuy nhiên dù sao thì đó cũng là một cách học. Vừa khám phá vừa tìm hiểu dần và điều quan trọng là bạn phải nắm bắt nó thật tốt để có thể tùy ...
Đăng nhận xét
Đọc thêm