css在父盒子中不上下居中实现，放大缩小动画

最新推荐文章于 2024-07-02 16:31:14 发布

wjl223

最新推荐文章于 2024-07-02 16:31:14 发布

阅读量626

点赞数

CC 4.0 BY-SA版权

文章标签： css css3

本文链接：https://blog.youkuaiyun.com/wjl223/article/details/118058829

博客记录了在CSS中如何处理一个特殊需求：元素既要保持在父盒子中不上下居中，又要实现放大缩小的动画效果。作者通过创建额外的包裹盒并分离定位和动画属性，成功解决了这个问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

遇到的一个小问题，不算很难，记录一下：

想要实现的效果：

我纠结的问题在于，我一般某个元素单独的上下居中，会使用这种方式：

父元素： {
  position: resolve;
}
子盒子： {
  postion: absolute;
  top: 50%;
  transform: translateY(-50%);
}

如果要实现放大缩小的动画，最简单的是使用动画：

@keyframes abc {
    from {
        transform: scale(0.8);
    }
    to {
        transform: scale(1.2);
    }
}

问题在于，这样就没有办法实现即不居中，有可以实现放大缩小的动画，我尝试过将动画属性设置为下面这样：

@keyframes abc {
    from {
        transform: translate(-50%) scale(0.8);
    }
    to {
        transform: translate(-50%) scale(1.2);
    }
}

这样是无法实现动画效果的，如果想要知道什么效果，可以自己尝试一下。

下面是我实现的方式

使用一个盒子来包着需要实现放大缩小的盒子，将定位和动画分开：

    <div class="contain">
        <div class="a">
            <div class="round">

            </div>
        </div>
    </div>

css:


.contain {
    width: 300px;
    height: 100px;
    background-color: red;
    position: relative;
}

.a {
    position: absolute;
    top: 30%;
    transform: translateY(-50%);
    right: 0;
    height: 50px;
    width: 50px;
}

.round {
    width: inherit;
    height: inherit;
    background-color: #ff0;
    border-radius: 50%;
    animation: abc 1s ease infinite alternate-reverse both;
    /* animation: name duration timing-function delay iteration-count direction fill-mode; */
}

@keyframes abc {
    from {
        transform: scale(0.8);
    }
    to {
        transform: scale(1.2);
    }
}