盒子类使用活塞类进行动画处理,但我希望它保持在一个位置。我不知道他是如何继承这个动画的,也不知道为什么。我尝试使用 (animation: none !important;) 但它没有用。
@keyframes piston {
0%,
100% {
margin-top: 175px
}
50% {
margin-top: 50px
}
}
@keyframes handle {
0%,
100% {
height: 225px
}
50% {
height: 100px
}
}
.piston {
animation: piston 5s linear infinite;
background-color: black;
border: 3px solid black;
width: 150px;
height: 50px;
margin-left: -68px
}
.handle {
animation: handle 5s linear infinite;
width: 25px;
height: 225px;
margin-left: 68px;
border: 5px black solid;
background-color: black;
}
.box {
width: 156px;
height: 200px;
border: 3px solid red;
border-top: none;
margin-left: 1px;
}
<div class='handle'>
<div class='piston'></div>
</div>
<div class='box'></div>
最佳答案
您可以通过将带有 .box
类的 div
放在带有 .handle
的 div
之前来实现> 在您的 HTML 中设置类,并将 .box
类设置为在您的 CSS 中具有 position: fixed
。
您的动画位置略有偏差,因此我也为您修复了该问题。您可以改回动画并调整框的高度以使其也适合。
@keyframes piston {
0%,
100% {
margin-top: 140px
}
50% {
margin-top: 50px
}
}
@keyframes handle {
0%,
100% {
height: 175px
}
50% {
height: 100px
}
}
.piston {
animation: piston 5s linear infinite;
background-color: black;
border: 3px solid black;
width: 150px;
height: 50px;
margin-left: -68px
}
.handle {
animation: handle 5s linear infinite;
width: 25px;
height: 225px;
margin-left: 68px;
border: 5px black solid;
background-color: black;
}
.box {
width: 156px;
height: 200px;
border: 3px solid red;
border-top: none;
margin-left: 2px;
position: fixed;
}
<div class='box'></div>
<div class='handle'>
<div class='piston'></div>
</div>
关于html - 如何关闭盒子类动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55439729/