css3 溶解特效,css3的特效

• TEXT

                 

• TEXT

                 

• TEXT

                 

• TEXT

                 

• TEXT

                 

• TEXT

                 

css样式：

*{margin:0;padding:0;}

body {background:url(images/bg.jpg) repeat;}

ul{list-style:none;}

a{ text-decoration:none;}

img{border:none;}

#wrap {

width:845px;

height: 320px;

overflow: hidden;

margin: 80px auto;

box-shadow: 0 0 10px 2px rgba(0,0,0,0.4);

}

#wrap ul {

width: 3000px;

}

#wrap li {

display: block;

width: 140px; height: 320px;

position: relative;

float: left;

border-left: 1px solid #aaa;

box-shadow: 0 0 25px 10px rgba(0,0,0,0.4);

-moz-transition:all 0.5s;

-webkit-transition:all 0.5s;

transition:all 0.5s;

}

#wrap li img {

display: block;

width:640px;

}

#wrap ul:hover li { width:40px;}

#wrap ul li:hover { width: 640px;}

#wrap .title {

position: absolute;

left: 0; bottom: 0;

width: 640px;

background: rgba(0,0,0,0.5);

}

#wrap .title a {

display: block;

color: #fff;

font-size: 16px;

padding: 20px;

}