CSS3实现简单的动画图片说明效果
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
【CSS3实现简单的动画图片说明效果】相关文章
4. CSS3 HTML5实例四(使用 RGBA 实现透明效果)
10. CSS3属性的快速说明信息图
本文来源:https://www.51html5.com/a1011.html
上一篇:一个按钮引发的css3知识
下一篇:快速实现超酷动画/过渡效果的CSS3类库
﹝CSS3实现简单的动画图片说明效果﹞相关内容
- JQuery实现的 超简单的菜单缩放效果
- 使用CSS3的step()生成的动画效果
- 使用CSS3设计漂亮的动画效果3D大按钮
- 一款基于css3和jquery实现的动画弹出层
- CSS伪类的动画和过渡效果应用
- 不用图片和JS,照样创建绚丽的动态CSS3菜单
- 不用图片和JS也可创建绚丽的动态CSS3菜单
- 30款css3实现的鼠标经过图片显示描述特效
- CSS3 transition实现超酷图片墙动画效果
- CSS3 transition实现超酷图片墙动画效果