U途骑士
- UID30479
- 粉丝1
- 关注0
- 发帖数1
- 铜币12枚
- 威望12点
- 贡献0点
|
楼主#
更多
发布于:2014-07-30 01:03
图片:105805apkz7ykan709m0kp.jpg
CSS3实现简单的动画图片说明效果
.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
|