这个怎么做？ 2024-10-10 16:44 采纳率: 53%
浏览 13
已结题

关于#css#的问题：这个hover移出时没有动画怎么解决呀

这个hover移出时没有动画怎么解决呀

img


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {}
    
    .mainBox {
        background: url(./img/01.jpg);
        width: 590px;
        height: 470px;
        position: relative;
        /* overflow: hidden; */
    }
    
    .mainBox::after {
        content: "买家电上京东，政府补贴，最高20%";
        font-size: 20px;
        color: aliceblue;
        background: #069aa6;
        width: 100%;
        position: absolute;
        bottom: -9%;
        text-align: center;
        display: block;
        padding: 10px 0;
        transition: bottom 1s;
    }
    
    .mainBox:hover::after {
        transition: bottom 1s;
        animation: loopShow .5s ease-out;
        animation-fill-mode: forwards;
        opacity: 1;
        transition: bottom 1s;
        /* bottom: 0; */
    }
    
    @keyframes loopShow {
        from {
            bottom: -9%;
        }
        to {
            bottom: 0;
        }
    }
</style>

<body>
    <div class="mainBox">
        <!-- <p>买家电上京东，政府补贴，最高20%</p> -->
    </div>
</body>

</html>
  • 写回答

2条回答 默认 最新

  • rsrmyqsx 2024-10-10 17:09
    关注
    
    .mainBox:not(:hover)::after {
        animation: loopHide .5s ease-out;
        animation-fill-mode: forwards;
        opacity: 0;
    }
    @keyframes loopHide {
        from {
            bottom: 0;
        }
        to {
            bottom: -9%;
        }
    }

    加上这个就有移出效果了，具体的你自己调一下

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 10月18日
  • 已采纳回答 10月10日
  • 修改了问题 10月10日
  • 修改了问题 10月10日
  • 展开全部