前端菜鸟记录一下,备忘
效果如下图:
Html代码:
<div class="policy-center-list-li">
<img th:src="@{/img/front/policyCenter/aaaa.jpg}" >
<div class="text-box">
<div class="policy-list-desc">
长三角双创示范基地联盟签订双创券通用通兑合作协议
</div>
<div class="policy-list-tag">
<span class="policy-date">2020年04月03日 17:14:56</span>
<span>新闻资讯</span>
</div>
<div class="policy-detail-summary">
11月15日,长三角双创示范基地联盟单位(上海市杨浦区、江苏省常州市武进区、浙江省嘉兴市南湖…
</div>
</div>
</div>
CSS样式:
/**
鼠标移入hover动画效果
*/
.policy-center-list-li:hover img{
transform: scale(1.3);
transition: all 0.4s ease 0s;
-webkit-transform: scale(1.3);
}
.policy-center-list-li:hover .text-box{
transform:translateY(-60px);
transition: all 0.4s ease 0s;
-webkit-transform: translateY(-60px);
}
/**
鼠标移开恢复特效
*/
.policy-center-list-li img{
transition: all 0.4s ease 0s;
}
.policy-center-list-li .text-box{
transition: all 0.4s ease 0s;
}