我试图在类元素的悬停状态下实现一个动画,但是,它似乎是不起作用的。代码如下。
.glass{
background: linear-gradient(
90deg,
transparent,
transparent 0.75rem,
var(--color-3) 2rem
);
height: 100%;
width: 100%;
backdrop-filter: blur(.65rem);
filter: contrast(1.35);
position: absolute;
z-index: 99;
inset: 0;
opacity: 0.5;
background-size: 2.5rem 100%;
/* animation: mymove 5s infinite; */
}
@keyframes mymove {
0% {background-size: 2.5rem 100%;}
25% {background-size: 2.5rem 75%;}
75% {background-size: 2.5rem 25%;}
100% {background-size: 2.5rem 0%;}
}
.glass:hover {
animation: mymove 5s infinite;
/* transition: 0.7;
opacity: 1; */
}
应用的玻璃效果应该在悬停时逐渐消失。
1条答案
按热度按时间cngwdvgl1#
考虑到你在根目录下添加了这个css变量
尝试添加
background-repeat: no-repeat;
,它将帮助您看到动画工作。