有什么辦法可以去除容器底部的溢位物？-有解無憂

有沒有辦法去除溢位：隱藏在盒子的頂部和右側？我不想在影片結束時剪掉狗的耳朵和鼻子。在 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>

uj5u.com熱心網友回復：

您可以嘗試使用半圓形的多層方法。左邊的圓圈將是主圖層（您現在正在使用），右邊的圓圈將在狗圖層下方。

.half-right-circle {
  content: '';
  width: 250px;
  height: 500px;
  background-color: orange;
  border-top-right-radius: 250px;
  border-bottom-right-radius: 250px;
  display: block;
  position: absolute;
  z-index: 0;
  right: 0;
  top: 0;
}

.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-radius: 250px;
  z-index: 0;
  left: 0;
  top: 0;
  background-color: orange;
}

.box-container {
  width: 500px;
  height: 500px;
  position: relative;
}

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

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

  60%,
  100% {
    transform: translate(0, 0) rotateY(180deg);
  }
}

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

uj5u.com熱心網友回復：

Try adding some positioning to your dog class like this,
.box {
  position: relative;
  top: 10%;
  width: 115%;
  height: 115%;
  animation: dogPeeking 5s linear infinite alternate;
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/505631.html

標籤：javascript html css CSS动画

上一篇：如何在Reactjs中使用作為功能組件的道具設定和獲取TextField值？

下一篇：是否可以在ASPNetCore6MinimalAPI中使用自定義RequireAuthorization和AllowAnonymous進行自定義中間件身份驗證？