是否有办法清除溢出:隐藏在盒子的顶部和右侧?我不想在动画结束时剪掉狗的耳朵和鼻子。在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>
2条答案
按热度按时间2w2cym1i1#
你可以尝试一种方法,用半圆来表示多个图层。左边的圆圈将是主图层(你现在正在使用的),右边的圆圈将在狗图层下面。
7vux5j2d2#
试着像这样给你的dog类添加一些定位,