过渡实现查看隐藏物品信息(transition的使用)
程序员文章站
2022-03-09 22:43:51
...
效果展示
代码
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="main.css" rel="stylesheet">
</head>
<body>
<div class="box">
<ul class="item">
<li><a href="#"><img src="images/2.jpg"></a></li>
<li><a href="#">小米官网手机</a></li>
<li class="eval">超好用，比我用过的耳机都好，声音简直是从脑子里发出的</li>
</ul>
<ul class="item">
<li><a href="#"><img src='images/2.jpg'/></a>
<li><a href="#">小米官网手机</a></li>
<li class="eval">超好用，比我用过的耳机都好，声音简直是从脑子里发出的</li>
</ul>
<ul class="item">
<li><a href="#"><img src='images/2.jpg'/></a></li>
<li><a href="#">小米官网手机</a></li>
<li class="eval">超好用，比我用过的耳机都好，声音简直是从脑子里发出的</li>
</ul>
<ul class="item">
<li><a href="#"><img src='images/2.jpg'/></a>
<li><a href="#">小米官网手机</a></li>
<li class="eval">超好用，比我用过的耳机都好，声音简直是从脑子里发出的</li>
</ul>
<ul class="item">
<li><a href="#"><img src='images/1.jpg'/></a>
<li><a href="#">小米官网手机</a></li>
<li class="eval">超好用，比我用过的耳机都好，声音简直是从脑子里发出的</li>
</ul>
</div>>
</body>
</html
css
*{
margin:0;
padding:0;
}
body{
font-family: 宋体;
font-size:16px;
}
.box{
width:100%;
max-width:1150px;
background:#f5f5f5;
margin:50px auto;
height:1000px;
}
.item{
width:220px;
height:320px;
background:#fff;
float:left;
margin-left:10px;
position:relative;
overflow:hidden;
}
.item>:nth-child(2)
{
text-align:center;
padding:5px;
}
.box .item>:nth-child(2) a{
color:#333;
text-decoration:none;
}
.item .eval{
background:#FF6700;
padding:10px 30px;
position:absolute;
bottom:-68px;
left:0px;
}
.item:hover .eval{
bottom:0px;
transition: bottom 0.3s ease;
color:#fff;
}
上一篇： 一个要名誉的人