body,h1,p{
margin:0;
}
.box{
width: 800px;
margin:30pxauto;
/*(1);设置弹性盒子*/display:flex;
/*(2);设置两端对齐*/justify-content:space-between;
}
.box.info{
position: relative;
margin:10px;
width:180px;
height:280px;
border:1pxsolid#ccc;
text-align: center;
font-size: 16px;
overflow:hidden;
box-sizing: border-box;
}
.box.info.thumb{
width:120px;
height:120px;
border:1pxsolid#ccc;
border-radius:50%;
margin:20pxauto;
overflow:hidden;
background-color: #f94a69;
}
.box.infoimg{
width:100%;
height:100%;
border-radius:50%;
/*(3);过渡时间1s*/transition: 1s;
}
.box.infoh1{
color:#333;
/*(4);设置行高*/line-height:50px;
}
.box.infop{
color:#555;
}
.box.info.bottom{
/*(5);绝对定位*/position:absolute;
/*(6);将底部元素放到盒子外边31px*/bottom: -31PX;
width:100%;
height:30px;
/*(7);背景颜色*/background-color: #fd748c;
transition:1s;
}
.box.info:hover.bottom{
bottom:0;
}
.box.info.top{
position:absolute;
top:-91px;
z-index: -1;
width:100%;
height:90px;
/*(8);设置半圆*/border-radius: 0090px90px;
background-color:#fd748c;
transition:1s;
}
.box.info:hover.top{
top:0;
}
.box.info:hoverimg{
transform:scale(0.5);
/*(9);盒子投影*/box-shadow: 0px0px0px30px#fff;
}
.box.info:hover{
box-shadow:0015px#000;
}