css 闪亮的动画悬停伪元素

Posted 2021-05-13

li.kaeltetechnik a {
	position:relative; 	overflow:hidden;
}

li.kaeltetechnik a::after{ content: '';
    position: absolute;
    top: -179%;
    right: -87%;
    bottom: 18%;
    left: -173%;
    background: linear-gradient(to bottom, rgba(229, 172, 142, 0), rgba(255,255,255,0.5) 50%, rgba(229, 172, 142, 0));
    transform: rotateZ(60deg) translate(-5em, 7.5em);
}

li.kaeltetechnik a:hover::after, li.kaeltetechnik a:focus::after {
  animation: sheen 0.8s forwards;
}

@keyframes sheen {
  100% {
    transform: rotateZ(60deg) 	translate(1em, -9em);
  }
}