CSS样式实现hover鼠标移入动画特效、鼠标移出特效还原效果

前端菜鸟记录一下,备忘

效果如下图:

在这里插入图片描述

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;
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值