css 让li逐个显示动画,css3动画效果

body {

color:#333;

font-family:'Terminal Dosis',Arial,sans-serif;

font-size:13px;

}

a {

color:#fff;

text-decoration:none;

}

h1,h2,h3,h4,h5,h6 {

font-size:100%;

font-weight:normal;

}

.menu {

padding:0;

margin:20px auto;

width:500px;

}

.menu li {

width:500px;

height:100px;

overflow:hidden;

display:block;

background:#fff;

-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.2);

-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.2);

box-shadow:1px 1px 2px rgba(0,0,0,0.2);

margin-bottom:4px;

border-left:10px solid #000;

-webkit-transition:all 300ms ease-in-out;

-moz-transition:all 300ms ease-in-out;

-o-transition:all 300ms ease-in-out;

-ms-transition:all 300ms ease-in-out;

transition:all 300ms ease-in-out;

}

.menu li:last-child {

margin-bottom:0px;

}

.menu li a {

text-align:left;

display:block;

width:100%;

height:100%;

color:#333;

position:relative;

}

.content {

position:absolute;

}

.main {

font-size:30px;

-webkit-transition:all 300ms linear;

-moz-transition:all 300ms linear;

-o-transition:all 300ms linear;

-ms-transition:all 300ms linear;

transition:all 300ms linear;

}

.sub {

font-size:14px;

color:#666;

-webkit-transition:all 300ms linear;

-moz-transition:all 300ms linear;

-o-transition:all 300ms linear;

-ms-transition:all 300ms linear;

transition:all 300ms linear;

}

.menu li:hover {

border-color:#fff004;

background:#000;

}

.menu li:hover .main {

color:#fff004;

font-size:14px;

}

.menu li:hover .sub {

color:#fff;

font-size:30px;

}