[CSS3技术]CSS3实现简单的动画图片说明效果

图片：105805apkz7ykan709m0kp.jpg

.container{

height:200px;width:400px;

background:#000;

overflow:hidden;

position:relative;

}

.text{

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

top:-70px;

color:white;

font:14px Georgia,serif;

height:auto;width:inherit;

position:absolute;

/* CSS3 Transition Magic */

-webkit-transition: all .5s ease-out;

-moz-transition: all .5s ease-out;

-o-transition: all .5s ease-out;

transition: all .5s ease-out;

}

.text a{

color:#fff;

display:block;

padding:15px;

text-decoration:none;

/* CSS3 Transition Magic */

-webkit-transition: all .4s ease-out;

-moz-transition: all .4s ease-out;

-o-transition: all .5s ease-out;

transition: all .4s ease-out;

}

.text a:hover{

color:red;

text-decoration:none;

}

.container:hover .text{

top:0;

}



在线演示：http://www.aspxcs.net/index.php?m=content&c=index&a=down_file&id=788



本地下载：http://www.aspxcs.net/index.php?m=content&c=down&a_k=11a0UgRUUggGBwAACVUADQNSAAMMU10IUlUAVVBcBA8OCxIRCUIPBQcRVg1REkBFWEkdQ09BFlkSQ05UEhtXXUIcQRJYCwNcUF5cVRZUBARQSQIGCQMXClECBAdTBAwIDwYFUgdSVgsYTVlAHwIJBEQLXVBdWlFcXAEQVABBUFwLAgQ