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 悬停效果上,无法选择/应用效果到特定元素?