所以我玩了一下悬停剪辑路径转换。 https://codepen.io/caffeineggs/pen/MWajoeK Ofc 当您停止悬停该元素并将鼠标置于其动画路径中时,它将进入完全癫痫模式或任何所谓的东西。我猜是抖动。我搜索了一下,找到了与转换相关的 js eventListeners,但仍然不知道如何修复它。就像有没有办法阻止过渡开始,如果前一个没有完成,或者我只是放弃并让它 onclick ?
<div class="try">
<div class="play" id="play">
<div class="h1">Hello</div>
</div>
<div class="play2">
<div class="h2">Wow</div>
</div>
<div class="play3">
<div class="h3">Epic</div>
</div>
<div class="play4">
<div class="h4">Noice</div>
</div>
</div>
.try {
margin-left: 600px;
margin-top: 100px;
font-family: geometria light;
}
.play,.play1,.play2,.play3,.play4,.play35{
position: absolute;
}
.play {
margin: -10px 0px 0px 50px;
display: inline-block;
width: 350px;
height: 350px;
background: #F54C2B;
clip-path: polygon(0% 70%, 70% 0%, 100% 100%);
transition: clip-path .3s ease-in-out;
transition: .3s;
}
.h1,.h2,.h3,.h4{
margin-top: 200px;
margin-left: 100px;
font-size: 32px;
transition: .3s;
}
.h1,.h4 {
color: white;
}
.h3,.h4 {
margin-top: 100px;
margin-left: 70px;
}
.play2 {
margin: 50px 0px 0px 360px;
display: inline-block;
width: 350px;
height: 350px;
background: #FFD029;
clip-path: polygon(30% 0%, 100% 70%, 0% 100%);
transition: clip-path .3s ease-in-out;
transition: .3s;
}
我为两种状态都添加了转换延迟,这有点帮助,但遗憾的是问题仍然存在
翻翻过去那场雪
相关分类