炫酷的代码_CSS3实现的炫酷菜单代码分享

index.html

代码如下:

a href="#"/a/li

a href="#s1"Menu 1

a href="#"Submenu a

a href="#"Submenu b

a href="#"Submenu c

a href="#"Submenu d

a href="#"Submenu e

a href="#"Submenu f

a href="#"Submenu g

a href="#"Submenu h

a href="#s2"Menu 2

a href="#"Submenu a

a href="#"Submenu b

a href="#"Submenu c

a href="#"Submenu d

a href="#"Submenu e

a href="#"Submenu f

a href="#"Submenu g

a href="#"Submenu h

a href="#"Menu 3

a href="#"Submenu a

a href="#"Submenu b

a href="#"Submenu c

a href="#"Submenu d

a href="#"Submenu e

a href="#"Submenu f

a href="#"Submenu g

a href="#"Submenu h

a href="#"Menu 4

a href="#"Menu 5

2. CSS

代码如下:

.menu, .menu ul {

list-style: none;

padding: 0;

margin: 0;

}

.menu {

height: 58px;

}

.menu li {

background: -moz-linear-gradient(#292929, #252525);

background: -ms-linear-gradient(#292929, #252525);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #252525));

background: -webkit-linear-gradient(#292929, #252525);

background: -o-linear-gradient(#292929, #252525);

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#292929", endColorstr="#252525");

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr="#292929", endColorstr="#252525")";

background: linear-gradient(#292929, #252525);

border-bottom: 2px solid #181818;

border-top: 2px solid #303030;

min-width: 160px;

}

.menu li {

display: block;

float: left;

position: relative;

}

.menu li:first-child {

border-radius: 5px 0 0;

}

.menu a {

border-left: 3px solid rgba(0, 0, 0, 0);

color: #808080;

display: block;

font-family: "Lucida Console";

font-size: 18px;

line-height: 54px;

padding: 0 25px;

text-decoration: none;

text-transform: uppercase;

}

Hover代码段：

代码如下:

.menu li:hover {

background-color: #1c1c1c;

background: -moz-linear-gradient(#1c1c1c, #1b1b1b);

background: -ms-linear-gradient(#1c1c1c, #1b1b1b);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1c1c1c), color-stop(100%, #1b1b1b));

background: -webkit-linear-gradient(#1c1c1c, #1b1b1b);

background: -o-linear-gradient(#1c1c1c, #1b1b1b);

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#1c1c1c", endColorstr="#1b1b1b");

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr="#1c1c1c", endColorstr="#1b1b1b")";

background: linear-gradient(#1c1c1c, #1b1b1b);

border-bottom: 2px solid #222222;

border-top: 2px solid #1B1B1B;

}

.menu li:hover a {

border-radius: 5px 0 0 0;

border-left: 3px solid #C4302B;

color: #C4302B;

}

CSS

代码如下:

/* submenu styles */

.submenu {

left: 0;

max-height: 0;

position: absolute;

top: 100%;

z-index: 0;

-webkit-perspective: 400px;

-moz-perspective: 400px;

-ms-perspective: 400px;

-o-perspective: 400px;

perspective: 400px;

}

.submenu li {

opacity: 0;

-webkit-transform: rotateY(90deg);

-moz-transform: rotateY(90deg);

-ms-transform: rotateY(90deg);

-o-transform: rotateY(90deg);

transform: rotateY(90deg);

-webkit-transition: opacity .4s, -webkit-transform .5s;

-moz-transition: opacity .4s, -moz-transform .5s;

-ms-transition: opacity .4s, -ms-transform .5s;

-o-transition: opacity .4s, -o-transform .5s;

transition: opacity .4s, transform .5s;

}

.menu .submenu li:hover a {

border-left: 3px solid #454545;

border-radius: 0;

color: #ffffff;

}

.menu li:hover .submenu, .menu li:focus .submenu {

max-height: 2000px;

z-index: 10;

}

.menu li:hover .submenu li, .menu li:focus .submenu li {

opacity: 1;

-webkit-transform: none;

-moz-transform: none;

-ms-transform: none;

-o-transform: none;

transform: none;

}

CSS

代码如下:

/* CSS3 delays for transition effects */

.menu li:hover .submenu li:nth-child(1) {

-webkit-transition-delay: 0s;

-moz-transition-delay: 0s;

-ms-transition-delay: 0s;

-o-transition-delay: 0s;

transition-delay: 0s;

}

.menu li:hover .submenu li:nth-child(2) {

-webkit-transition-delay: 50ms;

-moz-transition-delay: 50ms;

-ms-transition-delay: 50ms;

-o-transition-delay: 50ms;

transition-delay: 50ms;

}

.menu li:hover .submenu li:nth-child(3) {

-webkit-transition-delay: 100ms;

-moz-transition-delay: 100ms;

-ms-transition-delay: 100ms;

-o-transition-delay: 100ms;

transition-delay: 100ms;

}

.menu li:hover .submenu li:nth-child(4) {

-webkit-transition-delay: 150ms;

-moz-transition-delay: 150ms;

-ms-transition-delay: 150ms;

-o-transition-delay: 150ms;

transition-delay: 150ms;

}

.menu li:hover .submenu li:nth-child(5) {

-webkit-transition-delay: 200ms;

-moz-transition-delay: 200ms;

-ms-transition-delay: 200ms;

-o-transition-delay: 200ms;

transition-delay: 200ms;

}

.menu li:hover .submenu li:nth-child(6) {

-webkit-transition-delay: 250ms;

-moz-transition-delay: 250ms;

-ms-transition-delay: 250ms;

-o-transition-delay: 250ms;

transition-delay: 250ms;

}

.menu li:hover .submenu li:nth-child(7) {

-webkit-transition-delay: 300ms;

-moz-transition-delay: 300ms;

-ms-transition-delay: 300ms;

-o-transition-delay: 300ms;

transition-delay: 300ms;

}

.menu li:hover .submenu li:nth-child(8) {

-webkit-transition-delay: 350ms;

-moz-transition-delay: 350ms;

-ms-transition-delay: 350ms;

-o-transition-delay: 350ms;

transition-delay: 350ms;

}

.submenu li:nth-child(1) {

-webkit-transition-delay: 350ms;

-moz-transition-delay: 350ms;

-ms-transition-delay: 350ms;

-o-transition-delay: 350ms;

transition-delay: 350ms;

}

.submenu li:nth-child(2) {

-webkit-transition-delay: 300ms;

-moz-transition-delay: 300ms;

-ms-transition-delay: 300ms;

-o-transition-delay: 300ms;

transition-delay: 300ms;

}

.submenu li:nth-child(3) {

-webkit-transition-delay: 250ms;

-moz-transition-delay: 250ms;

-ms-transition-delay: 250ms;

-o-transition-delay: 250ms;

transition-delay: 250ms;

}

.submenu li:nth-child(4) {

-webkit-transition-delay: 200ms;

-moz-transition-delay: 200ms;

-ms-transition-delay: 200ms;

-o-transition-delay: 200ms;

transition-delay: 200ms;

}

.submenu li:nth-child(5) {

-webkit-transition-delay: 150ms;

-moz-transition-delay: 150ms;

-ms-transition-delay: 150ms;

-o-transition-delay: 150ms;

transition-delay: 150ms;

}

.submenu li:nth-child(6) {

-webkit-transition-delay: 100ms;

-moz-transition-delay: 100ms;

-ms-transition-delay: 100ms;

-o-transition-delay: 100ms;

transition-delay: 100ms;

}

.submenu li:nth-child(7) {

-webkit-transition-delay: 50ms;

-moz-transition-delay: 50ms;

-ms-transition-delay: 50ms;

-o-transition-delay: 50ms;

transition-delay: 50ms;

}

.submenu li:nth-child(8) {

-webkit-transition-delay: 0s;

-moz-transition-delay: 0s;

-ms-transition-delay: 0s;

-o-transition-delay: 0s;

transition-delay: 0s;

}

以上就是本文的全部内容了，希望大家能够喜欢。