论坛

标题: 这个从下到上的的效果，代码写的一样，效果实现不了 [打印本页]

作者: 笔尖下的眉 时间: 2017-2-20 12:42
标题: 这个从下到上的的效果，代码写的一样，效果实现不了
是边看视频边敲代码的，和教学视频代码写的一样，并没有实现内容从下到上的一个过渡，时间处长也没有作用，这是为啥？
<style type="text/css">
*{margin:0; padding:0;}
body{font-family:"微软雅黑";}

.box{width:247px; height:350px; position:relative; overflow:hidden;}
.box img{display:block;}
.box .ceng{width:247px; height:350px; background:rgba(0,153,204,0.8); position:absolute; top:350px; left:0; text-align:center; color:#fff; transform:0.3s;}
.box .ceng h2{font-size:24px; font-weight:400; padding:60px 0 30px;}
.box .ceng p{font-size:14px; padding:30px 10px; margin-bottom:20px;}
.box .ceng a{border:1px solid #fff; color:#fff; font-size:16px; text-decoration:none; padding:5px 10px;}
.box:hover .ceng{top:0;}
</style>

<div class="box">
<img src="images/z_shafa1.jpg">
<div class="ceng">
<h2>标题文字</h2>
<p>内容摘要内容摘要内容摘要内容摘要内容摘要内容摘要内容摘要内容摘要内容摘要内容摘要内容摘要内容摘要内容摘要内容摘要</p>
<a href="">了解更多 ></a>
</div>

作者: moshang578 时间: 2017-3-18 09:16
你知道原因了吗，同问

欢迎光临论坛 (http://bbs.qinxue.com/)