Kaleidomo
2021-08-26 17:02
采纳率: 0%
浏览 54

CSS样式中如何在使用transition过渡效果播放之后改变元素高度?

Question:想实现鼠标移入移出,在过渡动画播放结束之后,改变box1的高度,是否可以只用CSS实现这个效果,望指教。


 .box1{
    height: 50px;
    width: 100px;
    margin: auto;
    position: absolute;
    left: 500px;
    top: 500px;
    background-color: gray;
    transform: scale(1, 1);
    transition: transform 2s;
}

.box1:hover{
    transform: scale(2, 2);
    transition: transform 3s;
}

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="./css/style.css">
    </head>
    <body>
        <div class="box1">
        </div>
    </body>
</html>
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • transition: 中再加上一个 height 的过度,让height 过度的延迟时间等于 transition 的持续时间即可

    .box1{
        height: 50px;
        width: 100px;
        margin: auto;
        position: absolute;
        left: 500px;
        top: 500px;
        background-color: gray;
        transform: scale(1, 1);
        transition: transform 2s 1s, height 1s;
    }
    .box1:hover{
        transform: scale(2, 2);
        height: 100px;
        transition: transform 3s, height 1s 3s;
    }
    
    
    打赏 评论
  • 一把编程的菜刀 2021-08-26 17:27

    transition: height 2s;
    -moz-transition: height2s; /* Firefox 4 /
    -webkit-transition: height 2s; /
    Safari 和 Chrome /
    -o-transition: height 2s; /
    Opera */

    这个是逐渐改变高度的,你看你要怎么结合吧

    打赏 评论
  • 孤月葬花魂 2021-08-26 17:30

    hover下改变元素的实际宽高 是不可能的,你所看到的变大只是视觉上的,元素的实际宽高还是那么多

    打赏 评论

相关推荐 更多相似问题