css - 光影划过小动画

今天学到了一个小技巧，记录下来。
假设一个按钮，hover的时候有光影效果会显得比较有质感，也是一种对用户的响应吧。

<div class="submit">
    <button>登录</button>
</div>

button{
	background: #000;
}
button:after{
	background: -webkit-liner-gradient{to right, transparent, rgba(255, 255, 255, 1), transparent)
}
button:hover:after{
	animation: lightmoveto 1.5s ease-in-out infinite;
}
@keyframes lightmoveto {
	100%{
		left: 200%;
	}
}

如果载体是text，只希望在text上光影划过，需要加一句

-webkit-background-clip:text;

补充一下关于liner-gradient角度的问题

.angle-120deg {
background: aqua;
background: linear-gradient(120deg,
➝ aqua, navy);
}
.angle-290deg {
background: aqua;
background: linear-gradient(290deg,
➝ aqua, navy);
}

这样应该算是清晰明了