javascript 有什么办法可以清除容器底部的溢出物吗？

pw136qt2 于 2023-01-01 发布在 Java

关注(0)|答案(2)|浏览(126)

是否有办法清除溢出：隐藏在盒子的顶部和右侧？我不想在动画结束时剪掉狗的耳朵和鼻子。在60%时，100%的位置狗的鼻子和耳朵不应该被剪辑，但他的身体在底部和左侧应该被剪辑，使它看起来像他把他的头通过洞。我想使用剪辑路径，我找不到一个形状来做。有没有css属性或技术可以做到这一点？请帮助。

.box {
  width: 500px;
  height: 500px;
  background-color: orange;
  overflow: hidden;
  border-radius: 50%;
}

.dog {
  width: 115%;
  height: 115%;
  animation: dogPeeking 5s linear infinite alternate;
}

@keyframes dogPeeking {
  0% {
    transform: translate(-50%, -10%) rotateY(180deg);
  }
  60%,100% {
    transform: translate(10%, -10%) rotateY(180deg);
  }
}

<div class="box">
  <img src="https://res.cloudinary.com/ddq2p90tz/image/upload/v1662628751/dog_dr7izv.png" alt="dog" class="dog" />
</div>

JavaScript

来源：https://stackoverflow.com/questions/73646936/is-there-any-way-to-remove-overflow-from-the-bottom-of-a-container

2条答案

按热度按时间

2w2cym1i1#

你可以尝试一种方法，用半圆来表示多个图层。左边的圆圈将是主图层（你现在正在使用的），右边的圆圈将在狗图层下面。

.box {
  width: 550px;
  height: 500px;
  position: relative;
  overflow: hidden;
  border-top-left-radius: 250px;
  border-bottom-left-radius: 250px;
}

.box::before {
  content: '';
  width: 500px;
  height: 500px;
  position: absolute;
  border-top-right-radius: 250px;
  border-bottom-right-radius: 250px;
  z-index: 0;
  left: 0;
  top: 0;
  background-color: orange;
}

.dog {
  width: 100%;
  height: 115%;
  z-index: 1;
  position: absolute;
  transform: rotateY(180deg);
  animation: dogPeeking 5s linear infinite alternate;
}

@keyframes dogPeeking {
  0% {
transform: translate(-50%, 0) rotateY(180deg);
  }
  60%,100% {
transform: translate(0, 0) rotateY(180deg);
  }
}

<div class="box">
    <img src="https://res.cloudinary.com/ddq2p90tz/image/upload/v1662628751/dog_dr7izv.png" alt="dog" class="dog"/>
</div>

赞(0）回复(0）举报 2023-01-01

7vux5j2d2#

试着像这样给你的dog类添加一些定位，

.box {
  position: relative;
  top: 10%;
  width: 115%;
  height: 115%;
  animation: dogPeeking 5s linear infinite alternate;
}

赞(0）回复(0）举报 2023-01-01

我来回答

javascript 有什么办法可以清除容器底部的溢出物吗？

2条答案

相关问题

热门标签

最新问答