css 闪亮的动画悬停伪元素

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css 闪亮的动画悬停伪元素相关的知识,希望对你有一定的参考价值。

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);
  }
}

以上是关于css 闪亮的动画悬停伪元素的主要内容,如果未能解决你的问题,请参考以下文章

jQuery设置另一个项目的css“颜色”元素覆盖了它的悬停伪类

CSS:如果 Last-Child <li> 悬停,如何影响:伪元素之后?

CSS动画:悬停和悬停

tailwind css - 在悬停时为另一个元素设置动画

如何在鼠标离开元素后继续CSS动画:悬停?

在 CSS 悬停效果上,无法选择/应用效果到特定元素?