我正在制作一个带动画的悬停按钮。这是代码:
HTML
<a href="" class="more-link"><span>Hover me →</span></a>
CSS
.more-link {
display: inline-block;
min-height: 2.4em;
line-height: 2.4;
color: #000;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
position: relative;
min-width: 8em;
text-align: center;
}
.more-link span {
display: block;
width: 100%;
height: 100%;
position: relative;
box-sizing: border-box;
padding: 0 1em;
}
@keyframes tl {
from {
width: 0%;
}
to {
width: 100%;
}
}
@keyframes tr {
from {
height: 0%;
}
to {
height: 100%;
}
}
.more-link:before {
content: ' ';
display: block;
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 1px;
background: #000;
animation: tl 400ms ease-in both;
animation-play-state: paused;
}
.more-link:hover:before {
animation-play-state: running;
}
.more-link:after {
content: ' ';
display: block;
position: absolute;
top: 0;
right: 0;
width: 1px;
height: 0%;
background: #000;
animation: tr 400ms ease-in 400ms both;
animation-play-state: paused;
}
.more-link:hover:after {
animation-play-state: running;
}
.more-link span:before {
content: ' ';
display: block;
position: absolute;
bottom: 0;
right: 0;
width: 0%;
height: 1px;
background: #000;
animation: tl 400ms ease-in 800ms both;
animation-play-state: paused;
}
.more-link:hover span:before {
animation-play-state: running;
}
.more-link span:after {
content: ' ';
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 1px;
height: 0%;
background: #000;
animation: tr 400ms ease-in 1200ms both;
animation-play-state: paused;
}
.more-link:hover span:after {
animation-play-state: running;
}
正如你所看到的,我在任何时候将鼠标悬停在按钮上时都设置了animation-play-state: paused
但是当我徘徊时,我真正需要的是动画的“恢复”或“重置”,我正在寻找一些文档这里https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state但没有这个实现。我案件的解决方法是什么?
答案 0 :(得分:1)
为什么不使用Javascript的事件监听器?
类似的东西:
(element).addEventListener("mouseover", function(){
(Add your animation name and info here that executes ONLY when hovered over.)
});
然后这样做:
(element).addEventListener("mouseout", function(){
(Add your animation name and info here that executes ONLY when the mouse leaves the div.)
});