我定义了这个按钮动画:JSFIDDLE
这里还包括代码:
HTML
<button>Hover to change color</button>
SCSS
$blue: #0084ff;
$blue-darker: darken($blue, 5);
@keyframes mymove {
0% {width: 0%}
100% {width: 80%}
}
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
button {
margin: auto;
background-color: $blue;
border: 1px solid $blue;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
cursor: pointer;
position: relative;
&:hover {
&:after {
content: "";
position: absolute;
bottom: 3px;
width: 80%;
height: 2px;
background-color: white;
left: 0;
right: 0;
margin: auto;
animation-name: mymove;
animation-duration: .5s;
}
}
}
这是一个简单的悬停动画。问题在于当鼠标离开按钮时,:after元素会消失。我想让鼠标离开时也能以动画方式将:after元素移除,应该怎么做呢?
我需要修改关键帧来包含相反的方向吗?100%到0%?还是其他完全不同的方法?
编辑:
与这个问题的不同之处在于我需要从按钮中访问after元素。我已经尝试了以下代码:
@keyframes mymove-out {
from {&:after {
width: 80%
}}
to {&:after {
width: 0
}}
}
并将其应用于按钮。
animation: mymove-out .5s ease;
但是这样不起作用。我如何从关键帧访问after元素?