Question

我对CSS动画还很陌生。我想产生一种效果，如果我将鼠标悬停在元素上，则穿线效果会从右向左慢慢消失。我已经收集了所有这些信息，但是在页面加载时效果已经开始。因此，当我将鼠标悬停在其上时，什么也不会发生，而且我真的不知道将悬停在代码中的位置。另外，如何确保当我不再将鼠标悬停在其上方时，通过的线仍会填充？

@keyframes subMenu{
 0%   { width : 100; }
 100% { width: 0; }
}
.subMenu {
position: relative;
}
.subMenu:after {
content: ' ';
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1px;
background: black;
animation-name: subMenu;
animation-duration: 4s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-fill-mode: forwards; 
}

预先感谢

Answer 1

我试用了您的代码，我想找到了解决方案。

.subMenu:after {
  content: ' ';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: black;
}
.subMenu:hover:after{
    animation-name: subMenu;
  animation-duration: 4s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards; 
}

以下是代码笔：https://codepen.io/AjayKudva/pen/WKKxWQ

悬停线动画（不完整）

1 个答案: