gpt4 book ai didi

javascript - Css悬停动画闪烁/循环

转载 作者:行者123 更新时间:2023-12-03 22:59:13 25 4
gpt4 key购买 nike

我有一个关于动画的问题。
我的动画在闪烁,我想停止触发循环。当我在这些前后悬停时,就像循环我的动画一样。我尝试了一些小事情,但没有任何线索......
也许我应该尝试使用具有绝对位置的跨度(之前替换)来做到这一点?
这是代码笔:https://codepen.io/chrishanZ/pen/eYgoLBG
谢谢你帮助我。

.header {
position: fixed;
left: 0;
right: 0;
top: 0;
background-color: blue;
z-index: 4;
}
.header_buttonburger {
position: absolute;
color: black;
text-transform: uppercase;
font-size: 1.125em;
right: 19px;
top: 24px;
z-index: 3;
}
.header_buttonburger:before, .header_buttonburger:after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 2px;
background-color: black;
transition: top 0.15s ease;
pointer-events: auto;
}
.header_buttonburger:before {
top: calc(100% + 2px);
}
.header_buttonburger:after {
top: calc(100% + 8px);
}
.header_buttonburger:hover:before {
top: calc(100% + 4px);
}
.header_buttonburger:hover:after {
top: calc(100% + 12px);
}
<header class="header">
<button class="header_buttonburger">
Menu
</button>

</header>

如果有人可以帮助我! :)
非常感谢

最佳答案

您需要为按钮创建一个容器并将鼠标悬停在容器上,如下所示:

     <div class="container_header_buttonburger">
<button class="header_buttonburger">
Menu
</button>
</div>
和风格
     .header_buttonburger {
position: relative;
color: black;
text-transform: uppercase;
font-size: 1.125em;
z-index: 3;
display: block;
}
.container_header_buttonburger {
position: absolute;
right: 19px;
top: 24px;
padding-bottom:14px; /* <--that makes the difference */
}
.container_header_buttonburger:hover > .header_buttonburger:before {
top: calc(100% + 4px);
}
.container_header_buttonburger:hover > .header_buttonburger:after {
top: calc(100% + 12px);
}
所以所有的风格:
              .header {
position: fixed;
left: 0;
right: 0;
top: 0;
background-color: blue;
z-index: 4;
}
.header_buttonburger {
position: relative;
color: black;
text-transform: uppercase;
font-size: 1.125em;
z-index: 3;
display: block;
}
.header_buttonburger:before, .header_buttonburger:after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 2px;
background-color: black;
transition: top 0.15s ease;
pointer-events: auto;
}
.header_buttonburger:before {
top: calc(100% + 2px);
}
.header_buttonburger:after {
top: calc(100% + 8px);
}
.container_header_buttonburger {
position: absolute;
right: 19px;
top: 24px;
padding-bottom:14px; /* <--that makes the difference */
}
.container_header_buttonburger:hover > .header_buttonburger:before {
top: calc(100% + 4px);
}
.container_header_buttonburger:hover > .header_buttonburger:after {
top: calc(100% + 12px);
}

关于javascript - Css悬停动画闪烁/循环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67297088/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com