html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过渡</title>
</head>
<body>
<ul>
<li>
<div class="box-img">
<img src="王者荣耀官网首页制作/img/img02.jpg" alt="">
<div class="mask">
<div class="mask-txt">
<span>3.4万</span>
<span>2018-06-29</span>
</div>
<div class="mask-icon"></div>
</div>
</div>
<p class="box-txt">
【GK来了】套路究竟有多深？GK.可乐带你解析鬼谷子
</p>
</li>
</ul>
</body>
</html>
css代码：
<style>
ul{
list-style: none;
}
li{
width:209px;
height:205px;
float: left;/*background-color: darksalmon;*/
cursor: pointer;
}
li:hover .mask{
top:0;
}
li:hover .mask-txt{
opacity: 0;/*display: none;*/
}
.box-img{
width:209px;
height:126px;
position: relative;
background-color: #fdc04d;
overflow: hidden; /*内容溢出*/
border-bottom: 1px solid #5f6565;
}
.box-img>img{
display: block;
width: 100%;
height: 100%;
}
.mask{
width:209px;
height:126px;
background: rgba(0,0,0,0.7);
position: absolute;
top:105px;
left:0;
transition: all 0.6s ease;
}
.mask-txt{
height:21px;
}
.mask-txt>span{
display:block;
height: 21px;
line-height: 21px;
color: #fff;
font-size:12px;
}
.mask-txt>span:first-child{
padding-left:14px;
float: left;
margin-left:10px;
background: url("王者荣耀官网首页制作/img/index.png") no-repeat -256px -60px;
}
.mask-txt>span:last-child{
float: right;
margin-right: 10px;
}
.mask-icon{
width:40px;
height:40px;
margin:22px auto 0;
background: url("王者荣耀官网首页制作/img/index.png") no-repeat -192px -64px;
}
.box-txt{
font-size: 12px;
line-height: 22px;
margin-top: 10px;
}
</style>
实现效果如下：
8274
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
