鼠标滑过的动画效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.boss{
display: block;
width: 228px;
height: 160px;
margin: 100px auto;
color: #fff;
}
.box{
width: 228px;
height: 160px;
background: red;
position: relative;/*相对定位*/
}
.box img{
width: 228px;
height: 160px;
}
.sbox{
width: 228px;
height: 27px;
background: rgba(0,0,0,0.3);
position: absolute;/*绝对定位*/
left: 0;
bottom: 0;
font-size: 12px;
/* display: none; */
opacity: 0; /*0-1越小越透明*/
transition: 2s; /*动画时间2s*/
}
.sbox span{
display: block;
width: 20px;
height: 27px;
background: #e3291d;
text-align: center;
line-height: 27px;
float: left;
}
.sbox p{
width: 198px;
height: 27px;
/* background: pink; */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 27px;
float: left;
padding-left: 10px;
}
.box:hover .sbox{
/* display: block; */
opacity: 1; /*鼠标移到大盒子上,小盒子里透明的东西2s变得不透明*/
/* transition: 2s; */
}
</style>
</head>
<body>
<!--
所有的颜色带透明的写法
rgba() alpha 透明度 取值区间 0-1 值越小就越透明
-->
<!--
给要移动的子元素添加绝对定位，要参照物父元素添加相对定位。
-->
<a href="#" class="boss">
<div class="box">
<img src="img/img1.jpg" >
<div class="sbox">
<span>1</span>
<p>这是一个小盒子，这是一个小盒子这是一个小盒子</p>
</div>
</div>
</a>
</body>
</html>
