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

最新推荐文章于 2025-04-27 13:59:36 发布

原创最新推荐文章于 2025-04-27 13:59:36 发布

· 2.4w 阅读

89 ·

版权

文章标签：

#css3 #css #js #html

前端专栏收录该内容

6 篇文章

订阅专栏

前端菜鸟记录一下，备忘

效果如下图：

在这里插入图片描述

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;
}