javascript - Css悬停动画闪烁/循环
问题描述
我有一个关于动画的问题。
我的动画在闪烁,我想停止触发循环。当我在这些前后悬停时,就像循环我的动画一样。我尝试了一些小事情,但没有任何线索......
也许我应该尝试使用具有绝对位置的跨度(之前替换)来做到这一点?
这是代码笔: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 - Firebase Cloud Messaging : Request is missing required Authentication Credentials
- c++ - 错误:bool' 不能用 'explicit' 说明符声明
- reactjs - ReactJs:如何将数据从控制台打印到网页?
- javascript - 除了警报之外,我还能用什么来告诉用户十六进制代码已被复制?
- pdf - 使用 iText7 提取 pdf 文件中包含的签名图像
- assembly - 用于虚拟到物理地址转换的 FreeBSD 模块
- microsoft-graph-api - 从 Azure 数据工厂管道调用 MS Graph API
- node.js - 如何处理停止发送数据的 HTTP 请求
- ruby-on-rails - 如何在 RoR 中锁定记录
- python - 试图弄清楚如何传递函数,以便它可以显示值